Basierend auf einem Beispiel von Google selbst, möchte ich jetzt die Marker auf einer map platzieren und dazu noch Markerclusterer erstellen lassen.
index.php
<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>
Die benutzte library "markerclusterer.js" findet ihr hier
Bei diesem Code wird nicht einmal die map angezeigt! Wie schaffe ich es die marker, sowie die markerclusterer richtig auf die map zu setzten, sodass alles richtig angezeigt wird?
Wenn es ein Beispiel hierfür basierend auf einer XML Datei gibt, wäre dies auch hilfreich!