CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Joel Johnson
Joel Johnson

Reputation: 23

Google Maps and Multiple Markers

So here is my code. The problem is the map shows, but no markers are placed on the map. latlongARR is an array that looks like this

[{"name":"McChord Field DGC","lat":"47.128257","long":"-122.488847"},{"name":"Ambient DGC","lat":"47.184732","long":"-122.509232"},{"name":"Riverside Disc Golf Park","lat":"47.185683","long":"-122.212600"},{"name":"East Tacoma DGC","lat":"47.227344","long":"-122.398491"},{"name":"White River","lat":"47.278501","long":"-122.197390"}]

It seems everything should work?? any obvious mistakes ?

                var mapOptions = {
                    zoom:10,
                    center: currentLocation,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                var map = new google.maps.Map(document.getElementById('dgmap'), mapOptions);
                var infowindow = null;

                var infowindow = new google.maps.InfoWindow({content: 'loading...'}); 

                var marker, i;

                for(i=0; i < latlongARR.length; i++){
                    var markers;
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(latlongARR[i][1], latlongARR[i][2]),
                        map:map
                        });
                        console.log(latlongARR[i][0]);
                    google.maps.event.addListener(marker, 'click', (function(marker, i){
                        return function(){
                            infowindow.setContent(latlongARR[i][0]);
                            infowindow.open(map, marker);
                        }
                        })(marker,i));
                    };

                }

Upvotes: 0

Views: 325

Answers (2)

geocodezip
geocodezip

Reputation: 161334

You should use a debugger. The first thing is this:

                   marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latlongARR[i][1], latlongARR[i][2]),
                    map:map
                    });

latlongARR[i][1] and latlongARR[i][2] are undefined, they should be latlongARR[i].lat and latlongARR[i].long.

Upvotes: 1

xdazz
xdazz

Reputation: 160833

position: new google.maps.LatLng(latlongARR[i][1], latlongARR[i][2]),

latlongARR[i] is an object, you need to use the property name not the number index to get the value, the above code should be:

position: new google.maps.LatLng(latlongARR[i].lat, latlongARR[i].long),

or

position: new google.maps.LatLng(latlongARR[i]['lat'], latlongARR[i]['long']),

Same problem of below:

infowindow.setContent(latlongARR[i][0]);

this should be infowindow.setContent(latlongARR[i].name);

Upvotes: 2

Related Questions