如何为每个google标记添加更多html内容以用于多个位置地图

时间:2015-04-29 01:13:22

标签: google-maps

以下是显示多个位置的代码。我试图将更多的html内容和存储单独存储在mapInfo变量中,考虑将其放回标记对象,但单击时不会出现任何信息。想知道有没有办法做到这一点,而不是把所有内容都放到标记变量对象。

        var markers = [
            [mapInfo_1, -33.890542, 151.274856],
            [mapInfo_2, -33.923036, 151.259052],
            ['Cronulla Beach', -34.028249, 151.157507],
        ];


    var mapInfo_1 = '<div class="mapInfo"><h5>Bondi Beach</h5><div class="mapContent">Lorem ipsum dolor sit amet.....</div></div>';

    var mapInfo_2 = '<div class="mapInfo"><h5>Coogee Beach</h5><div class="mapContent">Lorem ipsum dolor sit amet....</div></div>';



        function initializeMaps() {

            var latlng = new google.maps.LatLng(-33.92, 151.25);

            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

            var infowindow = new google.maps.InfoWindow(); 
            var marker, i;
            var bounds = new google.maps.LatLngBounds();

            for (i = 0; i < markers.length; i++) {  
                var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
                bounds.extend(pos);
                marker = new google.maps.Marker({
                    position: pos,
                    map: map
                });
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(markers[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

                map.fitBounds(bounds);

            }
        }

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

0 个答案:

没有答案