1

The following code is placemarkers placed on a google map using JavaScript. My issue is that I wish to envoke a infoWindow upon mouse click on each placemarker but cannot get infoWindow to appear on more than the Alnwick Gardens entry.

I am convinced its a quick fix but cannot figure it out, nothing I have tried seems to work. Probably down to poor JavaScript skills.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
          html { height: 100%}
          body { height: 100%; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;font-size:10pt;}
          #map_canvas { height: 100% }

          #content {

          }
    </style>

    <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(55.140425,-1.643829);
            var settings = {
                zoom: 10,
                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);
            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Alnwick Gardens</h1>'+
                '<div id="bodyContent">'+
                '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var companyImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50));

            var companyPos = new google.maps.LatLng(55.41535,-1.694795);

            var companyMarker = new google.maps.Marker({
                position: companyPos,
                map: map,
                icon: companyImage,
                shadow: companyShadow,
                title:"Alnwick Gardens",
                zIndex: 3});


            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.881742,-1.6589);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Beamish Hall Hotel, County Durham",
                zIndex: 2
            });

            var parkingImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var parkingShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var parkingPos = new google.maps.LatLng(54.696009,-1.18378);

            var parkingMarker = new google.maps.Marker({
                position: parkingPos,
                map: map,
                icon: parkingImage,
                shadow: parkingShadow,
                title:"Borough Hall, Hartlepool",
                zIndex: 1
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.741519,-1.519296);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Bowburn Hall",
                zIndex: 2
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.987242,-1.802942);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Close House Golf Club",
                zIndex: 2
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(55.040147,-1.817086);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Dissington Hall, Northumberland",
                zIndex: 2
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(55.512687,-1.705022);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Doxford Hall, Northumberland",
                zIndex: 2
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.773588,-1.57667);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Durham Castle",
                zIndex: 2
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.935575,-1.608303);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Eslington Villa, Gateshead",
                zIndex: 2
            });
            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.953396,-1.656384);

            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Federation Brewery, Gateshead",
                zIndex: 2
            });



            /*Example Tab Code*/


            var trainImage = new google.maps.MarkerImage('images/logo.png',
                new google.maps.Size(100,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png',
                new google.maps.Size(130,50),
                new google.maps.Point(0,0),
                new google.maps.Point(65, 50)
            );

            var trainPos = new google.maps.LatLng(54.884735, -1.366491);


            var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Example",
                zIndex: 2
            });


            /*Example Tab Code*/

            google.maps.event.addListener(companyMarker, 'click', function() {
                infowindow.open(map,companyMarker);
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
 </html>

Any help would be be hugely appreciated. Thanks

4

1 回答 1

1

尝试为每个标记添加侦听器。例如，对于 companyMarker

var companyMarker = new   google.maps.Marker({
       position: companyPos,
       map: map,
       icon: companyImage,
       shadow: companyShadow,
       title:"Alnwick Gardens",
       zIndex: 3,
       listeners: {
        click: function(e){
           var infowindow = new google.maps.InfoWindow({
             content: contentString
           });
           infowindow.open(map, companyMarker);
        }
       }
});

它不是经过测试的解决方案。总结一下，您需要为每个标记添加点击事件。

于 2013-02-26T17:11:19.407 回答