多个InfoWindows | infowindow

本文介绍了多个InfoWindows的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

链接到我的地图：

链接到我的工作地图：

将一个id分配给< select> （我使用selectLocation）以及每个选项的值：

 << ; select id =selectLocation> 
< option>选择位置< / option> 
< option value ='bercolChoice'>伯克利音乐学院< / 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。触发器（selectChoices [this.value]，click）; 
}）;

I am currently developing a custom map, but have one issue. I have several InfoWindows, but only one of them is displaying for each marker. How do I get each marker to display it's own InfoWindow? The InfoWindow that is displaying is the last one listed in the code (Copley Place Shopping). Also, not sure if this is important, but whichever InfoWindow is listed last in the code is the one that displays for each marker.

Link to my map: http://www.searchtransparency.net/custom-google-map-v3/local-attractions-test.html

Link to my working map: http://www.searchtransparency.net/custom-google-map-v3/local-attractions-test-working.html

Thank you for your time!

Complete Code:

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

解决方案

I'll give an outline of what you could add to your page:

First, you probably want only one InfoWindow open at a time; if you really want multiple infowindows open at the same time then each infowindow needs its own variable name. Notice that they are all named infowindow right now.

What you must do for the single infowindow setup, is to set its content to change when a specific marker is clicked. For example:

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

and repeat for the other markers.

As for the dropdown making the infowindows open, I learned from this page that you can trigger an "artificial" mouse click on a specific marker.

See the Demo

Assign an id to the <select> (I use "selectLocation") and values to each option:

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

The string values assigned to the option values need to be matched with the marker variables, an object works well for this (seen here):

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

Finally the listener:

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

这篇关于多个InfoWindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！