Max Zoom for MarkerClusterer - identical lat longs

Question

I have added MarkerClusterer to my Google Maps V3 script. Works fine - however I have some markers which have identical lat long - MarkerClusterer doesn't recognise this and when down to the max zoom level it stacks one marker above the other so I can only view one of them. To solve this I am using an additional script (oms) which allows a group of markers with the same lat long to be expanded on click. Here is the confusing part;

At the moment when I click the last individual marker, the additional script expands all of the identical markers - but I need this to be fired 1 step before this - when the identical markers are in a cluster. Is it possible to do this in MarkerClusterer/does anyone know an alternative to this?

Thank you very much in advance.

JS below:

  function indexLoad() {

  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(43, 15),
    zoom: 1,
    mapTypeId: 'roadmap'


  });


 var infoBox;

 var oms = new OverlappingMarkerSpiderfier(map);

  // Change this depending on the name of your PHP file
  downloadUrl("/jofli/journals/xml/public", function(data) {
    var xml = data.responseXML;

    var markerArray = [];
    var markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {

            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address"); 
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng( 
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var html = "<section class='mapJournalInfo'> <b>" + name + "</b> <br/> <br/> " + address + "<br/> <br/>" + "<aside class='mapPhoto'> Photo 1 </aside>"  + "<br/> <br/> <br/> <a class='mapLink' href='#'> See More </a> </section>";
            var icon = customIcons[type] || {};



            var image = new google.maps.MarkerImage(

            'http://i.imgur.com/iNKorgI.png',
              new google.maps.Size(50,59),    // size of the image
              new google.maps.Point(0,0) // origin, in this case top-left corner
             // new google.maps.Point(9, 25)    // anchor, i.e. the point half-way along the bottom of the image

              );

            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: image,
              shadow: icon.shadow
            });

            markerArray.push(marker);

            oms.addMarker(marker);

             infobox = new InfoBox({
             disableAutoPan: false,
             maxWidth: 150,
             pixelOffset: new google.maps.Size(-150, -20),
             zIndex: null,
             boxStyle: {
             background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
             opacity: 0.75,
             width: "350px"
             },
             closeBoxMargin: "12px 4px 2px 2px",
             closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
             infoBoxClearance: new google.maps.Size(1, 1)
             });

            infobox.setContent(html);

            google.maps.event.addListener(marker, 'click', function() {
              infobox.open(map, this);
              map.panTo(point);
            });

            // at the moment, this is the click for the max level zoom (small bear)
            // this needs to be 1 step BEFORE that (last cluster level)
            // when there are <1 markers that are of the same lat long

            oms.addListener('click', function(marker) {

              infobox.setContent(html);
              infobox.open(map, marker);

            });

          ////////////////////////////////////////////////////////////////////////////



    }

  var clusterStyles = [

    {
      opt_textColor: '#e04343',
      textColor: 'red',
      url: 'http://i.imgur.com/UUg1nM4.png',
      height: 71,
      width: 49
    }

    ];

    var mcOptions = {


        styles: clusterStyles,
        streetViewControl: true,
        maxZoom:13,


        };

    var markerCluster = new MarkerClusterer(map, markerArray, mcOptions);

  });



}

spuzzelsnest spuzzelsnest · Accepted Answer · 2013-08-06T17:57:39

I had a simular problem, have you ever managed to solve this one? I assumed that the key to finding the answer is in the 'zoom' attribute off the google clustermarkerer plugin.

but eventualy it was the markerClusterer itself that had the attribute

var markerCluster = new MarkerClusterer(map, clusteredMarkers, {gridSize:2});

try this and see if it works

Max Zoom for MarkerClusterer - identical lat longs

1 Answers