多个InfoWindows

时间：2012-07-11 19:00:15

标签： google-maps-api-3

我目前正在开发自定义地图，但有一个问题。我有几个InfoWindows，但每个标记只显示其中一个。如何让每个标记显示它自己的InfoWindow？显示的InfoWindow是代码中列出的最后一个（Copley Place Shopping）。此外，不确定这是否重要，但代码中最后列出的InfoWindow是为每个标记显示的那个。

链接到我的地图：http://www.searchtransparency.net/custom-google-map-v3/local-attractions-test.html

链接到我的工作地图：http://www.searchtransparency.net/custom-google-map-v3/local-attractions-test-working.html

感谢您的时间！

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Custom Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(42.3435295,-71.0871923);
        var settings = {
            zoom: 15,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

<!--START Westland Avenue Garage-->     
        var contentStringwesavegar = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">WESTLAND AVENUE GARAGE</h1>'+
            '<div id="bodyContent">'+
            '<p>Westland Avenue Garage is the cleanest, safest, and most convenient place to park in Back Bay Boston.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringwesavegar
        });

        var wesavegarImage = new google.maps.MarkerImage('images/map-icons/parking.png',
            new google.maps.Size(50,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var wesavegarShadow = new google.maps.MarkerImage('images/map-icons/parking-shadow.png',
            new google.maps.Size(50,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var wesavegarPos = new google.maps.LatLng(42.3435295,-71.0871923);

        var wesavegarMarker = new google.maps.Marker({
            position: wesavegarPos,
            map: map,
            icon: wesavegarImage,
            shadow: wesavegarShadow,
            title:"Westland Avenue Parking Garage",
            zIndex: 3});
<!--STOP Westland Avenue Garage-->

<!--START Fenway Park-->        
        var contentStringfenpar = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Fenway Park</h1>'+
            '<div id="bodyContent">'+
            '<p>Fenway Park is where you go to see any major league baseball game. Also, home of the Boston Red Sox team.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringfenpar
        });

        var fenparImage = new google.maps.MarkerImage('images/map-icons/fenway-park.png',
            new google.maps.Size(122,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var fenparShadow = new google.maps.MarkerImage('images/map-icons/fenway-park-shadow.png',
            new google.maps.Size(122,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var fenparPos = new google.maps.LatLng(42.3462509,-71.0981704);

        var fenparMarker = new google.maps.Marker({
            position: fenparPos,
            map: map,
            icon: fenparImage,
            shadow: fenparShadow,
            title:"Fenway Park",
            zIndex: 3});
<!--STOP Fenway Park-->

<!--START Northeastern University-->        
        var contentStringnoruni = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringnoruni
        });

        var noruniImage = new google.maps.MarkerImage('images/map-icons/northeastern-university.png',
            new google.maps.Size(200,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var noruniShadow = new google.maps.MarkerImage('images/map-icons/northeastern-university-shadow.png',
            new google.maps.Size(200,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var noruniPos = new google.maps.LatLng(42.3385917,-71.0909155);

        var noruniMarker = new google.maps.Marker({
            position: noruniPos,
            map: map,
            icon: noruniImage,
            shadow: noruniShadow,
            title:"Northeastern University",
            zIndex: 3});
<!--STOP Northeastern University-->

<!--START Berklee College of Music-->       
        var contentStringbercol = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringbercol
        });

        var bercolImage = new google.maps.MarkerImage('images/map-icons/berklee-college-of-music.png',
            new google.maps.Size(202,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var bercolShadow = new google.maps.MarkerImage('images/map-icons/berklee-college-of-music-shadow.png',
            new google.maps.Size(202,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var bercolPos = new google.maps.LatLng(42.3475459,-71.0870190);

        var bercolMarker = new google.maps.Marker({
            position: bercolPos,
            map: map,
            icon: bercolImage,
            shadow: bercolShadow,
            title:"Berklee College of Music",
            zIndex: 3});
<!--STOP Berklee College of Music-->

<!--START Wentworth Institute of Technology-->      
        var contentStringwentec = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringwentec
        });

        var wentecImage = new google.maps.MarkerImage('images/map-icons/wentworth-institute-of-technology.png',
            new google.maps.Size(272,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var wentecShadow = new google.maps.MarkerImage('images/map-icons/wentworth-institute-of-technology-shadow.png',
            new google.maps.Size(272,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var wentecPos = new google.maps.LatLng(42.3370475,-71.0970402);

        var wentecMarker = new google.maps.Marker({
            position: wentecPos,
            map: map,
            icon: wentecImage,
            shadow: wentecShadow,
            title:"Wentworth Institute of Technology",
            zIndex: 3});
<!--STOP Wentworth Institute of Technology-->

<!--START Symphony Hall-->      
        var contentStringsymhal = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringsymhal
        });

        var symhalImage = new google.maps.MarkerImage('images/map-icons/symphony-hall.png',
            new google.maps.Size(136,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var symhalShadow = new google.maps.MarkerImage('images/map-icons/symphony-hall-shadow.png',
            new google.maps.Size(136,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var symhalPos = new google.maps.LatLng(42.3430809,-71.0853963);

        var symhalMarker = new google.maps.Marker({
            position: symhalPos,
            map: map,
            icon: symhalImage,
            shadow: symhalShadow,
            title:"Symphony Hall",
            zIndex: 3});
<!--STOP Symphony Hall-->

<!--START Newbury Street Shopping-->        
        var contentStringnewstr = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringnewstr
        });

        var newstrImage = new google.maps.MarkerImage('images/map-icons/newbury-street-shopping.png',
            new google.maps.Size(204,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var newstrShadow = new google.maps.MarkerImage('images/map-icons/newbury-street-shopping-shadow.png',
            new google.maps.Size(204,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var newstrPos = new google.maps.LatLng(42.3483867,-71.0884548);

        var newstrMarker = new google.maps.Marker({
            position: newstrPos,
            map: map,
            icon: newstrImage,
            shadow: newstrShadow,
            title:"Newbury Street Shopping",
            zIndex: 3});
<!--STOP Newbury Street Shopping-->

<!--START House of Blues-->     
        var contentStringhoublu = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringhoublu
        });

        var houbluImage = new google.maps.MarkerImage('images/map-icons/house-of-blues.png',
            new google.maps.Size(134,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var houbluShadow = new google.maps.MarkerImage('images/map-icons/house-of-blues-shadow.png',
            new google.maps.Size(134,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var houbluPos = new google.maps.LatLng(42.3471727,-71.0957007);

        var houbluMarker = new google.maps.Marker({
            position: houbluPos,
            map: map,
            icon: houbluImage,
            shadow: houbluShadow,
            title:"House of Blues",
            zIndex: 3});
<!--STOP House of Blues-->

<!--START Prudential Center Shopping-->     
        var contentStringprucen = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringprucen
        });

        var prucenImage = new google.maps.MarkerImage('images/map-icons/prudential-center-shopping.png',
            new google.maps.Size(220,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var prucenShadow = new google.maps.MarkerImage('images/map-icons/prudential-center-shopping-shadow.png',
            new google.maps.Size(220,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var prucenPos = new google.maps.LatLng(42.3486763,-71.0826469);

        var prucenMarker = new google.maps.Marker({
            position: prucenPos,
            map: map,
            icon: prucenImage,
            shadow: prucenShadow,
            title:"Prudential Center Shopping",
            zIndex: 3});
<!--STOP Prudential Center Shopping-->

<!--START Copley Place Shopping-->      
        var contentStringcoppla = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Copley Place Shopping <a href="http://www.facebook.com/ShopCopleyPlace">Get Directions</a></h1>'+
            '<div id="bodyContent">'+
            '<p>Copley Place is Boston&#39;s most distinctive shopping destination with 75 fabulous stores including:<br/><ul><li>Neiman Marcus</li><li>Barneys New York</li><li>Tiffany & Co.</li><li>Jimmy Choo</li><li>Intimacy</li><li>Tourneau</li><li>Salvatore Ferragamo</li><li>Porsche Design</li><li>David Yurman</li><li>A|X Armani Exchange</li><li>Louis Vuitton</li><li>Emporio Armani</li><li>Elie Tahari</li><li>Christian Dior</li><li>Burberry</li><li>BCBGMAXAZRIA</li></ul><br/><a href="http://www.facebook.com/ShopCopleyPlace">Get Directions</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.facebook.com/ShopCopleyPlace">More information</a></p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringcoppla
        });

        var copplaImage = new google.maps.MarkerImage('images/map-icons/copley-place-shopping.png',
            new google.maps.Size(186,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var copplaShadow = new google.maps.MarkerImage('images/map-icons/copley-place-shopping-shadow.png',
            new google.maps.Size(186,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var copplaPos = new google.maps.LatLng(42.3473509,-71.0783045);

        var copplaMarker = new google.maps.Marker({
            position: copplaPos,
            map: map,
            icon: copplaImage,
            shadow: copplaShadow,
            title:"Copley Place Shopping",
            zIndex: 3});
<!--STOP Copley Place Shopping-->

        google.maps.event.addListener(wesavegarMarker, 'click', function() {
            infowindow.open(map,wesavegarMarker);
        });
        google.maps.event.addListener(fenparMarker, 'click', function() {
            infowindow.open(map,fenparMarker);
        });
        google.maps.event.addListener(noruniMarker, 'click', function() {
            infowindow.open(map,noruniMarker);
        });
        google.maps.event.addListener(bercolMarker, 'click', function() {
            infowindow.open(map,bercolMarker);
        });
        google.maps.event.addListener(wentecMarker, 'click', function() {
            infowindow.open(map,wentecMarker);
        });
        google.maps.event.addListener(symhalMarker, 'click', function() {
            infowindow.open(map,symhalMarker);
        });
        google.maps.event.addListener(newstrMarker, 'click', function() {
            infowindow.open(map,newstrMarker);
        });
        google.maps.event.addListener(houbluMarker, 'click', function() {
            infowindow.open(map,houbluMarker);
        });
        google.maps.event.addListener(prucenMarker, 'click', function() {
            infowindow.open(map,prucenMarker);
        });
        google.maps.event.addListener(copplaMarker, 'click', function() {
            infowindow.open(map,copplaMarker);
        });

    }
</script>
</head>
<body onLoad="initialize()">

<div style="width:960px; margin-left:auto; margin-right:auto; clear:both;">

    <h1 style="width:500px; float:left;">Google Custom Map</h1>

    <select style="float:right; margin-top:37px; margin-bottom:20px; color:#09F; font-size:18px; margin-left:20px;" name="categories">
        <option>Select Location</option>
        <option>Berklee College of Music</option>
        <option>Copley Place Shopping</option>
        <option>Fenway Park</option>
        <option>House of Blues</option>
        <option>Newbury Street Shopping</option>
        <option>Northeastern University</option>
        <option>Prudential Center Shopping</option>
        <option>Symphony Hall</option>
        <option>Wentworth Institute of Technology</option>
        <option>Westland Avenue Parking Garage</option>
    </select>

    <div id="map_canvas" style="width:960px; height:500px; margin-bottom:40px; float:left;"></div>

</div>

</div>

</body>
</html>

<select onChange="triggerClick" style="float:right; margin-top:37px; color:#09F; font-size:18px; margin-left:20px;" name="categories">
    <option>Select Location</option>
    <option value='bercolMarker'>Berklee College of Music</option>
    <option value='chuapaMarker'>Church Park Apartments</option>
    <option>Copley Place Shopping</option>
    <option>Fenway Park</option>
    <option>House of Blues</option>
    <option>Huntington Theatre</option>
    <option>Museum of Fine Arts</option>
    <option>Newbury Street Shopping</option>
    <option>New England Conservatory</option>
    <option>Northeastern University</option>
    <option>Prudential Center Shopping</option>
    <option>Symphony Hall</option>
    <option>Wentworth Institute of Technology</option>
    <option>Westland Avenue Parking Garage</option>
</select>

1 个答案:

答案 0 :(得分：2)

我将概述您可以添加到页面的内容：

首先，您可能只希望一次打开一个InfoWindow;如果你真的想要同时打开多个infowindows，那么每个infowindow都需要自己的变量名。请注意，它们现在都被命名为infowindow。

单个信息窗设置必须执行的操作是将其内容设置为在单击特定标记时更改。例如：

google.maps.event.addListener(wesavegarMarker, 'click', function() {
  infowindow.setContent(contentStringwesavegar);
  infowindow.open(map,wesavegarMarker);
});

并重复其他标记。

至于打开infowindows的下拉菜单，我从this page了解到你可以触发一个特定标记的“人工”鼠标点击。

See the Demo

为<select>（我使用“selectLocation”）和每个选项的值分配一个ID：

<select id="selectLocation">
  <option>Select Location</option>
  <option value='bercolChoice'>Berklee College of Music</option>
  <option value='wentecChoice'>wentworth</option>
</select>

分配给选项值的字符串值需要与标记变量匹配，一个对象适用于此（seen here）：

  var selectChoices = {
    bercolChoice: bercolMarker,
    wentecChoice: wentecMarker
  };

最后是听众：

  google.maps.event.addDomListener(
    document.getElementById("selectLocation"), 'change',
    function() {
      google.maps.event.trigger(selectChoices[this.value], "click");
    });
相关问题
最新问题