how to show multiple markers on google map?

1
votes

Here i am making an functionality where i am retrieving the latitude and longitude from JSON file. and showing markers on google map.

But my problem is only one marker is showing on google map. Others is not showing.

here is my json format 

  {
"Data": {
"-template": "Parallax",
 "Explore": {
 "IslandLife": {
"TourismLocation": [
  {
    "Title": "Langkawi",
    "Latitude": "6.350000",
    "Longitude": "99.800000",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": {
      "YouTubeVideoID": [
        "7HlMpaSspNs",
        "tzeRnbd77HU",
        "VkIAbDIVJCA",
        "ksJ6kwTe9wM"
      ]
    }
  },
  {
    "Title": "Rawa Island",
    "Latitude": "2.520278",
    "Longitude": "103.975833",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": { "YouTubeVideoID": "Kx0dUWaALKo" }
  },
  {
    "Title": "Perhentian Island",
    "Latitude": "5.903788",
    "Longitude": "102.753737",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": {
      "YouTubeVideoID": [
        "ZpcdGk5Ee0w",
        "TQTDOGpflZY"
      ]
    }
  },
  {
    "Title": "Sabah Marine Park",
    "Latitude": "4.623326",
    "Longitude": "118.719800",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": { "YouTubeVideoID": "VCDTEKOqpKg" }
  }
]
 }
}
}
 }

here my function where i am retriving latitude and lognitutde from above json file 

<script type="text/javascript">

  $.getJSON('json/explore.json', function(data) {
     $.each(data, function(key, val) {
           for (var i = 0; i < val.Explore.IslandLife.TourismLocation.length; i++) {
               PlotMarker(val.Explore.IslandLife.TourismLocation[i].Latitude, val.Explore.IslandLife.TourismLocation[i].Longitude);
    }
    });
});

function PlotMarker(lat, lang) {
var mapProp = {
    center: new google.maps.LatLng(lat, lang),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lang),
});
marker.setMap(map);
 }
 google.maps.event.addDomListener(window, 'load', PlotMarker);
    </script>


<body>
    <div id="gmap" style="width: 800px; height:500px;"></div>
</body>

How to show multiple markers on map ???

2
javascriptjqueryjsongoogle-mapsgoogle-maps-api-3
You are showing multiple markers on multiple maps (overwriting each map you create).. @Matthew has answered well.. Try his code and you will be fine.. – fernandosavio

2 Answers

1
votes

Your issue here is scope - you are recreating the map every time you call PlotMarker - so each time it has only one marker added to it. Declare your map outside of the PlotMarker function, something like:

initialize() {
    var mapProp = {
      center: new google.maps.LatLng(lat, lang),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
}

function PlotMarker(lat, lang) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lang),
  });
  marker.setMap(map);
}

And then call initialize() on page load - also, ensure the map exists before calling the PlotMarker function.

Another good SO answer with some sample code: https://stackoverflow.com/a/7701386/1803682

1
votes

The below is a working sample that I use in my project

JS method AddInfoWidnow used to add InfoWindow to a marker.

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

call the AddInfoWidnow method inside the for loop

function ShowOnMap(ContainerId, mapItems) {

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824');

var mapOptions = {
    center: DefaultLatLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    marker: true
};

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions);

var arrJsonObject = JSON.parse(mapItems);

for (var y = 1; y <= arrJsonObject.length; y++) 
{

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude);

    var marker = new google.maps.Marker({
    position: myLatLng1,
    map: mapCust,
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate
});

    addInfoWindows(marker,y-1,arrJsonObject);


    marker.setMap(mapCust);

}
}

Use the below snnipet to call the map

  var mapItems='[
  {
    "Latitude": "22.575897",
    "Lonngitude": "88.431754",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 12:04:41 PM"
  },
  {
    "Latitude": "22.615067",
    "Lonngitude": "88.431759",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 3:02:19 PM"
  }
]';
    ShowOnMap(containerId2, mapItems);