I've been working on getting the map boundaries to work properly, using a method in conjunction with my existing initMap and askGeolocation methods.
Despite my best efforts, I can't seem to get the bounds functionality working so that the map zoom adjusts to fit the positions of the different markers.
I attempted to create a method called useBounds and tried calling it within addMarker, but unfortunately, it didn't produce the desired outcome. I also experimented with directly handling bounds in the addMarker() function, but still no luck.
It seems like I may be having trouble properly obtaining the LatLng values of the markers to use with the bounds methods.
<template>
<div class="main" ref="autreRef">
<div class="google-map" v-bind:id="mapName" ref="mainMap" @click="openComponent">
</div>
</div>
</template>
<script>
const GoogleMapsLoader = require('google-maps');
GoogleMapsLoader.KEY = 'API_KEY';
export default {
name: 'google-map',
props: ['name'],
data: function() {
return {
mapName: this.name + "-map",
userCoord: {},
markers: [],
map: null,
bounds: null,
infoWindow: null,
position: {
lat: null,
lng: null
}
}
},
mounted: function() {
GoogleMapsLoader.load((google) => {
this.$store.watch(
(state, getters) => getters.getRestaurantInfo,
(newValue, oldValue) => {
newValue.map((restaurant) => {
this.addMarker({
lat: restaurant.lat,
lng: restaurant.long
}, 'restaurant')
})
}
)
this.initMap();
this.askGeolocation();
// this.useBounds();
});
},
methods: {
initMap() {
const element = this.$refs.mainMap
const options = {
center: {lat: 48.842129, lng: 2.329375},
zoom: 18,
}
this.map = new google.maps.Map(element, options);
this.infoWindow = new google.maps.InfoWindow;
},
askGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
this.userCoord = pos
this.addMarker(this.userCoord, 'user')
this.map.setCenter(pos);
}, function() {
handleLocationError(true, this.infoWindow, this.map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, this.infoWindow, this.map.getCenter());
}
},
// useBounds() {
// this.bounds = new google.maps.LatLngBounds();
// this.bounds.extend(marker.position);
// this.map.fitBounds(this.bounds);
// },
addMarker(coord, type) {
let icon = ''
if (type === 'user') {
icon = 'https://img.icons8.com/color/48/000000/marker.png'
} else {
icon = 'https://img.icons8.com/ios/50/000000/restaurant-table.png'
}
console.log('j ajoute ', coord)
const position = new google.maps.LatLng(coord.lat, coord.lng);
const marker = new google.maps.Marker({
position,
map: this.map,
icon
});
// this.useBounds();
this.bounds = new google.maps.LatLngBounds();
this.bounds.extend(marker.position);
this.map.fitBounds(this.bounds);
this.markers.push(marker);
},
removeMarker(marker) {
marker.setMap(null)
},
openComponent() {
this.$router.push('/add-restaurant/');
}
},
computed: {
}
};
</script>
I'm looking forward to resolving the issue with the bounds and finding a way to seamlessly integrate them into the existing code using a method that is called from elsewhere. Thank you for your assistance.