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);
});
}
精彩评论