title: Google Maps Marker Clustering - markerclusterPlus
body: <p>Based on an xml file, i want to set markerclusterer on a map. </p>
  
  <p>i use the markerclusterPlus version 3!
  <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/" rel="nofollow">http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/</a></p>
  
  <p>Problem is, that no markers will be displayed and i don't know why</p>
  
  <p><strong>markers.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;markers&gt;
      &lt;marker&gt;
          &lt;name&gt;Heineken Amsterdam&lt;/name&gt;
          &lt;address&gt;Joop Geesinkweg 5&lt;/address&gt;
          &lt;city&gt;Amsterdam&lt;/city&gt;
          &lt;postcode&gt;1096 AT&lt;/postcode&gt;
          &lt;lat&gt;52.3354&lt;/lat&gt;
          &lt;lng&gt;4.92938&lt;/lng&gt;
           &lt;/marker&gt;
  &lt;/markers&gt;
  </code></pre>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Google Maps Integration&lt;/title&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/markerclusterer.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  #map {
        width: 675px;
        height: 659px;
        }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  function initialize() {
          var filename = "markers.xml";
          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 = []; // array 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({
                      position: point,
                      map: null,
                      html: '&lt;b&gt;'+name+'&lt;/b&gt;&lt;br&gt;'+address
                  });     
  
                  markers.push(marker); // push marker to markers array
              });
          });
          var markerCluster = new MarkerClusterer(map, markers); // create marker clusterer
        }
  google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>