JavaScript問題？谷歌地圖。 infoWindows

以下代碼是使用JavaScript放置在Google地圖上的地圖標記。我的問題是，我希望在鼠標點擊每個地標時啓用一個infoWindow，但不能讓infoWindow出現在比Alnwick Gardens條目更多的地方。JavaScript問題？谷歌地圖。 infoWindows

我相信它的一個快速修復，但無法弄清楚，沒有任何我已經嘗試似乎工作。可能只是糟糕的JavaScript技能。

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

任何幫助將非常感激。由於

來源

2013-02-26 Paul

它不是一朝一夕=/ – 2013-02-26 13:35:05

感謝您的...：/ – Paul 2013-02-26 13:40:21

它會幫助你 http://stackoverflow.com/questions/5868903/marker-content-infowindow-google-maps – arjuncc 2013-02-26 13:42:53

此鏈接將幫助您：http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/

見第四章：瓶蓋

來源

2013-02-26 13:22:45 Ruud

+1對於良好的參考 – arjuncc 2013-02-26 13:45:11

嘗試增加聽衆每個標記。因此，例如用於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-26 17:11:19 Ankit

JavaScript問題？谷歌地圖。 infoWindows

回答

相關問題