谷歌地图多个信息窗口不起作用答案

【问题标题】：Google Map multiple infowindow does not work谷歌地图多个信息窗口不起作用
【发布时间】：2012-08-22 08:13:21
【问题描述】：

我尝试使用 javascript 将多个标记和信息窗口添加到谷歌地图。下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script type="text/javascript">
        var locations = [ '1961 East Mall Vancouver BC',
                '2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom : 14,
            center : new google.maps.LatLng(49.26526, -123.250541),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

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

            var geocoder = new google.maps.Geocoder();
            geocoder
                    .geocode(
                            {
                                'address' : locations[i]
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    map.setCenter(results[0].geometry.location);
                                    marker = new google.maps.Marker({
                                        map : map,
                                        position : results[0].geometry.location
                                    });
                                } else {
                                    alert('Geocode was not successful for the following reason: '
                                            + status);
                                }
                            });

            //add info window
            google.maps.event.addListener(marker, 'click',
                    (function(marker, i) {
                        return function() {
                            infowindow.setContent(locations[i]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
            //end of adding info window

        }//end of for loop
    </script>
</body>
</html>

（感谢Google Maps JS API v3 - Simple Multiple Marker Example）

问题是：除非我评论

            //add info window
            google.maps.event.addListener(marker, 'click',
                    (function(marker, i) {
                        return function() {
                            infowindow.setContent(locations[i]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
            //end of adding info window

点击时我只会得到一个没有信息窗口弹出的标记。

如果我在代码块上方添加注释，我会得到三个标记，但也不会弹出信息窗口。

我哪里做错了？

谢谢。

【问题讨论】：

标签： google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

地理编码器是异步的，您需要在地理编码器回调中添加信息窗口。当前，它在定义任何标记之前运行。我想你会得到一个 javascript 错误。

【讨论】：

【解决方案2】：

这行得通：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script type="text/javascript">
        var locations = [ '1961 East Mall Vancouver BC',
                '2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom : 14,
            center : new google.maps.LatLng(49.26526, -123.250541),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker;
        var i;

        $(document).ready(function() {
            initialize();
        });

        function initialize(){
            setMarkers(map,locations);
        }

        function setMarkers(map, address) {
            for ( var i = 0; i < address.length; i++) {
                setMarker(map, address[i])
            }
        }

        function setMarker(map, address) {
            geocoder = new google.maps.Geocoder();
            geocoder
                    .geocode(
                            {
                                'address' : address
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    map.setCenter(results[0].geometry.location);
                                    var marker = new google.maps.Marker(
                                            {
                                                position : results[0].geometry.location,
                                                map : map
                                            });
                                    google.maps.event.addListener(marker,
                                            "click", function() {
                                                infowindow.setContent(address);
                                                infowindow.open(map, marker);
                                            });
                                } else {
                                    alert("Geocode was not successful for the following reason: "
                                            + status);
                                }

                            });
        }
    </script>
</body>
</html>

感谢Google Map multiple infowindow does not work

【讨论】：