CODEWITHSUNDEEP
javascriptphpjsongoogle-mapsgoogle-maps-api-3
patrick
patrick

Reputation: 881

Populating google map with markers JSON

I am trying to populate a google map with markers. The information for each marker is contained in this array:

[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}]

However, my map does not show the markers. I am using this code in my javascript:

getLocations();

 function getLocations() {

   alert('hello');
    $.ajax({
        type: "GET",
        url: "http://localhost:8888/public/test",
        dataType: "jsonp",
        success: function(json){
            $.each(json, function(i, entry){
                PlotMarker(json[i].lat, json[i].long);
            });
        },
        error: function(err){
            console.log(err);
        }
    });
}

function PlotMarker(lat, long){
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
    markerLocations.push(marker);
}

Is there any way to fix this issue? Calling this url 

http://localhost:8888/public/test

returns the JSON shown above.

Any help would be greatly appreciated.

Thanks.

EDIT:

function initialize() {

var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

}

Upvotes: 2

Views: 1107

Answers (6)

Carmela
Carmela

Reputation: 687

What is the sequence of those functions? Which do you call first, and next?

I have encountered this kind of problem and what happens is, the map has not finished loading all the tiles so the markers could not be placed on those and so they do not appear. But when you check in the console, the marker objects are there.

This is how I solved it:

google.maps.event.addListener(map, 'tilesloaded', function() {
    plotMarkers();
    google.maps.event.clearListeners(map, 'tilesloaded');
});

It assures the map tiles are completely loaded before plotting the markers. In this case, the markers will surely be visible.

Upvotes: 0

Skitterm
Skitterm

Reputation: 4575

Are you ever calling your initialize function? Call it right when the page loads. 

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

as shown here.

Upvotes: 0

Anto Jurković
Anto Jurković

Reputation: 11258

The main problem is that getLocations() is called before initialize() is started. You have to comment out getLocations(); and move it to the end of initialize() function.

That is not enough: map definition has to be moved outside of initialize() function and should not be redefined inside initialize() function.

markerLocations, used in PlotMarker(), is not defined. Should be defined as global like map

var map;
var markerLocations = [];

function initialize() {
    ...
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 13,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    ...
    getLocations();
}

PlotMarker() has to be called like:

PlotMarker(entry.lat, entry.lng);

Upvotes: 0

Andy
Andy

Reputation: 63524

Declare your map variable outside of the initialize function. It's the only way that other functions will be able to see it:

var map;
function initialize() {
  var markers = [];
  var latLng = new google.maps.LatLng(-7.8,110.3666667);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 13,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}

Upvotes: 2

ChrisSwires
ChrisSwires

Reputation: 2723

Try changing this:

PlotMarker(entry.location.lat, entry.location.lng);

To:

PlotMarker(json[i].lat, json[i].lng);

I think it's because of the outer []'s.

Upvotes: 0

Dave Clarke
Dave Clarke

Reputation: 2696

Try changing:

PlotMarker(entry.location.lat, entry.location.lng);

to:

PlotMarker(entry.lat, entry.lng);

Upvotes: 0

Related Questions