Loading XML via jQuery for Google Maps API V3

问题

UPDATE: Fatigue onset user error, not the code itself, turned out to be the problem. I simply called the initialize() function twice by mistake. I'll leave this post up as the code snippet may be of some use to others hoping to consume XML data for a Google Map via jQuery.

I am loading map marker coordinates and infoWindow content from an XML file via jQuery for Google Maps (API V3). Everything appears to be working fine, except for the fact that every marker is added twice.

Here is my JS:

google.load("maps", "3",  {other_params:"sensor=false"});
google.load("jquery", "1.6.2");

var infowindow;
var map;

function initialize() {

// Specify center of the map
var latLng = new google.maps.LatLng(51.781,-107.402);

// Customize map appearance
var mapOptions = {
    center: latLng,
    mapTypeControl: false,
    mapTypeId: 'roadmap',
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL, position: google.maps.ControlPosition.TOP_RIGHT},
    scaleControl: false,
    streetViewControl: false,
    zoom: 3
} // end mapOptions();

// Load the Google map into the #mapCanvas div
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

jQuery.get("iphorm/test.xml", function(data) {
  jQuery(data).find("marker").each(function() {
    var eachMarker = jQuery(this);
    var markerCoords = new google.maps.LatLng(
        parseFloat(eachMarker.find("Latitude").text()),
        parseFloat(eachMarker.find("Longitude").text())
    );
    var name = eachMarker.find("Name").text();
    var content = eachMarker.find("Content").text();
    var html = "<div class='info-blob'>" + name + "<br />" + content + "</div>";

    var marker = addMarker(html, markerCoords);

    });
  });
} // end initialize();

// Create a marker for each XML entry
function addMarker(html, markerCoords) {

// Place the new marker
var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    map: map,
    position: markerCoords
}); // end place the new marker

// Add event listener. On marker click, close all open infoWindows open current infoWindow.
google.maps.event.addListener(marker, "click", function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: html});
    infowindow.open(map, marker);
}); // end add event listener

// Display marker
return marker;

} // end addMarker();

// On page lod, initialize the map
google.setOnLoadCallback(initialize);

My XML file looks like this:

<?xml version="1.0" encoding="utf-8"?>
    <markers>
        <marker>
            <Name>Jane Smith</Name>
            <Content>A bit of content goes here.</Content>
            <Latitude>53.69629</Latitude>
            <Longitude>-123.925437</Longitude>
        </marker>
        <marker>
            <Name>Joe Smith</Name>
            <Content>A bit of content goes here.</Content>
            <Latitude>55.627598</Latitude>
            <Longitude>-115.136375</Longitude>
        </marker>
</markers>

Obviously, each <marker> element from the XML should only be grabbed once for the map. Any ideas on how to fix this error? Edit: Code works as intended.

回答1:

The JS and the XML are both functioning properly. I simply called the initialize() function twice by mistake.

来源：https://stackoverflow.com/questions/8771690/loading-xml-via-jquery-for-google-maps-api-v3