How to position selected location pin in the center of google map [closed] - google-maps

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
Improve this question
Each location should be at the center of the map when selected from a dropdown of locations. The following code is what I used to implement what I currently have.
For more context, this map was built in webflow ( a low code platform) and I get each location from a collection (cms) list I created. I've called collection: "location" and each location contains a latitude and longitude (that's how the markers are plotted on the map)
How do I center each selected location? What code do I add and where should I add it in my existing code?
<script>
var MAPS = {
zoom: 7,
map: '',
markers: {},
infoWindow: null,
init: function (defaultCoordinates = {}) {
MAPS.create(defaultCoordinates);
MAPS.plotMarkers()
},
create: function (defaultCoordinates = {}) {
var mapDom = document.getElementById('map');
if (!defaultCoordinates['lat']) {
defaultCoordinates.lat = 55.03222;
defaultCoordinates.lng = -2.62529;
}
MAPS.map = new google.maps.Map(mapDom, {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
mapTypeControl: true,
fullscreenControl: true,
scrollwheel: true,
zoom: MAPS.zoom,
center: defaultCoordinates,
plotMarkers: function () {
var locations = MAPS.locations();
gmarkers = {};
for (var i = 0; i < locations.length; i++) {
gmarkers[locations[i][0]] = MAPS.createMarkers(new google.maps.LatLng(locations[i][2], locations[i][3]), // passing lat and long
locations[i][1]); // passing Info-window information
}
MAPS.markers = gmarkers;
},
initAutoComplete: function () {
var input = document.getElementById('search')
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', () => {
const place = autocomplete.getPlace();
if (place.geometry) {
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
MAPS.init({
lat: lat,
lng: lng
});
var marker = new google.maps.Marker({
position: place.geometry.location,
map: MAPS.map,
});
}
});
},
openMarkerOnClick: function () {
var viewInMap = document.querySelectorAll('[data-marker-open]').addEventListener('click', function () {
console.log('clicked');
})
},
createMarkers: function (latlng, html) {
var marker = new google.maps.Marker({
position: latlng,
map: MAPS.map,
icon: 'https://uploads-ssl.webflow.com/63c7cbc99a05611a1bd1ae5a/63ce964d18ff37a39c305bcd_image%2011.png'
});
// Define info window for each marker
google.maps.event.addListener(marker, 'click', function () {
if (MAPS.infoWindow) {
MAPS.infoWindow.close();
}
console.log(MAPS.infoWindow)
MAPS.infoWindow = new google.maps.InfoWindow();
MAPS.infoWindow.setContent(html);
MAPS.infoWindow.open(MAPS.map, marker);
});
return marker;
},
locations: function () {
// Create a locations array
var locations = []
// Add .location-wrapper class to the location Collection Item
var dynPlaces = document.querySelectorAll('.w-dyn-item.location-item');
// Define variables for the map info window
dynPlaces.forEach(function (elem) {
// Create places array
var place = [];
// Define variables for each place
var dataTitle = elem.querySelector('.data---slug').innerText; // Define slug for targeting the information window
var dataLat = Number(elem.querySelector('.data---latitude').innerText); // Define latitude point for pin
var dataLong = Number(elem.querySelector('.data---longitude').innerText); // Define longitude point for pin
var infoWindowContent = elem.querySelector('.data---info-window').innerHTML; // Define content wrapper for the information window
place.push(dataTitle, infoWindowContent, dataLat, dataLong); // Add variables to each place
locations.push(place); // Add each place to the locations array
});
return locations;
},
build: function (defaultCoordinates = {}) {
MAPS.init(defaultCoordinates);
// MAPS.openMarkerOnClick();
}
}
function initMap() {
MAPS.build();
}
window.onload = (event) => {
MAPS.build();
MAPS.initAutoComplete();
};
</script>