1. 홈
  2. 질의 응답
  3. Google Maps API V3 :지도 외부에서 특정 마커로 이동하는 방법?

Google Maps API V3 :지도 외부에서 특정 마커로 이동하는 방법?

2010-05-08 6 views
11

두 개의 마커가있는지도가 있습니다.Google Maps API V3 :지도 외부에서 특정 마커로 이동하는 방법?

지도의 초기보기에는 하나의 마커 만 표시되며 클릭하면지도를 두 번째 마커로 이동하는지도 옆에 링크를 제공하고 싶습니다.

<script type="text/javascript"> 
     function initialize() { 
     var latlng = new google.maps.LatLng(50.823817, -0.135634); 
     var myOptions = { 
      zoom: 13, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
       } , 
       scaleControl: false 
      }; 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

    // 1st marker 
    var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' }); 
    var infowindow = new google.maps.InfoWindow({ content: 'my window content' }); 
    google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); }); 

    // 2nd marker 
    var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'}); 
    var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' }); 
    google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); }); 
    } 
    </script>

을 그래서 내가 좋겠 :

여기

내가 지금까지 가지고 무엇 http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (지도 아래의 링크를 참고) : 여기

는 API의 V2를 사용하여, 내가 원하는 걸의 데모입니다 추가하려는 곳은 marker2에 대한 링크이며, 일부 이동 거리는 50-odd miles, 예 <a href="#marker2">Second location</a>.

어떻게하면됩니까?

편집 :

출처

2010-05-08 Tom

답변

14

사용 addDomListener은 (당신이 코드에서 참조 할 수 있도록도 링크 태그에 ID를 추가해야합니다) 그 마커로지도를 이동 링크에 클릭 이벤트를 추가합니다 : 초기화 함수에서 이벤트를 설정하십시오.

<head> 
    <script type="text/javascript"> 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'}); 
     google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) { 
     map.setCenter(marker2.getPosition()); 
     } 
    } 
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <a href="javascript:function() { return false; }" id="location2">Second place</a> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body>

출처

2010-05-08 02:27:57 Bob

관련 문제

 관련 문제