开发者

How can i add a infowindow on markers loaded form a XML file

Can someone tell me how i can add a info window on markers loaded from a Xml file.

This is the code I'm using to load the markers.

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

function initialize() {
    var myLatlng = new google.maps.LatLng(52.132633, 5.2912659999999505);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.开发者_高级运维getElementById("map_canvas"), myOptions);

    jQuery.get("locaties.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var marker = jQuery(this);
            var latlng = new google.maps.LatLng(
                parseFloat(marker.attr("lat")),
                parseFloat(marker.attr("lng"))
            );
            var marker = new google.maps.Marker({position: latlng, map: map});
        });
    });
}
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
}

window.onload = loadScript;

google.setOnLoadCallback(initialize);

this is the XML file;

<markers>
<marker lat="52.08920341101735" lng="4.279875700000048" />
<marker lat="52.083408210994186" lng="4.314160399999992"/>
<marker lat="52.08598371100446" lng="4.301652100000069"/>
</markers>


After you create the marker, all you need to do is to assign the infowindow:

jQuery.get("locaties.xml", {}, function(data) {
    jQuery(data).find("marker").each(function() {
        var markerXML = jQuery(this);
        var latlng = new google.maps.LatLng(
            parseFloat(markerXML.attr("lat")),
            parseFloat(markerXML.attr("lng"))
        );
        var marker = new google.maps.Marker({position: latlng, map: map});

        // now that the marker is placed, assign event listener on the marker
        // and create/assign infowindow to the event trigger.
        markerInfoWindow(marker, markerXML.attr("info"));
    });
});

// ..... other code here .....

// the marker event handler onclick and infowindow creation/assignment 
function markerInfoWindow(marker, information){
    google.maps.event.addListener(marker, 'click', function(){
        var infowindow = new google.maps.InfoWindow({
            content: information
        });
        infowindow.open(map, marker);
    });
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜