add multiple gmap marker - google-maps

Question

i have a vue2-google-map apps that display map.
before this i using this code
<GmapMarker
ref="myMarker"
:position="google && new google.maps.LatLng(1.38, 103.8)"
/>
<GmapMarker
ref="myMarker"
:position="google && new google.maps.LatLng(3.1488976, 101.6126774)"
/>
to display multiple marker, but if the latlng data is too many, it will be many need to be create.
my idea is to take data from
const latlng = [
{
lat: value,
lng: value,
},
{
lat: value,
lng: value,
},
and apply {{latlng}} into <GmapMarker :position="google && new google.maps.LatLn({{latlng.lng}},{{latlng.lat}})">
but i have problem to apply that {{latlng}} into the marker.
can someone explain how to apply them?

Answer 1

For generating multiple markers your need to push latitude and longitude in the marker collection and then iterate the marker.i have updated code as per the requirement.
<template>
<div>
<GmapMap
ref="gmap"
:center="getCenter()"
:zoom="11"
style="height: 500px;margin: 0px -8px;"
class="no-padding"
:options="getOptions()"
>
<GmapMarker
:key="index"
v-for="(m, index) in getMarkers()"
:position="m.position"
:clickable="true"
:draggable="false"
:title="m.title"
:icon="m.icon"
#click="clicked()"
/>
</GmapMap>
</div>
</template>
<script>
import MarkerClusterer from "marker-clusterer-plus";
export default {
name: "SiteMap",
props: [],
methods: {
getOptions() {
return {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
disableDefaultUi: false
};
},
clicked() {
// after click
},
getCenter() {
return {
lat: 37.12523,
lng: -122.1252
};
},
getMarkers() {
// generating markers for site map
var markers = [];
// remove this after lat long received from api.
const tempLatLong = [
{ lat: 37.9068361, lng: -122.116971 },
{ lat: 37.9168362, lng: -122.076972 },
{ lat: 37.9268363, lng: -122.136973 },
{ lat: 37.9368364, lng: -122.146974 },
{ lat: 37.9468365, lng: -122.106975 },
{ lat: 37.9568366, lng: -122.166976 },
{ lat: 37.9668367, lng: -122.176977 },
{ lat: 37.9768368, lng: -122.016978 },
{ lat: 37.9868369, lng: -122.196979 }
];
for(let i=0;i<tempLatLong.length;i++){
markers.push({
position: tempLatLong[i],
title: 'test title',
icon: this.getSiteIcon(1) // if you want to show different as per the condition.
});
}
return markers;
},
getSiteIcon(status) {
try {
switch (status) {
case 1:
return require("#/assets/images/icons/map-marker-online.svg");
break;
case 2:
return require("#/assets/images/icons/map-marker-critical.svg");
break;
case 3:
return require("#/assets/images/icons/map-marker-offline.svg");
break;
case 4:
return require("#/assets/images/icons/map-marker-lifesafety.svg");
break;
default:
return require("#/assets/images/icons/map-marker-online.svg");
}
} catch (e) {
return null;
}
},
},
components: {},
created() {},
mounted() {
}
};
</script>
<style scoped></style>