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.
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: