Google Maps v3 - markers do not appear

Question

I am trying to place multiple markers on a Google map (API v3). I looked at Google docs as well as this stream . The map draws and centers to the init point, but markers are not displayed on the map.

Firebug does not report any errors.

Here is js

<script type="text/javascript"> var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(41.056466,-85.3312009), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); //Add 1st marker var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); var marker_0 = new google.maps.Marker({ position: Latlng_0, title:"0"}); marker_0.setMap(map); //Add 2nd marker var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); var marker_1 = new google.maps.Marker({ position: Latlng_1, title:"1"}); marker_1.setMap(map); google.maps.event.addDomListener(window, 'load', initialize); </script> 

Thanks for watching!

Answer 1

The reason the tokens are not displayed is because this part of the code is executed before the load event is triggered and the initialization method is triggered - at this point your map variable is already created but still null.

try adding code to add markers inside the initialization method

 var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(41.056466,-85.3312009), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); // Add 1st marker var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); var marker_0 = new google.maps.Marker( { position: Latlng_0, title:"0" } ); marker_0.setMap(map); //Add 2nd marker var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); var marker_1 = new google.maps.Marker( { position: Latlng_1, title:"1" } ); marker_1.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); 

see this jsfiddle here where the tokens are displayed http://jsfiddle.net/KvugB/

Answer 2

I am using this code. Hope this helps you:

 (function() { window.onload = function() { // Creating a new map var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(41.056466, -85.3312009), disableDefaultUI: false, zoom: 16, mapTypeId: google.maps.MapTypeId.SATELLITE }); // Creating the JSON data var json = [ { "title": "Title 1", "lat": 41.057814980291, "lng": -85.329851919709, "description": "" }, { "title": "Title 2", "lat": 41.057814981000, "lng": -85.8048, "description": "" }, ] var styles = [ { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#0077bb" }, { "lightness": 70 } ] },{ "featureType": "landscape.natural", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "saturation": -100 }, { "color": "#699e6b" }, { "lightness": 76 } ] },{ "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road.local", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#ffffff" } ] } ]; map.setOptions({styles: styles}); // Creating a global infoWindow object that will be reused by all markers var infoWindow = new google.maps.InfoWindow(); // Looping through the JSON data for (var i = 0, length = json.length; i < length; i++) { var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) (function(marker, data) { // Attaching a click event to the current marker google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } } })(); 

Answer 3

This is a response to @ JoanManuelHernández's answer, but I cannot post formatted code in a comment.

Joan, your decision is excellent; it is very similar to how I do it myself. Creating an array of marker locations is better than using separate variables for each one.

I would suggest a few minor improvements. One of them is an array called json . This is not a very descriptive name; json can mean any data. How to call it something like places or locations or the like?

Then, when you have a loop that creates a closure to handle an asynchronous callback, I think it's a little easier to understand how this works if you move the whole loop object to your own function. Then you do not need a built-in anonymous function. So this code:

 // Looping through the JSON data for (var i = 0, length = json.length; i < length; i++) { var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) (function(marker, data) { // Attaching a click event to the current marker google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } 

will become:

 // Looping through the places list for( var i = 0, length = places.length; i < length; i++ ) { addPlace( places[i] ); } // Add one place marker function addPlace( place ) { var latLng = new google.maps.LatLng( place.lat, place.lng ); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: place.title }); // Attaching a click event to the current marker google.maps.event.addListener( marker, "click", function(e) { infoWindow.setContent( place.description ); infoWindow.open( map, marker ); }); } 

It does the same, just a little easier.

Another thought: a stylized map is very cool: I am a big fan of stylized maps myself, but I wonder if this is necessary here for the sake of simplicity, since it is not related to the OP Question?

Feel free to include any of these ideas in your own answer, if they like you, and if anyone else finds this option useful, please refrain from Joan's answer, as there is where the source code came from.