Javascript: Adding Markers On Google Maps Using Json File

I am trying to add markers of bus stops for Singapore on using google maps. My code:

Solution 1:

Most likely a timing problem. Call the asynchronous $.getJSON function from the initialize function, or deal with the case where the map isn't initialized when it runs.

var map;
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(1.290270, 103.851959),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
  $.getJSON("bus-stops.json", function(json1) {
    $.each(json1, function(key, data) {
      var 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,
        title: data.name
      });
      marker.setMap(map);
    });
  });
}

Share