I am currently utilizing the Google Maps API within a Vue.js project. In my project, I have a table of data that includes positions, and I am looking to update the marker positions dynamically without refreshing the entire card. Below is the code snippet that I am working with, and I am seeking guidance on how to implement the functionality of changing marker positions within my component:
this.initializeMap(
this.$refs.googleMaps as HTMLElement,
this.points
)
}
}
initializeMarker(map: google.maps.Map, pointList: points[]) {
const bounds = new google.maps.LatLngBounds()
pointList.forEach(
(pointElement: pointElement, index: number) => {
const marker = new google.maps.Marker({
position: {
lat: pointElement.geoPoint?.latitude as number,
lng: pointElement.geoPoint?.longitude as number
},
icon: { url: 'url' },
map
})
const position = new google.maps.LatLng(
pointElement.geoPoint?.latitude,
pointElement.geoPoint?.longitude
)
marker.addListener('click', () => {
map.panTo(position)
})
bounds.extend(position)
}
)
map.fitBounds(bounds)
}
initializeMap(mapElement: HTMLElement, pointList: points[]) {
const gestureOption: GoogleMapsGestureHandlingOptions = 'cooperative'
const mapProperties: google.maps.MapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: gestureOption,
disableDefaultUI: true,
clickableIcons: false,
minZoom: 20
}
this.googleMaps = new google.maps.Map(mapElement, mapProperties)
this.initializeMarker(this.googleMaps, pointList)
}
mounted() {
this.renderMap(
() =>
this.initializeMap(
this.$refs.googleMaps as HTMLElement,
this.pointList
)
)
}