Google Maps JavaScript API v3：多个地方的getDetails（请求，回调）

Question

I have implemented Google Maps JavaScript API v3 to contrive a custom store locator for my company's website. Let me start by saying that the code I have works for the two stores, but it would not be efficient or feasible if I added any more stores because of the "hacky" code used to make it work.

I am using the Google Maps Places Library to send "place details" requests to Google using the getDetails() method. On the callback, I am receiving the InfoWindow information (name, address, location) for each of my store locations.

I create a marker for each place, then use google.maps.event.addListener to coordinate the Place, Marker, and InfoWindow objects. This is where I encounter problems. The place details requests are not always received in the same order they are sent which throws off the indexing of my buttons that have a data-marker attribute set to 0 and 1, respectively, to correlate to the map markers.

Is there anyway to delay the second request until the first is finished? or write the script in a way that maintains ordinal integrity?

The first snippet of code below is my event handler to bind the click listener to each button using the .place.placeId property of the marker rather than the preferred technique of using the index of the markers array (the markers array holds the place details for the two stores).

None of the demos or examples in the Google Maps API documentation (Places Library) delineate the procedure for multiple places. Any tips, resources, or suggestions will be much appreciated

Website: http://m.alliancepointe.com/locate.html

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 = [];
var map;
var infowindow;
var service;

function initialize() {
    var index;
    var daddr;
    var idVA = 'ChIJKezXgqmxt4kRXrAnqIwIutA';
    var geoVA = '38.80407,-77.062881/Alliance+Pointe,+LLC';

    var idDC = 'ChIJDQlqOLG3t4kRqDU3uNoy4hs';
    var geoDC = '38.90188,-77.049161/Alliance+Pointe,+LLC';

    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        center: {lat: 38.90188, lng: -77.049161},
        zoom: 10,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    };

    map = new google.maps.Map(document.getElementById('map'),
        mapOptions);

    var request = [
        {placeId: idVA, location: {lat: 38.80407, lng: -77.062881}},
        {placeId: idDC, location: {lat: 38.90188, lng: -77.049161}}
    ];

    var office = [
        "Main Office",
        "Principal Office"
    ];

    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);

    for (var i = 0; i < request.length; i++) {

        service.getDetails(request[i], function (placeResult, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                var id = placeResult.place_id;
                var location = placeResult.geometry.location;
                var trimAddr = placeResult.formatted_address.split(", ");

                var image = {
                    url: 'images/icons/AP-marker_large.png',
                    scaledSize: new google.maps.Size(32, 54)
                };
                var marker = new google.maps.Marker({
                    map: map,
                    place: {
                        placeId: id,
                        location: location
                    },
                    icon: image,
                    title: "Get directions"
                });

                google.maps.event.addListener(marker, 'click', function () {
                    if (id == idVA) {
                        index = 0;
                        daddr = geoVA;
                        trimAddr[0] = "1940 Duke St #200";
                    } else {
                        index = 1;
                        daddr = geoDC;
                        trimAddr[0] = "2200 Pennsylvannia Ave NW";
                    }
                    infowindow.setContent('<div class="info-window title">' + placeResult.name + "</div><div class='info-window sub-title'>" + office[index] + '</div><div class="info-window">' + trimAddr[0] + '<br>' + trimAddr[1] + ", " + trimAddr[2] + '</div><div class="info-window direction-div"><div class="direction-icon"></div><a class="google-link save-button-link" target="_blank" href="https://www.google.com/maps/dir/Current+Location/' + daddr + '">Get Directions</a></div>');
                    infowindow.open(map, marker);
                });

                markers.push(marker);
                //bounds.extend(location);
            }
        });
    }

    if (!bounds.isEmpty()) {
        map.fitBounds(bounds);
    }

    $(".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');

        //console.log("PlaceId = " + me);
        //console.log("Adj index = " + myIndex);
        //console.log("0:VA array index = " + markers[0].place.placeId);
        //console.log("1:DC array index = " + markers[1].place.placeId);
    });

    google.maps.event.addListenerOnce(map, 'idle', function () {
        $.mobile.loading("hide");
        $(".loc-btn").prop("disabled",false);
    });

}
google.maps.event.addDomListener(window, 'load', initialize);

---

HTML: Map & Buttons

<div data-role="content" class="full-width">

        <figure id="map"></figure>

        <div class="loc-btn-set">
            <button disabled data-role="none" data-theme="a" data-marker="ChIJKezXgqmxt4kRXrAnqIwIutA" class="loc-btn nightly-button">VA <span>- Alexandria</span></button>
            <button disabled data-role="none" data-theme="b" data-marker="ChIJDQlqOLG3t4kRqDU3uNoy4hs" class="loc-btn nightly-button">DC <span>- Washington</span></button>
        </div>
    </div>

Answer 1

The simpliest approach based on the given code would be to add the click-handler for the buttons inside the getDetails -callback.

Add this after the creation of the marker :

            $('.loc-btn[data-marker="'+id+'"]').click(function(){
              google.maps.event.trigger(marker,'click');
            });