CODEWITHSUNDEEP
jqueryxml
user3024073
user3024073

Reputation: 1

Adding markers to googlemap using xml

I'm trying to add markers on googlemaps while getting data using jQuery from XML file but the marks don't show up

Function Called upon clicking on the radio button

 Route 1  <input type="radio" value="route1" name="1" onclick="addMarker();"/><br>

Adding Market Function

function addMarker() {
    $.ajax({
        type: "GET",
        url: "stationx.xml",
        dataType: "xml",
        success: function(data) {
            $(data).find('station').each(function() {
                var name = $(this).find('name').text();
                var lat = $(this).find('lat').text();
                var lon = $(this).find('lon').text();
            });
        }
    });
    marker = new google.maps.Marker({
        position: new google.maps.LatLng("lat", "lon"),
        title: "Pittsburg/Bay Point"
    });
    marker.setMap(map);
}

This is the XML file "stationx.xml"

<stations>
<station>
<name>12th St. Oakland City Center</name>

<lat>37.803664</lat>
<lon>-122.271604</lon>

</station>
<station>
<name>16th St. Mission</name>

<lat>37.765062</lat>
<lon>-122.419694</lon>

</station>
</stations>

Upvotes: 0

Views: 55

Answers (1)

Dappergoat
Dappergoat

Reputation: 479

You'll need to move your logic for adding the marker into your loop of stations. And you should use your variables instead of just text strings "lon" vs lon 

success: function(data) {
            $(data).find('station').each(function() {
                var name = $(this).find('name').text();
                var lat = $(this).find('lat').text();
                var lon = $(this).find('lon').text();
                marker = new google.maps.Marker({
                  position: new google.maps.LatLng(lat, lon),
                  title: name
               });
               marker.setMap(map);
            });
        }

Upvotes: 1

Related Questions