<markers>
<marker>
<name>Heineken Amsterdam</name>
<address>Joop Geesinkweg 5</address>
<city>Amsterdam</city>
<postcode>1096 AT</postcode>
<lat>52.3354</lat>
<lng>4.92938</lng>
</marker>
</markers>
<html>
<head>
<title>Google Maps Integration</title>
<style type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(51.918, 4.47663);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
$.get(filename, function(xml){
$(xml).find("marker").each(function(){ // get each marker position
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var marker = new google.maps.Marker({ // create marker
position: point,
map: null,
html: '<b>'+name+'</b><br>'+address
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers); // create markerclusterer
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
</head>
<body>
<div id="map"></div>
</body>
</html>
|
|
|
