使用Google Maps JavaScript API v3和地理编码API映射多个位置

我正在使用GoogleMapsJavaScriptAPIv3生成带有多个位置/标记的地图。我只有这些位置的地址，没有坐标，所以我使用地理编码API来获取坐标

我终于让谷歌的地理编码起作用了，所以位置标记显示在它们应该在的地方。但是，相同的内容显示在每个信息窗口中。我似乎无法将位置数组传递到geocode函数中。（顺便说一句，我还尝试为地理编码结果创建一个变量，并将infoWindow函数移到地理编码函数之外，但我也无法做到这一点。）

我已经试过一百种不同的方法了。我希望其他人能看到我看不到的东西

    var locations = [
        ['Location 1 Name', 'Location 1 Address', 'Location 1 URL'],
        ['Location 2 Name', 'Location 2 Address', 'Location 2 URL'],
        ['Location 3 Name', 'Location 3 Address', 'Location 3 URL']
    ];

    geocoder = new google.maps.Geocoder();

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

        title = locations[i][0];
        address = locations[i][1];
        url = locations[i][2];

        geocoder.geocode({ 'address' : locations[i][1] }, function(results, status) {
          marker = new google.maps.Marker({
              icon: 'marker_blue.png',
              map: map,
              position: results[0].geometry.location,
              title: title,
              animation: google.maps.Animation.DROP,
              address: address,
              url: url
          })
          infoWindow(marker, map, title, address, url);
        })

    }

    function infoWindow(marker, map, title, address, url) {
        google.maps.event.addListener(marker, 'click', function() {
            var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
            iw = new google.maps.InfoWindow({ content : html, maxWidth : 350});
            iw.open(map,marker);
        });
    }

var位置=[
['位置1名称'，'位置1地址'，'位置1 URL']，
[“位置2名称”、“位置2地址”、“位置2 URL”]，
['Location 3 Name'、'Location 3 Address'、'Location 3 URL']
];
geocoder=新的google.maps.geocoder（）；
对于（i=0；i
”；
iw=newgoogle.maps.InfoWindow（{content:html，maxWidth:350}）；
iw.打开（地图、标记）；
});
}

这是的副本，只是不是完全的副本。geocoder是异步的，因此当geocoder回调运行时，address的值是所有调用的循环结束时的值

答案是一样的：最简单的解决方案是使用函数闭包将对地理编码器的调用与返回的结果关联起来：

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

代码段：

var位置=[
['Location 1 Name'、'New York，NY'、'Location 1 URL']，
[“位置2名称”，“新泽西州纽瓦克”，“位置2 URL']，
['Location 3 Name'，'Philadelphia，PA'，'Location 3 URL']
];
var地理编码器；
var映射；
var bounds=new google.maps.LatLngBounds（）；
函数初始化（）{
map=新建google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
geocoder=新的google.maps.geocoder（）；
对于（i=0；i
”；
iw=新建google.maps.InfoWindow({
内容：html，
最大宽度：350
});
iw.打开（地图、标记）；
});
}
函数createMarker（结果）{
var marker=new google.maps.marker({
图标：'http://maps.google.com/mapfiles/ms/icons/blue.png',
地图：地图，
位置：结果[0]。geometry.location，
标题:标题,，
动画：google.maps.animation.DROP，
地址:地址:，
url:url
})
extend（marker.getPosition（））；
映射边界（bounds）；
信息窗口（标记、地图、标题、地址、url）；
返回标记；
}

html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

第1步 首先，您必须创建地图位置，例如，您想在web应用程序的何处添加此地图。因此，首先创建JSP/HTML/ASP页面，您必须在其中创建要显示地图的位置

<div id="map_canvas" style="width: 1350px; height: 500px"></div>

步骤2 下面我编写了一个脚本，您可以使用它在web应用程序上查看地图

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=TRUEORFALSE"></script>
<script type="text/javascript">
var map;
var markers;
function initialize() {

    $
            .ajax({

                type : "POST",
                url : "Your Servlet Name", //Servlet Name
                data : $("#FormID"),

                success : function(responseJson) {


                    var result = $.parseJSON(responseJson);
                    markers = result;

                    // Below mapOptions var includes styling maps and zoom level of your map, it also includes mapTypeId.
                    var mapOptions = {
                        center : new google.maps.LatLng(
                                markers[0].latitude, markers[0].longitude),
                        zoom : 5,
                        scrollwheel: false, 
                        styles : [ {
                            "featureType" : "administrative",
                            "elementType" : "labels.text.fill",
                            "stylers" : [ {
                             "color" : "#444444"
                            } ]
                           }, {
                            "featureType" : "landscape",
                            "elementType" : "all",
                            "stylers" : [ {
                             "color" : "#f2f2f2"
                            } ]
                           }, {
                            "featureType" : "poi",
                            "elementType" : "all",
                            "stylers" : [ {
                             "visibility" : "off"
                            } ]
                           }, {
                            "featureType" : "poi.park",
                            "elementType" : "geometry.fill",
                            "stylers" : [ {
                             "visibility" : "on"
                            }, {
                             "color" : "#1ba093"
                            } ]
                           }, {
                            "featureType" : "road",
                            "elementType" : "all",
                            "stylers" : [ {
                             "saturation" : -100
                            }, {
                             "lightness" : 45
                            } ]
                           }, {
                            "featureType" : "road.highway",
                            "elementType" : "all",
                            "stylers" : [ {
                             "visibility" : "simplified"
                            } ]
                           }, {
                            "featureType" : "road.arterial",
                            "elementType" : "labels.icon",
                            "stylers" : [ {
                             "visibility" : "off"
                            } ]
                           }, {
                            "featureType" : "transit",
                            "elementType" : "all",
                            "stylers" : [ {
                             "visibility" : "off"
                            } ]
                           }, {
                            "featureType" : "water",
                            "elementType" : "all",
                            "stylers" : [ {
                             "color" : "#00748c"
                            }, {
                             "visibility" : "on"
                            } ]
                           } ],
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document
                            .getElementById("map_canvas"), mapOptions);
                    addYourLocationButton(map,marker);  
                    //Create and open InfoWindow.
                    var infoWindow = new google.maps.InfoWindow();                      

                    for (var i = 0; i < markers.length; i++) {
                        var data = markers[i];

                        var myLatlng = new google.maps.LatLng(
                                data.latitude, data.longitude);
                        var marker = new google.maps.Marker({
                            position : myLatlng,
                            animation: google.maps.Animation.DROP,
                            map : map,
                            title : //Any title that you want to display while cursor over the marker.
                        });

                        //Click event 
                        (function(marker, data) {
                            google.maps.event
                                    .addListener(
                                            marker,
                                            "click",
                                            function(e) {                                                   
                                                infoWindow
                                                        .setContent("<div style = 'width:300px;min-height:50px'>+Write information about your location if you want.+"</div>");
                                                infoWindow
                                                        .open(map, marker);
                                            });
                        })(marker, data);

                    }

                }

            });

}

var映射；
var标记；
函数初始化（）{
$
.阿贾克斯({
类型：“POST”，
url:“您的Servlet名称”//Servlet名称
数据：$（“#FormID”），
成功：功能（responseJson）{
var result=$.parseJSON（responseJson）；
标记=结果；
//下面的mapOptions var包括设置地图样式和地图的缩放级别，它还包括mapTypeId。
变量映射选项={
中心：新google.maps.LatLng(
标记[0]。纬度，标记[0]。经度），
缩放：5，
滚轮：错误，
样式：[{
“功能类型”：“管理”，
“埃尔