Google Maps API v3 кластерные маркеры с информационными окнами

Question

Я прочитал документацию, но мои навыки работы с сценариями невелики, поэтому я изо всех сил стараюсь реализовать кластеризацию на моей карте Google.

Код, который у меня работает, отлично работает - захватывает множество мести нанесение их на карту.Тем не менее, у меня сейчас есть несколько сотен точек на карте, поэтому мне нужно грубо сгруппировать их, чтобы карта была чище.У меня есть такой код:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/google-maps-marker-cluster.js"></script>

<script type="text/javascript">
    var infowindow = null;

    $(document).ready(function () { initialize(); });

    function initialize() {
        var centerMap = new google.maps.LatLng(54.5753459, -3.9550781);
        var myOptions = {
            zoom: 6,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
        var markerCluster = new MarkerClusterer(map,sites);
    }

    var sites = [     
        ['AAA', 57.340558, -2.324553, 1, '<h2>Organisation AAA</h2><address>The address</address>'],
        ['ZZZ', 50.827138, -0.139432, 1, '<h2>Organisation ZZZ</h2><address>The address</address>']
    ];


    function setMarkers(map, markers) {
        var image = new google.maps.MarkerImage('/css/img/icon.png',
            new google.maps.Size(16, 16),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32)
        );
        var shadow = new google.maps.MarkerImage('/css/img/shadow.png',
            new google.maps.Size(37, 14),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32)
        );
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                shape: shape,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });
            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>

<div id="map_canvas"></div>  

Может кто-нибудь сказать мне самый простой способ кластеризации этих маркеров?Я пытался переместить строку var markerCluster = new MarkerClusterer(map); в нескольких местах, но ничего не работает.

Спасибо за любые указатели ...

Answer 1

Вот как я это делаю в проекте Rails.Он очень похож на ваш, за исключением того, что я зацикливаю переменную Rails и присваиваю ее javascript для построения массива markers.

Самое большое различие заключается в том, что мои маркеры находятся внутри моей функции инициализации.

function initialize() {
  var latlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 8,
    center: latlng,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById("map"),
      myOptions);

  var latlnglist = []
  var markers = []
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  })

  <% @map.each do |artwork| %>
    <% unless artwork.location.blank? %>
      latlnglist.push(artwork_lat_lng = new google.maps.LatLng (<%= artwork.lat %>, <%= artwork.lng %>))
      markers.push(marker = new google.maps.Marker({ 
        position: artwork_lat_lng,
        title: "<%=raw escape_javascript(artwork.title) %>",
        html: "<%=raw escape_javascript("#{link_to image_fu(artwork.image, '315x120>', :size => '315x120',  :alt => artwork.title), map_url(artwork)} <h4>#{artwork.page_title}</h4>") %>"
        }))

      google.maps.event.addListener(marker, 'click', function() {  
        infowindow.close();
        infowindow.setContent(this.html);
        infowindow.open(map, this);
      })
    <% end %>
  <% end %>

  var mcOptions = {
    gridSize: 50, 
    maxZoom: 15
  }
  var markerCluster = new MarkerClusterer(map, markers, mcOptions);

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, len = latlnglist.length; i < len; i++) {
    bounds.extend(latlnglist[i]);
  }
  map.fitBounds(bounds);      
}
google.maps.event.addDomListener(window, 'load', initialize);