es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Agregando múltiples marcadores en Vue JS Google Maps

Tengo Google Maps integrado en el código de Vue JS. Pero quiero mostrar múltiples marcadores utilizando la latitud y longitud en ese mapa. ¿Alguna idea de cómo hacerlo?
Aquí está mi código.

“` Maps.vue

<template>
<card type="plain" title="Google Maps">
<div id="map" class="map">
</div>
</card>
</template>
<script>
export default {
mounted() {
let myLatlng = new window.google.maps.LatLng(40.748817, -73.985428);
let mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false, //deshabilitamos el scroll sobre el mapa, que resulta bastante molesto cuando se desplaza por la página
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#1d2c4d"
}]
},
{
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8ec3b9"
}]
},
{
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#1a3646"
}]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#4e6d70"
}]
}
]
};
let map = new window.google.maps.Map(
document.getElementById("map"),
mapOptions
);“`

“`let marker = new window.google.maps.Marker({
position: myLatlng,
title: “¡Hola mundo!”
});

marker.setMap(map);


};
};

Cómo puedo mostrar múltiples marcadores en este mapa de google? Cualquier consejo o sugerencia sería realmente útil. Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Puede utilizar el constructor google.maps.Marker para agregar múltiples marcadores al mapa. Puede recorrer un arreglo de valores de latitud y longitud y crear un marcador para cada uno.

    Por ejemplo:

    let locations = [
      [40.748817, -73.985428],
      [41.748817, -74.985428],
      [42.748817, -75.985428]
    ];
    
    locations.forEach(function(location) {
      let marker = new window.google.maps.Marker({
        position: {lat: location[0], lng: location[1]},
        map: map
      });
    });
    

Comments are closed.