Hi,

I'm having problems with adding marker clusterer functionality to my map. What I want is to use custom icon for my markers and every marker has its own info window which I want to be able to edit.

I did accomplish that, but now I have problems adding marker clusterer library functionality. I read something about adding markers to array, but I'm not sure what would it exactly mean. Besides, all of the examples with array I have found, don't have info windows and searching through the code I didn't find appropriate way to add them.

Here is my code (mostly from Geocodezip.com):

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style type="text/css">
    html, body { height: 100%; } 
    </style>
<script type="text/javascript"> 
//<![CDATA[
var map = null;
function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);


}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, html) {
    var image = '/321.png';
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

//]]>
</script>