<html>
<head>
<title>Google Maps Integration</title>
<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/data.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript" src="js/markers.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
$(document).ready(function() {
$("#map").css({
height: 675,
width: 659
});
var myLatLng = new google.maps.LatLng(51.918, 4.47663);
MYMAP.init('#map', myLatLng, 7);
MYMAP.placeMarkers("markers.xml"); // xml data
});
var MYMAP = {
map: null,
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
}
// set markers
MYMAP.placeMarkers = function(filename) {
var markers = []; // create new array for marker points
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
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));
// set marker new
var marker = new google.maps.Marker({position: point});
markers.push(marker);
// set marker info
var infoWindow = new google.maps.InfoWindow();
var html='<b>'+name+'</b><br>'+address;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
});
var markerCluster = new MarkerClusterer(map, markers);
});
}
google.maps.event.addDomListener(window, 'load', initialize);<?xml version="1.0"?>
<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>
|
|
|
