google-maps-api-3 - 多个信息窗口

Question

我目前正在开发自定义地图，但有一个问题。我有几个 InfoWindows，但每个标记只显示其中一个。如何让每个标记显示它自己的信息窗口？显示的 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>

score 2 · Accepted Answer

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

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

对于单个信息窗口设置，您必须做的是将其内容设置为在单击特定标记时更改。例如：

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

并重复其他标记。

至于打开信息窗口的下拉菜单，我从这个页面了解到，您可以在特定标记上触发“人工”鼠标单击。

查看演示

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

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

分配给选项值的字符串值需要与标记变量匹配，一个对象可以很好地解决这个问题（见这里）：

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

最后听者：

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

google-maps-api-3 - 多个信息窗口

1 回答 1

Related

Reference