I successfully integrated the Google Maps JavaScript API v3 to create a personalized store locator for our company's website. While the current code is functional for two stores, it lacks scalability due to the unconventional methods used.
My implementation involves using the Google Maps Places Library to request place details from Google via the getDetails() method. Upon receiving the callback, I retrieve important information such as the store name, address, and location for each store on the map.
Each store location is marked with a marker, and I use google.maps.event.addListener to manage interactions between the Place, Marker, and InfoWindow elements. However, I am facing issues where the requests for place details sometimes arrive out of order, disrupting the functionality of buttons that correspond to markers on the map.
Is there a way to delay subsequent requests until the previous one is complete or modify the script to maintain sequential order?
The event handler below demonstrates how I bind the click listener to each button based on the marker's .place.placeId property instead of the preferred method of using the index in the markers array which contains the store details.
I have not found any clear examples in the Google Maps API (Places Library) documentation regarding handling multiple places. Any advice, resources, or suggestions would be highly appreciated.
Website:
Event Handler
$(".loc-btn").on('click', function () {
var me = $(this).data('marker');
var place1 = markers[0].place.placeId;
var myIndex = me == place1 ? 0 : 1;
google.maps.event.trigger(markers[myIndex], 'click');
});
Full JS
var markers = [];
// Rest of the JavaScript code...
HTML: Map & Buttons
<div data-role="content" class="full-width">
<figure id="map"></figure>
<div class="loc-btn-set">
// HTML button elements...
</div>
</div>