My google maps is being initialized in mounted()
and stored in map
attribute:
mounted() {
this.initMap();
},
methods: {
async initMap() {
const loader = new Loader({
apiKey: settings.googlemaps,
version: 'weekly',
});
try {
await loader.load();
const {Map} = await google.maps.importLibrary('maps');
this.map = new Map(this.$refs.map, {
center: {lat: 37.75768866503074, lng: -96.54510528125},
zoom: 4,
minZoom: 3,
streetViewControl: false,
mapTypeControl: false,
mapId: settings.mapid,
});
} catch (error) {
console.error('Error loading Google Maps API', error);
}
},
}
The markers content comes from an external API and is passed from the parent component:
watch: {
places: {
deep: true,
handler() {
this.initMarkers();
},
},
},
The problem is the markers is not being added to the map (I’m not applying the places loop yet):
async initMarkers() {
try {
const {AdvancedMarkerElement} =
await google.maps.importLibrary('marker');
new AdvancedMarkerElement({
map: this.map,
title: 'Marker title',
position: {
lat: 38.992534,
lng: -122.745783,
},
});
} catch (error) {
console.error('Error loading marker library', error);
}
},
Looks like AdvancedMarkerElement
cannot read/access this.map
correctly.