1. Zuhause
  2. Frage und Antwort
  3. Google Maps API V3: Wie springt man von außerhalb der Karte zu einem bestimmten Marker?

Google Maps API V3: Wie springt man von außerhalb der Karte zu einem bestimmten Marker?

2010-05-08 6 views
11

Ich habe eine Karte mit zwei Markierungen darauf.Google Maps API V3: Wie springt man von außerhalb der Karte zu einem bestimmten Marker?

Die anfängliche Ansicht der Karte zeigt nur einen Marker und ich möchte einen Link neben der Karte bereitstellen, der die Karte beim Klicken auf die zweite Markierung verschiebt.

Hier ist eine Demo von dem, was ich will, v2 der API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (beachten Sie die Links unterhalb der Karte)

Hier ist, was ich bisher habe:

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

So was würde ich hinzufügen möchte, ist ein Link zu marker2, um die Karte etwa 50 Meilen hoch zu bewegen, z <a href="#marker2">Second location</a>.

Wie würde ich das tun?

Quelle

2010-05-08 Tom

Antwort

14

Verwenden addDomListener ein Click-Ereignis auf den Link hinzuzufügen, um die Karte zu diesem Marker bewegen wird (Sie werden auch eine ID an den Link-Tag hinzufügen müssen, damit Sie es in Code verweisen können):

bearbeiten Stellen Sie das Ereignis in einer Initialisierungsfunktion:

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

Quelle

2010-05-08 02:27:57 Bob

 Verwandte Themen

  • Keine verwandten Themen^_^