发表新帖
发表新帖

Google Map multiple infowindow does not work

前端 未结
关注
2 425
天命终不由人
天命终不由人 2021-01-07 11:13

I tried to add multiple markers and infowindow to a google map using javascript. Below is the code:
相关标签:
2条回答
  • 清酒与你
    2021-01-07 11:32

    This works:

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

    Thanks to Google Map multiple infowindow does not work

    0 讨论(0)
  • 一向
    2021-01-07 11:50

    The geocoder is asynchronous, you need to add the infowindow inside the geocoder call back. Where you have it currently it runs before any of the markers are defined. I would think you would get a javascript error.

    0 讨论(0)
 看不清?
提交回复
热议问题