Question

Based on a user’s selection from a drop down, the AJAX retrieves latitude and longitude for locations that are supposed to be marked on the map with markers, but I can’t get the markers to display. Below is the code.

function selectRoute() {
        var route = $("select option:selected").val();
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var locations = xmlhttp.responseText;
                var marker, i;
                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                        map: map
                    });
                }
            }
        }
        marker.setMap(map);
        xmlhttp.open("GET","../lib/markers.php?route="+route,true);
        xmlhttp.send();
    }

Here is what the responseText looks like that is retrieved from the markers.php page:

[[38.018914, -121.945154], [38.003275, -122.024597], [37.973737, -122.029095], and on and on];

My only thought is that the problem is this code isn’t in the initialize() function that initializes the Google Map, but if that’s the problem I haven’t been able to combine the two functions if you will. Beyond that I’m clueless what’s not working. Thanks in advance!

Answer 1

 var locations = xmlhttp.responseText;

So location is a string, you need to parse the JSON. Then everything should work quite nicely

… except for marker.setMap(map);, it’s outside the function; and you don’t need it anyway cause you set map in the marker options.