Rendering multiple Google Maps API V3 markers from JSON

Question

Attempting to plot multiple markers using Google Maps API V3 from JSON output by PHP from DB.

Map is initialized on page, however it does not populate with markers. Browser warns "Resource interpreted as Other but transferred with MIME type undefined."?

Suggestions for further troubleshooting / debugging please.

        <!--  load points from database into Locations JSON -->
    $(document).ready(function () {
        $.getJSON("map-service.php?action=listpoints", function(json) {

        if (json.Locations.length > 0) {
            for (i=0; i<json.Locations.length; i++) {
                var location = json.Locations[i];
                    addMarker(location); 
                    }
                }
            });

        function addMarker(location) {
            var point = new google.maps.LatLng(location.lat, location.lng); 
            var marker = new google.maps.Marker({
                position:point,
                map: map,
                title: location.name
                }); 
            };


    });

Validated sample JSON output from map-service.php?action=listpoints

{"Locations":[{"name":"Abco Mountain","lat":"49.424999","lng":"-125.855003"},{"name":"Adder Peak","lat":"49.248333","lng":"-125.320000"},{"name":"Alexandra Peak","lat":"49.738110","lng":"-125.489998"},{"name":"Argus Mountain","lat":"49.538612","lng":"-125.389999"},{"name":"Big Baldy Mountain","lat":"49.759998","lng":"-126.129997"}]}

Use firebug and make sure that you are getting correct json response. — Diode, Dec 29 '11 at 17:50
Thanks @Diode ...I used [link](http://jsonlint.com/) to validate. I also confirmed values for location.lat, location.lng and location.name using the alert() function. — user468648, Dec 29 '11 at 21:54

score 4 · Accepted Answer · edited May 23 '17 at 11:44

My problem stemmed from how I had initialized the original map object. It wasn't visible in the code I shared ... apologies.

I did this:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

and should have done this:

this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

I found the solution in this post Adding markers after map created Thanks @yitwail !

score 0 · Answer 2 · answered Dec 30 '11 at 19:37

0

Try using jquery $.each for your looping.

if (json && json.Locations) {

$.each(json.Locations, function() { addMarker(this); });

});

Also, you'll probably want to call parseFloat on the lat and longiture inside your addMarker function.

answered Dec 30 '11 at 19:37

ScottE

21,530
18
94
131

Thanks @Scotte ... .each tidies up the loop but somehow in implementing I introduced a syntax error ... likely from a bracket ... I replaced if (json.Locations.length > 0) { for (i=0; i – user468648 Dec 31 '11 at 04:55

Rendering multiple Google Maps API V3 markers from JSON

2 Answers2