Multiple markers in google map?

Question

I'm not able to add multiple marker on Google map, Can someone see the code below and suggest. my Google not showing the marker for locations[] array.

<!DOCTYPE html>
<html>
 <head>
   <title>Geolocation</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

   <script>
var map;

function initialize() {
    var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     // Try HTML5 geolocation
     if(navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
          var home = new google.maps.Marker({
            position: initialLocation, 
            map: map,
            icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
          });

          var myCity = new google.maps.Circle({
          center:initialLocation, map:map, radius:25000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2,
          fillColor:"#0000FF",
          fillOpacity:0.4,
          editable:true
          });
        }, function() {
          handleNoGeolocation(true);
        });
     } else {
       // Browser doesn't support Geolocation
       handleNoGeolocation(false);
     }
    }
    var locations = [
    ["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
    ["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
    ];

    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0], locations[i][6]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

function handleNoGeolocation(errorFlag) {
 if (errorFlag) {
   var content = 'Error: The Geolocation service failed.';
 } else {
   var content = 'Error: Your browser doesn\'t support geolocation.';
 }

}
google.maps.event.addDomListener(window, 'load', initialize);

</script>  
 </head>
 <body>
   <div id="map-canvas"></div>
 </body>
</html>

Answer 1

Add the markers and initialize the map to a valid center before trying to center it using geolocation.

var map;

function initialize() {
    var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var locations = [
    ["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
    ["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
    ];

    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
      });
      bounds.extend(marker.getPosition());

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0], locations[i][6]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    map.fitBounds(bounds);

working example

Multiple markers in google map?

Question

1 answers

solution1
1 ACCPTED 2014-03-22 16:32:05

Multiple markers in google map?

Question

1 answers

solution1 1 ACCPTED 2014-03-22 16:32:05

solution1
1 ACCPTED 2014-03-22 16:32:05