API de Google Maps JS v3: ejemplo simple de marcador múltiple

Bastante nuevo en la API de Google Maps. Tengo una serie de datos que quiero recorrer y trazar en un mapa. Parece bastante simple, pero todos los tutoriales de marcadores múltiples que he encontrado son bastante complejos.

Usemos la matriz de datos del sitio de Google como ejemplo:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Simplemente quiero trazar todos estos puntos y tener una ventana de información emergente cuando se hace clic para mostrar el nombre.

preguntado el 17 de junio de 10 a las 02:06

La mejor y adecuada respuesta para la época: stackoverflow.com/a/62959989/8119511 -

15 Respuestas

Esto es lo más simple que pude reducir a:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

👨‍💻 Editar / bifurcar en un Codepen →

CAPTURA DE PANTALLA

Marcadores múltiples de Google Maps

Hay algo de magia de cierre al pasar el argumento de devolución de llamada al addListener método. Este puede ser un tema bastante complicado si no está familiarizado con el funcionamiento de los cierres. Sugeriría consultar el siguiente artículo de Mozilla para obtener una breve introducción si es el caso:

Centro de desarrollo de Mozilla: Trabajar con cierres

Respondido 28 Jul 19, 18:07

@RaphaelDDL: Sí, esos paréntesis son necesarios para invocar la función sin nombre. Los argumentos deben pasarse debido a la forma en que funciona JavaScript (debido a cierres). Vea mi respuesta a esta pregunta para ver un ejemplo y más información: stackoverflow.com/a/2670420/222908 - daniel vasallo

Buena respuesta, pero podría simplificarse aún más. Dado que todos los marcadores tendrán InfoWindows individuales y dado que a JavaScript no le importa si agrega propiedades adicionales a un objeto, todo lo que necesita hacer es agregar una InfoWindow a las propiedades del marcador y luego llame al .open() en la ventana de información de sí mismo. Habría publicado el cambio aquí, pero las modificaciones fueron lo suficientemente grandes como para Publiqué mi propia respuesta. - Mateo Cordaro

Por qué no usar new MarkerClusterer() para un busto masivo de rendimiento Echa un vistazo a la respuesta de ChirsSwires. - DevWL

hola @ Daniel Vassallo, yo también tengo el mismo requisito de mostrar múltiples marcadores en mi proyecto angular iónico. por favor ayúdenme, ya hice una pregunta sobre stackoverflow. aquí está el enlace de la pregunta: stackoverflow.com/questions/57985967/… - Shaik

Funciona. Gracias. ¿Cómo eliminará los marcadores del mapa de Google porque está utilizando una sola instancia de marcador y se inicializa en bucle? Por favor comparta sus pensamientos. - kamlesh

Aquí hay otro ejemplo de varios marcadores que se cargan con un único title y infoWindow texto. Probado con la última API de Google Maps V3.11.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

Captura de pantalla de 250 marcadores:

API de Google Maps V3.11 con varios marcadores

Automáticamente aleatorizará Lat / Lng para que sea único. Este ejemplo será muy útil si desea probar los marcadores 500, 1000, xxx y el rendimiento.

Respondido el 25 de Septiembre de 17 a las 22:09

Tenga cuidado al publicar copiar y pegar respuestas repetitivas / textuales a varias preguntas, ya que la comunidad tiende a marcarlas como "spam". Si está haciendo esto, generalmente significa que las preguntas están duplicadas, así que márquelas como tales. - Kev

Esto hará que aparezcan muchas ventanas emergentes. infoWindow para cada marcador y no esconderá el otro infoWindow si se muestra actualmente. es realmente útil :) - Kánnika

@Anup, si solo lees la pregunta y la comentas, sería mejor. la pregunta es "ejemplo para marcador múltiple" si es aleatorio o tu propio bla bla. - madan sapkota

De nuevo, ¿por qué no usar new MarkerClusterer() para un busto masivo de rendimiento Echa un vistazo a la respuesta de ChirsSwires. - DevWL

@DevWL, fue respondido en 2013. Puede actualizar. - madan sapkota

Pensé que pondría esto aquí, ya que parece ser un punto de aterrizaje popular para aquellos que comienzan a usar la API de Google Maps. Múltiples marcadores renderizados en el lado del cliente es probablemente la caída de muchas aplicaciones de mapeo en cuanto al rendimiento. Es difícil comparar, corregir y, en algunos casos, incluso establecer que existe un problema (debido a las diferencias de implementación del navegador, el hardware disponible para el cliente, 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 marcadores individuales debajo.

Quizás el más simple de implementar es el marcador Biblioteca. Una implementación básica sería la siguiente (después de las importaciones de bibliotecas):

<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 luego se pasa a la biblioteca que maneja cálculos complejos por usted y se adjunta al mapa.

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

Otras implementaciones están disponibles en Google.

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

Respondido 04 Feb 14, 15:02

¡Gracias, una gran ayuda! Hay una diferencia de orden o magnitud en el rendimiento, al hacer que los puntos de datos de google.map primero y luego pasarlos a la biblioteca de mapas, en este caso MarketCluster para trazar. con aproximadamente 150,000 puntos de datos, la primera publicación de 'Daniel Vassallo' tardó aproximadamente 2 minutos en cargarse, estos 5 segundos. ¡Muchas gracias 'Swires'! - Waqas

Pensé que este sería un buen lugar para esto, me imagino que la mayoría de las personas aterrizan primero en la pila cuando se relacionan con los mapas de Google en esta página, y en segundo lugar está '¿por qué mi mapa tarda tanto en cargar? - ChrisSwires

@Monic es cualquiera que sea su conjunto de datos, es solo una variable de marcador de posición. - ChrisSwires

Versión asincrónica:

<script type="text/javascript">
  function initialize() {
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>

Respondido el 06 de junio de 14 a las 13:06

Esta es la imagen del mapa de ejemplo de trabajo

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
} 

Ejemplo de trabajo completo. Puede simplemente copiar, pegar y usar.

Respondido el 25 de Septiembre de 17 a las 21:09

Desde Ejemplos de API de mapas de Google:

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

Respondido el 17 de junio de 10 a las 06:06

esta respuesta no incluye la parte infoWindow - onurmatik

@omat Curiosamente, los propios documentos de Google no sugieren que tenga que haber una parte de infoWindow. Pero, no obstante, tampoco me funciona :( - Emil Ahlbäck

Aquí hay otra versión que escribí para guardar el mapa de bienes raíces, que coloca el puntero de la ventana de información en el lat y long actual del marcador, mientras oculta temporalmente el marcador mientras se muestra la ventana de información.

También elimina la asignación estándar de 'marcador' y acelera el procesamiento al asignar directamente el nuevo marcador a la matriz de marcadores en la creación de marcadores. Sin embargo, tenga en cuenta que se han agregado propiedades adicionales tanto al marcador como a la ventana de información, por lo que este enfoque es un poco poco convencional ... ¡pero ese soy yo!

En estas preguntas de la ventana de información nunca se menciona que la ventana de información estándar NO ES colocados en la latitud y la longitud del punto del marcador, sino en la parte superior de la imagen del marcador. La visibilidad del marcador debe estar oculta para que esto funcione; de ​​lo contrario, la API de Google Maps volverá a colocar el ancla de la ventana de información en la parte superior de la imagen del marcador.

Las referencias a los marcadores en la matriz de 'marcadores' se crean inmediatamente después de la declaración del marcador para cualquier tarea de procesamiento adicional que pueda desearse más adelante (ocultar / mostrar, tomar las coordenadas, etc.). Esto ahorra el paso adicional de asignar el objeto marcador a 'marcador', y luego empujar el 'marcador' a la matriz de marcadores ... mucho procesamiento innecesario en mi libro.

De todos modos, una visión diferente de las ventanas de información, y espero que te ayude a informarte e inspirarte.

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

google.maps.event.addDomListener(window, 'load', init);

Aquí hay una trabajo JSFiddle

Nota adicional
Notará que en estos datos de ejemplo de Google dados un cuarto lugar en la matriz de 'ubicaciones' con un número. Dado esto en el ejemplo, también podría usar este valor para la identificación del marcador en lugar del valor del bucle actual, de modo que ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

Respondido 26 Feb 15, 03:02

Respuesta aceptada, reescrita en ES6:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

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

Respondido 03 Abr '18, 15:04

Source Enlace

Demo Enlace

Código HTML completo

  • Mostrar ventana de información al hacer clic o pasar el mouse.
  • Solo se mostrará una ventana de información

enter image description here

    <!DOCTYPE html>
    <html>

    <head>
        <style>
            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
            #map {
                height: 400px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
        <script>
            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    /* detach the info-window from the marker ... undocumented in the API docs */
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
        </script>
    </head>

    <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    </body>

    </html>

Respondido 19 Feb 19, 09:02

Gracias por closeOtherInfo, No pude encontrar una solución decente para trabajar con merkercluster hasta su respuesta. :) - chris loughnane

Eso es lo que estaba buscando. Gracias hombre, funciona muy bien en 2020 - Faizan Anwer Ali Rupani

Agregar un marcador en su programa es muy fácil. Solo puede agregar este código:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

Los siguientes campos son particularmente importantes y comúnmente se establecen cuando construye un marcador:

  • position (obligatorio) especifica un LatLng que identifica la ubicación inicial del marcador. Una forma de recuperar un LatLng es mediante el Servicio de codificación geográfica.
  • map (opcional) especifica el mapa en el que colocar el marcador. Si no especifica un mapa en la construcción del marcador, el marcador se crea pero no se adjunta (ni se muestra) en el mapa. Puede agregar el marcador más tarde llamando al marcador setMap() método.

Nota:, en el ejemplo, el campo de título establece el título del marcador que aparecerá como información sobre herramientas.

Puede consultar la documentación de la API de Google aquí.


Este es un ejemplo completo para establecer uno marcador en un mapa. Ten cuidado, tienes que reemplazar YOUR_API_KEY por su clave API de Google:

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Simple markers</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
 <div id="map"></div>
<script>

  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>


Ahora, si desea trazar marcadores de una matriz en un mapa, debe hacer lo siguiente:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function initMap() {
  var myLatLng = {lat: -33.90, lng: 151.16};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
    });

  var count;

  for (count = 0; count < locations.length; count++) {  
    new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
   }
}

Este ejemplo me da el siguiente resultado:

enter image description here


También puede agregar una ventana de información en su pin. Solo necesitas este código:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
    map: map
    });

marker.info = new google.maps.InfoWindow({
    content: 'Hello World!'
    });

Puedes tener la documentación de Google sobre infoWindows aquí.


Ahora, podemos abrir la ventana de información cuando el marcador es "clik" así:

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[count][1], locations[count][2]),
     map: map
     });

marker.info = new google.maps.InfoWindow({
     content: locations [count][0]
     });


google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
            });

Nota:, puede tener documentación sobre Listener aquí en desarrollador de google.


Y, finalmente, podemos trazar una ventana de información en un marcador si el usuario hace clic en ella. Este es mi código completo:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

        var count=0;


        for (count = 0; count < locations.length; count++) {  

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {  
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

Normalmente, debería tener este resultado:

Tu resultado

Respondido el 08 de junio de 18 a las 20:06

Siguiendo de La respuesta de Daniel Vassallo, aquí hay una versión que trata el tema del cierre de una manera más simple.

Dado que todos los marcadores tendrán un individuo Ventana de información y dado que a JavaScript no le importa si agrega propiedades adicionales a un objeto, todo lo que necesita hacer es agregar un Ventana de información de las personas acusadas injustamente llamadas Del marcador propiedades y luego llamar al .open() al Ventana de información ¡de si mismo!

Edit: Con suficientes datos, la carga de la página podría llevar mucho tiempo, por lo que en lugar de construir el Ventana de información con el marcador, la construcción debe realizarse solo cuando sea necesario. Tenga en cuenta que cualquier dato utilizado para construir el Ventana de información debe adjuntarse al Marcador como una propiedaddata). También tenga en cuenta que después del evento del primer clic, infoWindow persistirá como una propiedad de su marcador, por lo que el navegador no necesita reconstruirse constantemente.

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

contestado el 23 de mayo de 17 a las 13:05

Aquí hay un ejemplo de función de javascript casi completo que permitirá múltiples marcadores definidos en un JSONObject.

Solo mostrará los marcadores que están dentro de los límites del mapa.

Esto es importante para que no esté haciendo trabajo adicional.

También puede establecer un límite a los marcadores para que no muestre una cantidad extrema de marcadores (si existe la posibilidad de algo en su uso);

tampoco mostrará marcadores si el centro del mapa no ha cambiado más de 500 metros.
Esto es importante porque si un usuario hace clic en el marcador y accidentalmente arrastra el mapa mientras lo hace, no querrá que el mapa vuelva a cargar los marcadores.

Adjunté esta función al detector de eventos inactivo del mapa para que los marcadores se muestren solo cuando el mapa esté inactivo y volverán a mostrar los marcadores después de un evento diferente.

En la captura de pantalla de acción, hay un pequeño cambio en la captura de pantalla que muestra más contenido en la ventana de información. enter image description here pegado de pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

Respondido el 04 de Septiembre de 16 a las 17:09

  • Sé que esta respuesta llega muy tarde. Pero deseo que esto también ayude a otros desarrolladores. :-)
  • El siguiente código agregará múltiples marcadores en el mapa de Google con la ventana de información.
  • Y este código se puede utilizar para trazar cualquier número de marcadores en el mapa.
  • Coloque su clave de API de Google Map en la posición correcta de este código. (Lo he marcado como "Tu clave de API")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Google Map</title>
    <style>
        #map{
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>

<h1>My Google Map`</h1>
<div id="map"></div>


    <script>
        function initMap(){
          //Map options
            var options = {
                zoom:9,
                center:{lat:42.3601, lng:-71.0589}
            }
            // new map
            var map = new google.maps.Map(document.getElementById('map'), options);
            // customer marker
            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
            //array of Marrkeers
            var markers = [
              {
                coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
              },
              {
                coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
              },
              {
                coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
              }
            ];

            //loopthrough markers
            for(var i = 0; i <markers.length; i++){
              //add markeers
              addMarker(markers[i]);
            }

            //function for the plotting markers on the map
            function addMarker (props){
              var marker = new google.maps.Marker({
                position: props.coords,
                map:map,
                icon:props.img
              });
              var infoWindow = new google.maps.InfoWindow({
                content:props.con,
              });
              marker.addListener("click", () => {
                infoWindow.open(map, marker);
              });
            }
        }
    </script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=**YourAPIKey**&callback=initMap"
      defer
    ></script>

</body>
</html>

Respondido el 19 de diciembre de 20 a las 20:12

Aquí hay un ejemplo de múltiples marcadores en Reactjs.

enter image description here

A continuación se muestra el componente del mapa

import React from 'react';
import PropTypes from 'prop-types';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

const MapContainer = (props) => {
  const [mapConfigurations, setMapConfigurations] = useState({
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  });

  var points = [
    { lat: 42.02, lng: -77.01 },
    { lat: 42.03, lng: -77.02 },
    { lat: 41.03, lng: -77.04 },
    { lat: 42.05, lng: -77.02 }
  ]
  const onMarkerClick = (newProps, marker) => {};

  if (!props.google) {
    return <div>Loading...</div>;
  }

  return (
    <div className="custom-map-container">
      <Map
        style={{
          minWidth: '200px',
          minHeight: '140px',
          width: '100%',
          height: '100%',
          position: 'relative'
        }}
        initialCenter={{
          lat: 42.39,
          lng: -72.52
        }}
        google={props.google}
        zoom={16}
      >
        {points.map(coordinates => (
          <Marker
            position={{ lat: coordinates.lat, lng: coordinates.lng }}
            onClick={onMarkerClick}
            icon={{
              url: 'https://res.cloudinary.com/mybukka/image/upload/c_scale,r_50,w_30,h_30/v1580550858/yaiwq492u1lwuy2lb9ua.png',
            anchor: new google.maps.Point(32, 32), // eslint-disable-line
            scaledSize: new google.maps.Size(30, 30)  // eslint-disable-line
            }}
            name={name}
          />))}
        <InfoWindow
          marker={mapConfigurations.activeMarker}
          visible={mapConfigurations.showingInfoWindow}
        >
          <div>
            <h1>{mapConfigurations.selectedPlace.name}</h1>
          </div>
        </InfoWindow>
      </Map>
    </div>
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.GOOGLE_API_KEY,
  v: '3'
})(MapContainer);

MapContainer.propTypes = {
  google: PropTypes.shape({}).isRequired,
};

Respondido 03 Feb 20, 02:02

El último más simple después de la modificación en los marcadores de mapa actuales y el algoritmo de agrupamiento:

Modificación en: https://developers.google.com/maps/documentation/javascript/marker-clustering[![enter descripción de la imagen aquí]1]1

<!DOCTYPE Html>
<html>

<head>
<meta Content-Security-Policy="default-src  'self'; script-src 'self' 'unsafe-eval' https://*/;">
<link type="text/css" href="http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png">
<link rel="icon" href="data:,">
<title>App</title>
</head>
<style type="text/css">
   #map {
    height: 500
}
</style>

<body>
<div id='map' style="width:100%; height:400px"></div>
<script type='text/javascript'>
    function initMap() {
        maps = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(12.9824855, 77.637094),
            zoom: 5,
            disableDefaultUI: false,
            mapTypeId: google.maps.MapTypeId.HYBRID
        });
        var labels='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
        marker = locations.map(function (location, i) {
            return new google.maps.Marker({
                position: new google.maps.LatLng(location.lat, location.lng),
                map: maps,
                title: "Map",
                label: labels[i % labels.length],
                icon: markerImage
            });
        });

        var markerCluster = new MarkerClusterer(maps, marker, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });
    }
    var locations = [
            { lat: 12.9824855, lng: 77.637094},
            { lat: 11.9824855, lng: 77.154312 },
            { lat: 12.8824855, lng: 77.637094},
            { lat: 10.8824855, lng: 77.054312 },
            { lat: 12.9824855, lng: 77.637094},
            { lat: 11.9824855, lng: 77.154312 },
            { lat: 12.8824855, lng: 77.637094},
            { lat: 13.8824855, lng: 77.054312 },
            { lat: 14.9824855, lng: 54.637094},
            { lat: 15.9824855, lng: 54.154312 },
            { lat: 16.8824855, lng: 53.637094},
            { lat: 17.8824855, lng: 52.054312 },
            { lat: 18.9824855, lng: 51.637094},
            { lat: 19.9824855, lng: 69.154312 },
            { lat: 20.8824855, lng: 68.637094},
            { lat: 21.8824855, lng: 67.054312 },
            { lat: 12.9824855, lng: 76.637094},
            { lat: 11.9824855, lng: 75.154312 },
            { lat: 12.8824855, lng: 74.637094},
            { lat: 10.8824855, lng: 74.054312 },
            { lat: 12.9824855, lng: 73.637094},
            { lat: 3.9824855, lng: 72.154312 },
            { lat: 2.8824855, lng: 71.637094},
            { lat: 1.8824855, lng: 70.054312 }
        ];

</script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js">
</script>
<script src="https:maps.googleapis.com/maps/api/js?key=AIzaSyDWu6_Io9xA1oerfOxE77YAv31etN4u3Dw&callback=initMap">
</script>
<script type='text/javascript'></script>

Respondido 17 Jul 20, 19:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.