This is the code im working from:
http://jsfiddle.net/X9SkK/
This is the javascript:
function showmap() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
}
I want to have it so that when I click the button the map loads, however it doesnt work for some reason. I am sure its something simple but I cant pinpoint it.
The code actually creating the map is wrapped in a function named initialize, which isn't being called. Remove that and you'll be fine:
function showmap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
Also, be sure to specify a fixed height (such as 400px) for your #map_canvas element, or it won't be visible in your jsFiddle.
Here is what you could have done:
<!-- Display Map -->
function showmap() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
initialize();
}
The initialize(); function responsible for creating a map was never called. You have to call it inside your showmap function.
DEMO
Related
I'm trying to display markers from Firestore, but nothing happens.
Every solution that I found had coordinates stored like this so I think that the problem might be in the marker position in my code, but I don't know how to fix it.
This is what my Firestore looks like
and my code for displaying markers.
function initialize() {
var latlng = new google.maps.LatLng(58.2600006, 22.5297743);
var myOptions = {disableDefaultUI: true, zoom: 9, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map"), myOptions);
firebase.firestore().collection('markers').get().then((snapshot) => {
snapshot.forEach(function(child) {
console.log(child);
var marker = new google.maps.Marker({
position: {lat: parseFloat(child.lat), lng: parseFloat(child.lng)},
map: map,
});
});
});
}
it's possible to get template text from 'childDiv' id when I initialize a Google Map? My code looks like this:
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());
#map {
height: 450px;
width: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
<div id="childDiv">testes</div>
</div>
When I debug this code after initialize map function, that my childDiv gone.
Jsfiddle: https://jsfiddle.net/ce4bpzhh/
That is the default way the google maps works. It will overwrite the contents of the div you specify for it.
There is an option, however, to tell it to keep the existing contents.
The option is noClear and you must set it to true.
From the Google maps documentation about mapOptions
noClear - Type: boolean
If true, do not clear the contents of the Map div.
Working example
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear:true // ADD THIS OPTION
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());
#map {
height: 450px;
width: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
<div id="childDiv">testes</div>
</div>
I'm having a problem about the zoom property in my map. The deal is: I'm developing a full one page looping and I need to insert the map but, when you get in the section of the map screen and need to scroll up or down, just doesn't happens, because you're moving the zoom instead the page.
My js is:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-23, -46),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var meukml = new google.maps.KmlLayer({
url:'http://oceanos.nap.usp.br/remmarsp/tvlhico/contourfgradeSBB01.kmz'
});
meukml.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I think that is necessary just to deactivate the zoom. How do I do this?
Try removing it in the map options !
var mapOptions = {
center: new google.maps.LatLng(-23, -46),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
'controls': {
'zoom': false
},
'gestures': {
'zoom': false
}
}
My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});
Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing
I am trying to add a Google Map to my website, and I tried this:
$.getScript("https://maps.googleapis.com/maps/api/js?sensor=false", function () {
alert("1");
var map;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
alert("2");
map = new google.maps.Map(document.getElementById("container"), myOptions);
});
This is not working. Can anybody tell me why?
EDIT
Script loaded perfectly. I know this because alert(1) shows but after that control does not reach alert(2).
document.getElementById(id)
What is id, where did that get defined?
Also getScript is for doing Ajax requests, which isn't really how you should be doing Google Maps. Just call the script in the normal way, and have an init function which executes on document ready. Or even better use the window.load event listener that the Google Maps API provides for you anyway.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />
<script type="text/javascript">
function init(id)
{
var map;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(id), myOptions);
}
google.maps.event.addDomListener(window, 'load', init('yourDivID'));
</script>
You have to use async loading for this - https://developers.google.com/maps/documentation/javascript/tutorial#asynch
In the current approach, the script do this-
function getScript(src) {
document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>');
}
So, when you call $.getScript, that will goto void. And, google.maps.LatLng becomes undefined.
I've created a version with the async one. You can check the fiddle # http://jsfiddle.net/rifat/G3yPw/
You should have a look on your container div.
It must have specified width and height.
And I used to separate the affectation of LatLng :
var map;
var ll = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: ll,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("container"), myOptions);