Afficher plusieurs marqueurs dans Google Maps

Question

J'ai cette carte et je souhaite afficher tout un tas de marqueurs. Mais j'ai besoin de trouver un moyen de montrer cela d'une manière ordonnée, et bien ... quelque chose cool serait bien. La bonne chose est que Google Maps a beaucoup de fonctionnalités intéressantes. Mais je suis nouveau à son utilisation et probablement pas au courant des options sympas pour organiser les marqueurs et le contenu. J'ai juste trébuché sur une manière ordonnée, que je posterai ci-dessous. Mais pour connaître les solutions que d'autres ont trouvées/créées, ma question est la suivante: quelles sont les manières intéressantes de montrer un grand groupe de marqueurs?

Answer 1

Voici l'exemple très chic mais relativement facile à coder qui m'a fait publier ce message.

Google Map Slider, basé sur this implementation.

Caractéristiques: défilement automatique que vous passez la souris sur une zone extérieure avec des détails sur ce qui est sur la carte. Vous permet de poster et montrer beaucoup plus d'informations, mais toujours le relier à la carte.

Answer 2

Voici la documentation MarkerClusterer for Google Maps V3

Exemples de caisse MarkerClusterer for Google Maps V3 Sample Codes

Il peut regrouper vos marqueurs d'une manière qu'il est plus facile de voir.

Voici un exemple d'utilisation MarkerClusterer JSFiddle Demo.

var map = null; 
var markerArray = []; //create a global array to store markers 
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']]; //create global array to store points 

function initialize() { 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(43.907787, -79.359741), 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var mcOptions = { 
     gridSize: 50, 
     maxZoom: 15 
    }; 
    var mc = new MarkerClusterer(map, [], mcOptions); 

    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
    }); 

    // Add markers to the map 
    // Set up markers based on the number of elements within the myPoints array 
    for(var i=0; i<myPoints.length; i++){ 
     createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]); 
    } 

    mc.addMarkers(markerArray , true); 
} 

var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150, 50) 
}); 

function createMarker(latlng, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red10.png', 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
    }); 

    marker.setAnimation(google.maps.Animation.BOUNCE); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map, marker); 
    }); 

    markerArray.push(marker); //push local var marker into global array 
} 

window.onload = initialize; 

Capture d'écran de ce qu'il ressemble groupé: