Google Maps JavaScript API v3:getDetails(请求，回调），用于多个位置

我已经实现了Google Maps JavaScript API v3，为我公司的网站设计了一个自定义商店定位器。让我首先说，我的代码适用于两个商店，但如果我再添加任何商店，这将是无效或可行的，因为用于使其工作的"黑客"代码。

我正在使用谷歌地图地点库，使用getDetails()方法向谷歌发送"地点详细信息"请求。在回调中，我收到了我的每个店铺位置的InfoWindow信息（名称、地址、位置）。

我为每个位置创建一个标记，然后使用google.maps.event.addListener来协调place、marker和InfoWindow对象这就是我遇到问题的地方放置详细信息请求的接收顺序并不总是与发送顺序相同，这会导致对data-marker属性分别设置为0和1以与地图标记相关的按钮进行索引。

是否要将第二个请求延迟到第一个请求完成？还是以保持顺序完整性的方式编写脚本

下面的第一段代码是我的事件处理程序，它使用标记的.place.placeId属性将click侦听器绑定到每个按钮，而不是使用markers数组索引的首选技术（markers数组保存两个存储的位置详细信息）。

Google Maps API文档（地方库）中的任何演示或示例都没有描述多个地方的过程。任何提示、资源或建议都将不胜感激

网址：http://m.alliancepointe.com/locate.html

事件处理程序

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

完整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&按钮

<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>