google maps clustering marker

Question

i am trying to add clustering on my map, the code i am using is working fine but there is no clustring on it and can't figure out how should i add the cluster to this code.

(function (namespace, $, undefined) {

    // map the namespace to that
    var that = namespace;

    var markers = [];
    var dealers = [];
    var googleMap;
    var tmpDealer = "";

   function AddMarkers(aar, map, show) {
        if (aar.length > 0) {
            var image = '/Files/Templates/Designs/Mobler/images/MapMarker.png';
            for (var i = 0; i < aar.length; i++) {
                markers.push( new google.maps.Marker({
                    position: new google.maps.LatLng(parseFloat( aar[i].Latitude),parseFloat(aar[i].Longitude)),
                    map: map,
                    title: aar[i].Name,
                    icon: image,
                    DealerId: aar[i].DealerId,
                    DealerPage: aar[i].Area
                }));
            }
            for (var i = 0; i < markers.length; i++) {
                if (show) {
                    google.maps.event.addListener(markers[i], "click", function () {

                      tmpDealer = this.DealerPage;
                      MoblerLandingPage.SetCookie("/Default.aspx" + tmpDealer, false);
                      MoblerLandingPage.SetAreaName("/Default.aspx?AreaID=" + this.DealerPage, function() {
                        setTimeout(function() {
                            var area = $.cookie("MoblerAreaName");
                            document.location = "http://" + document.domain + "/" + area;
                        }, 250);
                      });
                    });
                } else {
                    google.maps.event.addListener(markers[i], "click", that.onMarkerClick)
                }
            }
        }
    }


    var InfoBoxOptions2 = {
       content: ""
      , disableAutoPan: false
      , maxWidth: 0
      , pixelOffset: new google.maps.Size(-75, -5)
      , zIndex: null
      , boxClass: "DealerMapInfoBox"
      , closeBoxMargin: "5px"
      , closeBoxURL: "/Files/Templates/Designs/SmagOgBehag/images/infoBoxClose.png"
      , infoBoxClearance: new google.maps.Size(1, 1)
      , isHidden: false
      , pane: "floatPane"
      , enableEventPropagation: false
      , alignBottom : true
    };
    var infoBox2 = new InfoBox(InfoBoxOptions2);



    that.Initialize = function(mapId, dealerArray, show){
        dealers = dealerArray;

        var mapOptions = {
            center: new google.maps.LatLng(56.22, 11.32),
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        if(!show){
        var mapOptions = {
            center: new google.maps.LatLng(56.22, 11.32),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        }
        googleMap = new google.maps.Map(document.getElementById(mapId), mapOptions);



        if(dealerArray.constructor === Array && dealerArray.length > 0){
            AddMarkers(dealers, googleMap, show);


        }

        if(!show){

            google.maps.event.addListener(googleMap, 'click', function () {
                infoBox2.close();
            });
        }
    }

    that.onMarkerClick = function(){

        var marker = this;
        infoBox2.content_ = $('#Dealer' + marker.DealerId + ' li a').html();
        infoBox2.open(marker.map, marker);
    }

    that.ShowDealerOnMap = function(dealerId) {
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].DealerId == dealerId) {
            var marker = markers[i];
            marker.map.setZoom(15);
            marker.map.panTo(marker.getPosition())
            infoBox2.content_ = $('#Dealer' + marker.DealerId).html()
            infoBox2.open(marker.map, marker);
            }
        }
    }

You are not creating marker clusterer. See [Adding simple marker clusterer to google map](http://stackoverflow.com/questions/5258553/adding-simple-marker-clusterer-to-google-map?rq=1) — Anto Jurković, Mar 04 '14 at 07:25

score 1 · Answer 1 · answered Mar 04 '14 at 08:38

Did you take a look to this documentation ? You can see a working sample to use MarkerClusterer

//Create your map
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

//Create the clusterer and its options
var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [...]; // Create the markers you want to add and collect them into a array.
//Add the clusterer to the map, and the markers to the clusterer.
var mc = new MarkerClusterer(map, markers, mcOptions);

Please note that if you don't have a lot of markers, you'll have to change some options in order to see the clusterer working. Change the maxZoom where the clusterer works, and the size of the grid ( gridSize option).
For a complete list of all options, please refer to this document

I tried it but couldn't get it worked.... can you try giving me small example with my code — Umar Khan, Mar 04 '14 at 09:25
I'm not really at ease with your code, but normally, all you have to do is to define the `mcOptions` just after your map initialization, then, define the `mc` once your array with all markers is filled. — AlexB, Mar 04 '14 at 09:47

score 0 · Answer 2 · answered Mar 04 '14 at 07:42

0

See this:

http://www.appelsiini.net/2008/introduction-to-marker-clustering-with-google-maps

You can make clusters, rectangle based or square based.

answered Mar 04 '14 at 07:42

prady00

721
1
6
17

google maps clustering marker

2 Answers2