crear InfoWindow para marcadores agrupados usando Google Maps v3

Estoy desarrollando un mapa que agrupará pines para evitar que el pin esté lleno de gente, pero quería crear una ventana de información que enumerará todos los marcadores cuando hago clic en el marcador, intenté obtener algo de ayuda y descubrir que puedo hacerlo usando marker.getTitle() pero esto no me ayuda porque estoy usando el objeto makrewithLable y no uso el título, mi pregunta es por qué agregar título al marcador o como prefiero para usar la etiqueta en su lugar para listarlos en la ventana de información. aquí hay una copia de mi trabajo.crear InfoWindow para marcadores agrupados usando Google Maps v3

google.setOnLoadCallback(initialize); 
var globalMarker = []; 
var map; 

    function initialize() { 
    var center = new google.maps.LatLng(45.4214, -75.6919); 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     disableDoubleClickZoom: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 
    var infowindow = new google.maps.InfoWindow(); 
    for(i=0; i<50; i++) { 
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5); 
    //var latLng = new google.maps.LatLng(45.4214, -75.6919) 
    markers[i] = new MarkerWithLabel({ 
     position: latLng, 
     draggable: true, 
     raiseOnDrag: true, 
     map: map, 
     labelContent: "Marker ID = "+i, 
     labelAnchor: new google.maps.Point(30, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 0.75} 
    }); 
     markers.push(markers); 
    makeDiv(i, 15, "Marker #"); 
    google.maps.event.addListener(markers[i], 'click', function(e) { 
    infowindow.setContent('Marker postion: ' + this.getPosition()); 
    infowindow.open(map, this);}); 
    } 
    var clusterOptions = { zoomOnClick: false } 
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions); 
    globalMarker = markers.slice(); 
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
var content = ''; 

// Convert lat/long from cluster object to a usable MVCObject 
var info = new google.maps.MVCObject; 
info.set('position', cluster.center_); 

//---- 
//Get markers 
var markers = cluster.getMarkers(); 

var titles = ""; 
//Get all the titles 
for(var i = 0; i < markers.length; i++) { 
    titles += markers[i].getTitle() + "\n"; 
} 
//---- 


infowindow.close(); 
infowindow.setContent(titles); //set infowindow content to titles 
infowindow.open(map, info); 
}); 
    } 

    function makeDiv(index, zoomLevel, content) { 
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>'; 
    } 

    function zoomIn(index, zoomLevel) { 
    map.setCenter(globalMarker[index].getPosition()); 
    map.setZoom(zoomLevel); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);

Gracias

Fuente

2012-05-09 jprbest

¿Qué quiere decir 'añadir un title'? ¿Quiere decir que la etiqueta de color rojo de su marcador no está allí? Probé tu código y está bien. ¿Recibió errores en la Consola JS? También hay una opción de 'título' que es una información emergente emergente, tal vez eso es lo que quieres? –

no existe la etiqueta de color rojo pero quiero agregar un título como var marcador = nuevo google.maps.Marker ({ posición: myLatlng, título: "¡Hola, mundo!" }); porque quiero poder leer todos los marcadores bajo un clúster para agregarlos a una ventana de información como: var titles = ""; // Obtenga todos los títulos para (var i = 0; i jprbest

La parte difícil definirá qué es un clúster. ¿Quiere decir también que todos los marcadores en un clúster definido abren la misma ventana de información? –

El cambio clave fue titles += markers[i].labelContent + "\n";. (Puede usar la notación de puntos o markers[i]["labelContent"] para referirse a cualquier propiedad que configure). También cambié la pieza markers.push(markers), y cuando se cambia el zoom, la ventana desaparece (porque es probable que cambie el número del clúster) ¡Todo lo demás se veía genial!

http://jsfiddle.net/ErYub/

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body, #map { margin: 0; padding: 0; height: 100% } 

.labels { 
    color: red; 
    background-color: white; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 90px;  
    border: 2px solid black; 
    white-space: nowrap; 
    } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
    <script type="text/javascript"> 

var globalMarker = []; 
var map; 

    function initialize() { 
    var center = new google.maps.LatLng(45.4214, -75.6919); 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     disableDoubleClickZoom: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 


    var infowindow = new google.maps.InfoWindow(); 
    for(i=0; i<50; i++) { 
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5); 
    //var latLng = new google.maps.LatLng(45.4214, -75.6919) 
    marker = new MarkerWithLabel({ 
     position: latLng, 
     draggable: true, 
     raiseOnDrag: true, 
     map: map, 
     labelContent: "Marker ID = "+i, 
     labelAnchor: new google.maps.Point(30, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 0.75} 
    }); 
     markers.push(marker); 

    makeDiv(i, 15, "Marker #"); 
    google.maps.event.addListener(markers[i], 'click', function(e) { 
    infowindow.setContent('Marker postion: ' + this.getPosition()); 
    infowindow.open(map, this);}); 
    } 
    var clusterOptions = { zoomOnClick: false } 
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions); 
    globalMarker = markers.slice(); 
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
var content = ''; 

// Convert lat/long from cluster object to a usable MVCObject 
var info = new google.maps.MVCObject; 
info.set('position', cluster.center_); 

//---- 
//Get markers 
var markers = cluster.getMarkers(); 

var titles = ""; 
//Get all the titles 
for(var i = 0; i < markers.length; i++) { 
    titles += markers[i].labelContent + "\n"; 
} 
//---- 


infowindow.close(); 
infowindow.setContent(titles); //set infowindow content to titles 
infowindow.open(map, info); 

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

}); 
    } 

    function makeDiv(index, zoomLevel, content) { 
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>'; 
    } 

    function zoomIn(index, zoomLevel) { 
    map.setCenter(globalMarker[index].getPosition()); 
    map.setZoom(zoomLevel); 
    } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <div id="sidebar"></div> 
    </body> 
</html>

Fuente

2012-05-09 18:31:59

Gracias – jprbest

@Heitor Chang, ¿Puedo agregar un enlace en LabelContent? Si es así, ¿cómo? – Emu

crear InfoWindow para marcadores agrupados usando Google Maps v3

Respuesta

Cuestiones relacionadas