2012-01-22 2 views
2

Моей цели создать карту с несколькими местами с картой, которая скачет от маркеров к маркеру, когда HTML тег нажмите в другом месте на страницеGoogle Maps API v3 знаков множественных прыжков места с информационным окном

я сделал прыжки работа, но, я не могу показаться, чтобы получить Mouseover информация коробки работать ... у меня есть поиск, но не могу найти эту конкретную проблему

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

вы хотите открыть инфоиндуст c маркер на мыши двигаться? –

+0

да, одна информация за маркер –

ответ

3

рабочий пример ..

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

спасибо вам огромное Ramesh K, только то, что мне нужно –

Смежные вопросы