using the google maps API - marker cluster

Question

I really am a JS noob - I have never really used itbefore and am struggling using the marker clusterer google provide. I have rad the documentation

here is the code

<script src="http://localhost/wheredidmytweetgo/js/markercluster.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(
    document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.setCenter(
    new GLatLng( 56.65622649350222, -19.86328125), 2);
    var mc = new MarkerClusterer(map);
    function createMarker(point, text, title) {
      var marker =
      new GMarker(point,{title:title});
      GEvent.addListener(
      marker, "click", function() {
        marker.openInfoWindowHtml(text);
      });
      return marker;
    }
    <?php

    foreach ($cluster_location as $location) {
    ?>
    var marker = createMarker(
    new GLatLng(<?php echo $location ?>),
    'Marker text <?php echo $location ?>',
    'Example Title text <?php echo $location ?>');
    map.addMarker(marker);
    <?php }
  ?>
  }
}

cluster location is just an array of lat and longs - My code is working fine when just using the add.overlay however there are too many to make the map readable hence the need for clustering. I do load the clustering JS which I have I have included. I create the clusterer object and pass in map as defined.

var markers = [];
//create array

I know I can create a JS array and pass this in to

var mc = new MarkerClusterer(map, markers);

But I simply dont have the JS knowledge to create an array at this time (I intend to learn) and the Google documentation advises you can iterate and add one at a time using addMarker

Hi Tom - Thanksfor the info - I have tried doing what you advised and have came up with the below:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://localhost/wheredidmytweetgo/js/markercluster.js">

    </script>

    <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          'zoom': 13,
          'center': center,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
       <?php foreach ($cluster_location as $location) { ?>{
         var marker = new google.maps.Marker({'position': <?php echo $location;?>});
  markers.push(marker);
}
        <?
       }
       ?>
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <p>
      <a href="?compiled">Compiled</a> |
      <a href="?">Standard</a> version of the script.
    </p>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

But my map still loads empty. I'm using literally the most basic google provided code now and just loading my own markers in. I know my markers positioning should be okay because when I go to view my page source I can see

{

          var marker = new google.maps.Marker({'position': 40.0994425,-74.9325683});

         markers.push(marker);

          });

for each marker. any more help would really be appreciated!

Answer 1

Please check the examples on google maps utilities library page ( link ).

But basically to add instance of an object (a marker) to an array you have to define the array first so you need to do the var markers = []; above the loop where you create the markers. And then as you create the markers you have to add them to the markers array by calling the push method of an array (while you are at it go to MDN and read about arrays! if you want to learn it's good time to start there - there is a tutorial about JS there as well ( link ).

So inside of the foreach loop afer you've defined a marker just add it to the array markers.push(marker); This will make the markers available for the MarkerCluster initialization.

In a longer term when you figure out javascript a bit better you'll probably want to replace this part with either passing data as JSON object to the DOM so methods can handle it or even better - have the data for markers be retrieved with ajax query. But one step at a time I guess :)

Maybe try the fun interactive tutorials at the www.codecademy.com ? They are quite basic but seems like that's exactly what you need

EDIT:

var marker,
    markers = [];

<?php foreach ($cluster_location as $location) { ?>
    marker = new google.maps.Marker({'position': <?php echo $location;?>});
    markers.push(marker);
<? } ?>

using the google maps API - marker cluster

Question

1 answers

solution1
0 ACCPTED 2012-02-17 22:35:36

using the google maps API - marker cluster

Question

1 answers

solution1 0 ACCPTED 2012-02-17 22:35:36

solution1
0 ACCPTED 2012-02-17 22:35:36