How to put markers on Google Maps from external JSON data-sources?

Question

I'm trying to put out some Google Maps-markers on my map with location from a API. I tried to make a for-loop that counts all JSON-data and puts "A drivers name, a drivers latitude and a drivers longitude" inside a array. Then should this array help Google Maps to pin-out theese locations on a map. Code example below:

setTimeout(function () {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(62.457171, 17.350953),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    var url = "http://blackcab.didair.se/api/drivers";
    var name;
    var lat;
    var lon;
    var locations;

    $.getJSON(url,

    function (response) {
        name = response.drivers[n].name;
        lat = response.drivers[n].currentLat;
        lon = response.drivers[n].currentLon;
        for (var n = 0; n < response.drivers.length; n++)
        var locations = [
            [name, lat, lon, n], ];
        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
            });

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

This code is inside a interval due to I want it to reload theese positions during all the time. I looked into errors I got in Google Chrome web developer tool, but then I just got more errors. Is there an easy solution to this? A real "nut-cracker".

Thanks in advance!

Jack

I copied some of it from this source: http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example Then Tried to put in my code to get drivers from my API. — Jack, Apr 11 '13 at 16:02

Menelaos · Accepted Answer · 2013-04-11T16:25:06.397

It seems there were quite a few error in your code. Except for curly brackets, e.g. your using N before actually having the for loop that declares N. Additionally:

You should not be recreating your maps object all the time. The maps object should be outside of the function being called.

The JSON call should be the only thing within your SetInterval Function. Essentially, you will be clearing and setting markers every time the inerval is called.

I think something approaching this is better:

 <html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">

    var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };
  var shadow = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    size: new google.maps.Size(37, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(62.457171, 17.350953),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    setTimeout(function () {
        loadData(); 
    },500);


    function loadData()
    {
        //alert("Loading"); 
        var marker, i;

        var url = "http://blackcab.didair.se/api/drivers";
        var name;
        var lat;
        var lon;
        var locations;

        $.getJSON(url, function (response) {handleData(response)});
    }

    function handleData(response)
    {
        //alert(response);
        var n;
        for(n=0; n<response.drivers.length; n++)
        {
            name = response.drivers[n].name;
            //alert(name);
            lat = response.drivers[n].currentLat;
            lon = response.drivers[n].currentLon;
            var myLatLng = new google.maps.LatLng(lat,lon);
            var marker = new google.maps.Marker({
                position: myLatLng,
                shadow: shadow,
                icon:image,
                map: map,
                title: name,
                zIndex: 1
            });
        }   
    }



  </script>
</body>
</html>

The specific example however is missing that you need to remove the previous markers, add only the new ones, and add the info box.

Have a look at: http://jsfiddle.net/xu7wL/

How to put markers on Google Maps from external JSON data-sources?

1 Answers1