0

現在、カスタム マップを開発していますが、1 つの問題があります。いくつかの InfoWindow がありますが、マーカーごとに表示されるのはそのうちの 1 つだけです。各マーカーに独自の 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>
4

1 に答える 1

2

ページに追加できる内容の概要を説明します。

まず、一度に 1 つの 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");
    });
于 2012-07-11T20:36:32.887 に答える