google-maps añadir - Google Map API V3:cómo agregar datos personalizados a los marcadores




google.maps.marker markers (3)

Puede agregar sus propias propiedades personalizadas a los marcadores (solo tenga cuidado de no entrar en conflicto con las propiedades de la API).

¿Existe alguna manera de agregar información personalizada a mis marcadores para su uso posterior? Hay formas de tener una ventana de información y un título, pero qué sucede si quiero asociar el marcador con otra información.

Tengo otras cosas que se muestran en la página que dependen de los marcadores, así que cuando se hace clic en un marcador, el contenido de la página debe cambiar según el marcador al que se hizo clic. Me gustaría almacenar y recuperar los datos personalizados una vez que un marcador es digamos clickeado, etc.

Gracias


Como Google Marker es un objeto de JavaScript, puede agregar información personalizada en la key: value formulario key: value , donde key es una cadena válida. Se llaman propiedades de objeto y se pueden abordar de muchas formas diferentes. El valor puede ser cualquier cosa legal, tan simple como números o cadenas, y también funciones, o incluso otros objetos. Tres formas simples: en la declaración, notación de puntos y corchetes

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Luego para recuperarlo de una manera similar:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

Pensé que pondría esto aquí ya que parece ser un punto de aterrizaje popular para aquellos que comienzan a usar el API de Google Maps. Múltiples marcadores representados en el lado del cliente es probablemente la caída de muchas aplicaciones de mapeo en cuanto al rendimiento. Es difícil establecer puntos de referencia, arreglarlos y, en algunos casos, incluso establecer que existe un problema (debido a las diferencias en la implementación del navegador, al hardware disponible para el cliente, a los dispositivos móviles, la lista continúa).

La forma más sencilla de comenzar a abordar este problema es utilizar una solución de agrupación de marcadores. La idea básica es agrupar ubicaciones geográficamente similares en un grupo con la cantidad de puntos mostrados. A medida que el usuario se acerca al mapa, estos grupos se expanden para revelar los marcadores individuales debajo.

Quizás la más sencilla de implementar es la biblioteca de markerclusterer . Una implementación básica sería la siguiente (después de las importaciones de la biblioteca):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

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

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Los marcadores en lugar de agregarse directamente al mapa se agregan a una matriz. Esta matriz se pasa luego a la biblioteca que maneja los cálculos complejos y se adjunta al mapa.

Estas implementaciones no solo aumentan masivamente el rendimiento del lado del cliente, sino que también en muchos casos llevan a una IU más simple y menos abarrotada y a una digestión más fácil de los datos en escalas más grandes.

Otras implementaciones están disponibles en Google.

Espero que esto ayude a algunos de los más nuevos a los matices del mapeo.





google-maps google-maps-api-3 google-maps-markers