Question

I have a multidimensional JSON, whose data I want to use to plot markers on my Google Map.

I use this plugin for Jquery to work with my Google Map.

With my current code I don’t see any markers appear on my map. What could be causing this?

Upon init event – the script should iterate over the JSON data, plot it on the map, and create/attach info-boxes with appropriate HTML markup for each value of each property to every marker.

My JSON looks like this:

[{product:{productName:"ProductA", productPrice:"19.99", productQuantity:"12", Lat:"53.573858", Lng:"45.985456"}},{product:{... repeat ...}}, {...}]

My jQuery’s $.each() looks like this:

$('#map').gmap(mapOptions).bind('init', function () {
    $.post('myscript.php', function (json) {
        var theMarkers = json;
        $.each(theMarkers.product, function (i, object) {
            $.each(object, function (property, value) {
                $('#map').gmap('addMarker', {
                    'position': new google.maps.LatLng(object.Lat.value, object.Lng.value),
                    'bounds': true,
                    'icon': 'myicon.png'
                }).click(function () {
                    $('#map').gmap('openInfoWindow', {
                        'content': '<h1>' + object.productName.value + '</h1>' + '<h2 style="color: grey">' + object.productPrice.value + '</h2><p style="color: green">' + object.productQuantity.value + '</p>'
                    }, this);
                });
            });
        });
    });
});

Answer 1

Solution:

$('#map').gmap(mapOptions).bind('init', function(){
                    $.post('myscript.php', function(json){
                        var theMarkers = json;
                        $.each(theMarkers, function(i, element) {
                            $.each(element, function(object, dataMembers){
                                    $('#map').gmap('addMarker', { 'position': new google.maps.LatLng(parseFloat(dataMembers.Lat), parseFloat(dataMembers.Lng)), 'bounds':true, 'icon':'myicon.png' } ).click(function(){                                
                                        $('#map').gmap('openInfoWindow', { 'content': '<h1>'+dataMembers.productName+'</h1>'+'<h2 style="color: grey">'+dataMembers.productPrice+'</h2><p style="color: green">'+dataMembers.productQuantity+'</p>' }, this);
                                    }); 
                            });
                        });
                    }); 

                });