Google Maps Clustering - JavaScript

Question

Ich verwende Google Maps auf meiner Website und möchte Multi-Marker auf Karten mithilfe von Google Clustering behandeln. Ich habe die Dokumentation gelesen und befolge die Schritte, aber die Karte wurde nicht geladen, wenn ich dem Skript einen neuen Cluster hinzufüge.

Ich bin neu bei Google Maps API und möchte die Clustering-Funktion zu meiner Website hinzufügen. Vielen Dank für jede Hilfe.

function initMainMap() { 
     var map; 
     var bounds = new google.maps.LatLngBounds(); 

     var mapOptions = { 
      zoom:5, 
      scrollwheel: false, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 

     // Display a map on the page 
     map = new google.maps.Map(document.getElementById("main-map"), mapOptions); 
     map.setTilt(45); 

     // Multiple Markers 
     var markers = [ 
      ['Test, Test', 33.890396,35.506160], 
      ['Test, Test', 33.880007,35.514207], 
      ['Test, Test', 33.880007,35.518207], 
      ['Berytech Al Mathaf, Beirut', 33.880307,35.514507], 
      ['Berytech Al Mathaf, Beirut', 33.880407,35.516607] 
     ]; 

     // Info Window Content 
     var infoWindowContent = [ 
      ['<div class="info_content">' + 
      '<h3>Test</h3>' + 
      '<p>Test</p>' +  '</div>'], 
      ['<div class="info_content">' + 
      '<h3>Test</h3>' + 
      '<p>Test</p>' + 
      '</div>'] 
     ]; 

     // Display multiple markers on a map 
     var infoWindow = new google.maps.InfoWindow(), marker, i; 

     // Loop through our array of markers & place each one on the map 
     for(i = 0; i < markers.length; i++) { 
      var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
      bounds.extend(position); 
      marker = new google.maps.Marker({ 
       position: position, 
       map: map, 
       title: markers[i][0] 
      }); 

      // Allow each marker to have an info window 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infoWindow.setContent(infoWindowContent[i][0]); 
        infoWindow.open(map, marker); 
       } 
      })(marker, i)); 

      // Automatically center the map fitting all markers on the screen 
      map.fitBounds(bounds); 
     } 

     // Call the resize function for a responsive container 
     google.maps.event.addDomListener(window, "resize", function() { 
      var center = map.getCenter(); 
      google.maps.event.trigger(map, "resize"); 
      map.setCenter(center); 
     }); 

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
      this.setZoom(14); 
      google.maps.event.removeListener(boundsListener); 
     }); 

    } 

Answer 1

Fügen Sie Ihrem Code einfach einen MarkerClusterer hinzu und fügen Sie Ihre Markierungen hinzu.

// before the loop 
var markerClusterer = new MarkerClusterer(map, [], {imagePath: "http://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"}); 

// inside the loop 
markerClusterer.addMarker(marker); 

Code-Schnipsel:

function initMainMap() { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var mapOptions = { 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    // Display a map on the page 
 
    var map = new google.maps.Map(document.getElementById("main-map"), mapOptions); 
 

 
    var infoWindow = new google.maps.InfoWindow(), 
 
    marker, i; 
 
    var markerClusterer = new MarkerClusterer(map, [], { 
 
    imagePath: "http://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m" 
 
    }); 
 
    // Loop through our array of markers & place each one on the map 
 
    for (i = 0; i < markers.length; i++) { 
 
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
 
    bounds.extend(position); 
 
    marker = new google.maps.Marker({ 
 
     position: position, 
 
     map: map, 
 
     title: markers[i][0] 
 
    }); 
 
    markerClusterer.addMarker(marker); 
 
    // Allow each marker to have an info window 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infoWindow.setContent(infoWindowContent[i][0]); 
 
     infoWindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
    // Automatically center the map fitting all markers on the screen 
 
    map.fitBounds(bounds); 
 
    // Call the resize function for a responsive container 
 
    google.maps.event.addDomListener(window, "resize", function() { 
 
    var center = map.getCenter(); 
 
    google.maps.event.trigger(map, "resize"); 
 
    map.setCenter(center); 
 
    }); 
 

 
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
 
    this.setZoom(14); 
 
    google.maps.event.removeListener(boundsListener); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMainMap); 
 

 
// Multiple Markers 
 
var markers = [ 
 
    ['Test, Test', 33.890396, 35.506160], 
 
    ['Test, Test', 33.880007, 35.514207], 
 
    ['Test, Test', 33.880007, 35.518207], 
 
    ['Berytech Al Mathaf, Beirut', 33.880307, 35.514507], 
 
    ['Berytech Al Mathaf, Beirut', 33.880407, 35.516607] 
 
]; 
 

 
// Info Window Content 
 
var infoWindowContent = [ 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 0</h3>' + 
 
    '<p>Test</p>' + '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 1</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 2</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 3</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 4</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ] 
 
]; 
 

 
// Display multiple markers on a map

html, 
 
body, 
 
#main-map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
 

 
<div id="main-map"></div>