Custom markers on google maps

Question

I have predefined google map with about 6k markers. How do i make custom markers for them, if i need to put marker_1 if there are 10+ points in 1cm^2 or put marker_2 if there are 50+ points,etc. And the last one, i need to print amount of points in this custom marker.

Answer 1

Pasting a code which demonstrate it

 <script type="text/javascript">
  function initialize() {
      var locations = 
       [
            ['Sugar Grove', 41.7696, -88.4588],
           ['Coogee Beach', -33.923036, 151.259052],
            ['Cronulla Beach', -34.028249, 151.157507],
            ['Manly Beach', -33.80010128657071, 151.28747820854187],
             ['Tel Aviv', 32.067, 34.767]
      ];



      var map = new google.maps.Map(document.getElementById('map'), {
                                 zoom: 3,
                                center: new google.maps.LatLng(--putHereCenterVar-->),
                                 mapTypeId: google.maps.MapTypeId.ROADMAP
                            });



            var opt = { minZoom: 2, maxZoom:18  };
            map.setOptions(opt);
            var markers = [];
            var len=LocationLength.Length;
            var i;
            for (i = 0; i < len; i++) {
                var dataValue = locations[i];
                var latLng = new google.maps.LatLng(dataValue[1],dataValue[2]);
                var marker = new google.maps.Marker({position: latLng});
                markers.push(marker);
            }



            var markerCluster = new MarkerClusterer(map, markers);
        }


        google.maps.event.addDomListener(window, 'load', initialize); 

this code demonstrate how to add clustreded ability to google map , try adding that to your code. Location is the 2d array with the marker locatoin, MarkerClusterer is the object which makes alot of points looks as one big mark with number of instances.

Don't forget to declare :

 <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js" type="text/javascript"></script>


    <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/tags/markermanager/1.0/src/markermanager.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>

Hope that helps.