Mostrando muchos marcadores en Google Maps

Question

Tengo este mapa y quiero mostrar un montón de marcadores. Pero necesito encontrar una forma de mostrar esto de manera ordenada, y bueno ... algo genial estaría bien. Lo bueno es que Google Maps tiene muchas características interesantes. Pero soy nuevo en su uso y probablemente no esté al tanto de las opciones interesantes para organizar marcadores y contenido. Acabo de tropezar con una forma ordenada, que publicaré a continuación.

Pero para aprender sobre las soluciones que otros han encontrado/creado, mi pregunta es: ¿cuáles son las formas geniales de mostrar un gran grupo de marcadores?

Answer 1

Aquí está la muestra muy elegante pero relativamente fácil de codificar que me hizo publicar este mensaje.

Google Map Slider, basado en this implementation.

Características: auto-desplazamiento a medida que pasa el ratón sobre un área externa con detalles acerca de lo que está en el mapa. Le permite publicar y mostrar mucha más información, pero aún así relacionarla con el mapa.

Answer 2

Aquí está la documentación para MarkerClusterer for Google Maps V3

ejemplos de pago y envío MarkerClusterer for Google Maps V3 Sample Codes

Se puede agrupar sus marcadores en una forma que es más fácil de ver.

Aquí es un ejemplo del uso 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; 

Captura de pantalla de lo que parece agrupan: