Javascript: adding markers on google maps using json file

Question

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

 <!DOCTYPE html>
   <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
       html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
         #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?    key=AIzaSyB_rFf5Ow4UXIxmXtRXMvVbfIinBSWDc7o&sensor=false">
    </script>
    <script type="text/javascript">
  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);
      }
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-    latest.min.js"></script>    
  </head>
  <body onload="initialize()"   >
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $.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);
      });
    });
  });
</script>

I have placed bus-stops.json in the same folder as this file. The code is only displaying the google map without the markers.The data looks like this:

[{"no":"10009","lat":"1.28210155945393","lng":"103.81722480263163","name":"Bt Merah Int"},{"no":"10011","lat":"1.2777380589964","lng":"103.83749709165197","name":"Opp New Bridge Rd Ter"}]

Please tell me where am I going wrong. Thanks

Can you check that it's correctly reading the file, i.e. does json1 have a value, and does the .each loop correctly loop over all the rows you'd expect, if you put a console.log(data) inside it? — duncan
– duncan, Commented Dec 5, 2016 at 9:48
I put a console.log(data), it is showing nothing in the console using firebug on Mozilla. guess json1 is not getting any value. Please suggest. — Somnath Banerjee
– Somnath Banerjee, Commented Dec 5, 2016 at 10:06
Is your jQuery file loading? In your code you reference the file as jquery- latest.min.js which isn't correct (there aren't meant to be spaces in the filename) — duncan
– duncan, Commented Dec 5, 2016 at 10:48
I checked again, there are no spaces in the file name. I tried to open it in a browser and it opened properly, The issue is resolved though and it was a timing problem as answered below. Thanks again!! — Somnath Banerjee
– Somnath Banerjee, Commented Dec 6, 2016 at 1:23

geocodezip · Accepted Answer · 2016-12-05 15:16:03Z

2

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);
    });
  });
}

answered Dec 5, 2016 at 15:16

geocodezip

162k14 gold badges228 silver badges256 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somnath Banerjee Over a year ago

Thank you Sir! This did help and I got the plot correctly. Thanks again.

Collectives™ on Stack Overflow

Javascript: adding markers on google maps using json file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related