Question

I have a v3 Google Maps working fine with dynamic markers but I am trying to add the MarkerCluster feature as detailed in the google docs:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

<script type="text/javascript">

 var center = null;
var image = new google.maps.MarkerImage(
'combined.png',
 new google.maps.Size(31,25),
 new google.maps.Point(0,0),
 new google.maps.Point(16,25)
);


        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: image,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
               // map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"),  {
                center: new google.maps.LatLng(0, 0),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                },
                navigationControl: true,
                navigationControlOptions: {
                 style: google.maps.NavigationControlStyle.DEFAULT
                }

            });





var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
$name=$row_rsCity['PARKNAME']; 
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone:     $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);
center = bounds.getCenter();
map.fitBounds(bounds);

}
</script>

I believe the key is wrapping the var markers = []; around the addMarkers but when I do this

Example :

var markers = [
<?php
do {
$name=$row_rsCity['PARKNAME']; 
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone:     $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>];

Firebug returns the following error:

missing ] after element list

Can anyone help with the proper syntax ?

Answer 1

Update your addMarker function to return the marker and accept map as a param:

function addMarker(map, lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
    position: pt,
    icon: image,
    map: map
  });
  var popup = new google.maps.InfoWindow({
    content: info,
    maxWidth: 300
  });
  google.maps.event.addListener(marker, "click", function() {
    if (currentPopup != null) {
      currentPopup.close();
      currentPopup = null;
    }
    popup.open(map, marker);
    currentPopup = popup;
  });
  google.maps.event.addListener(popup, "closeclick", function() {
    currentPopup = null;
  });

  return marker;
}

then update the marker creation section to be:

var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
  $name=$row_rsCity['PARKNAME']; 
  $lat=$row_rsCity['lat'];
  $lon=$row_rsCity['lng'];
  $desc=$row_rsCity['PARKADDR'];
  $city=$row_rsCity['PARKCITY'];
  $spaces=$row_rsCity['SPACE_CNT'];
  $phone=$row_rsCity['PHONE'];
  echo ("markers.push(addMarker(map, $lat, $lon,'<b>$name</b><br/>$desc<br/>$city CA<br /><br />Phone: $phone <br />Space Count: $spaces'));\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);