谷歌地圖API V3多個跳躍位置標記

我的目標是創建一個映射，從標記跳轉到標記時一個html標籤是點擊谷歌地圖API V3多個跳躍位置標記

我做了跳躍的網頁上的其他多個位置的地圖工作，但我似乎無法得到的鼠標懸停信息框工作...我有搜索，但無法找到特定問題

www.humphrey-ray.com/qp/locations-new27a.html

來源

2012-01-22 Steven Humphrey

你想打開特定的infowindow c鼠標移動的標記？ –

是的，每個標記一個信息 –

工作示例..

<!DOCTYPE html> 
<html> 
    <head> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&amp;sensor=false"> 
</script> <script type="text/javascript"> 
var map; 
var marker2; 
var marker3; 
var marker4; 
var marker5; 
var infowindow = new google.maps.InfoWindow(); 
function initialize() { 
    var latlng = new google.maps.LatLng(39.94718, -75.14323); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    marker2 = new google.maps.Marker({ 
     position: new google.maps.LatLng(39.94718, -75.14323), 
     map: map, 
     title: "my 2nd title" 
    }); 

    new google.maps.event.addListener(marker2, 'mouseover', function() { 
       infowindow.setContent("my 2nd title"); 
       infowindow.open(map,this); 
     }); 
    marker3 = new google.maps.Marker({ 
     position: new google.maps.LatLng(39.94924, -75.14268), 
     map: map, 
     title: "my 2nd title" 
    }); 
    new google.maps.event.addListener(marker3, 'mouseover', function() { 
       infowindow.setContent("my 3nd title"); 
       infowindow.open(map,this); 
     }); 

    marker4 = new google.maps.Marker({ 
     position: new google.maps.LatLng(39.96146, -75.14325), 
     map: map, 
     title: "my 2nd title" 
    }); 
    new google.maps.event.addListener(marker4, 'mouseover', function() { 
       infowindow.setContent("my 4nd title"); 
       infowindow.open(map,this); 
     }); 


    marker5 = new google.maps.Marker({ 
     position: new google.maps.LatLng(39.95098, -75.14558), 
     map: map, 
     title: "my 5nd title" 
    }); 

     new google.maps.event.addListener(marker5, 'mouseover', function() { 
       infowindow.setContent("my 5nd title"); 
       infowindow.open(map,this); 
     }); 

} 
function goToLoc(id){ 
    if(id== 2) 
    map.setCenter(marker2.getPosition()); 
    if(id == 3) 
    map.setCenter(marker3.getPosition()); 
    if(id == 4) 
    map.setCenter(marker4.getPosition()); 
    if(id == 5) 
    map.setCenter(marker5.getPosition()); 
} 

</script> <style type="text/css"> 
body,td,th { font-family: Arial, Helvetica, sans-serif; } 

</style> 
    </head> 
    <body onload="initialize()"> 
     <div id="container"> 

<!-- /header --> 


<!-- /nav --> 
      <div class="mapwrapper"> 
       <div class="mapwrapper" id="map_canvas" style="width:720px; height:400px"> 
       </div> 
       <div class="mapwrapper"> 

        <div class="right-top-column"> 
         <div class="right-top-column-inner"> 
          <br> 
          <img src="img/comin_soon.jpg" width="180" height="186" /> 
          </p> 
         </div> 
        </div> 
        <div class="right-top-column-noshaw"> 
         <h1> 

          Click Location to show on map 
         </h1> 
         <ul class="side-list"> 
          <li> 
           <a href="#" id="marker2" onclick="goToLoc(2)"> 
            Old City</a> 
          </li> 
          <li> 
           <a href="#" id="marker3" onclick="goToLoc(3)"> 

            South Street/Society Hill</a> 
          </li> 
          <li> 
           <a href="#" id="marker4" onclick="goToLoc(4)"> 
            Northern Liberties</a> 
          </li> 
          <li> 
           <a href="#" id="marker5" onclick="goToLoc(5)"> 

            Old City</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

來源

2012-01-24 17:29:22

非常感謝你Ramesh K，正是我需要的 –

谷歌地圖API V3多個跳躍位置標記

回答

相關問題