1. casa
  2. Domanda e risposta
  3. API V3 di Google Maps: come passare a un indicatore specifico dall'esterno della mappa?

API V3 di Google Maps: come passare a un indicatore specifico dall'esterno della mappa?

2010-05-08 18 views
11

Ho una mappa con due marcatori.API V3 di Google Maps: come passare a un indicatore specifico dall'esterno della mappa?

La vista iniziale della mappa mostra solo un indicatore e desidero fornire un collegamento accanto alla mappa che sposta la mappa sul secondo marcatore quando si fa clic.

Ecco una demo di quello che voglio, utilizzando v2 delle API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (notare i link qui sotto la mappa)

Ecco quello che ho finora:

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

Quindi quello che avevo come aggiungere un link a marker2, per spostare la mappa di circa 50 miglia dispari, es. <a href="#marker2">Second location</a>.

Come faccio?

fonte

2010-05-08 Tom

risposta

14

Usa addDomListener per aggiungere un evento click al link che si muoverà la mappa per quel marcatore (avrete anche bisogno di aggiungere un id al tag di collegamento in modo da poter fare riferimento nel codice):

Edit : impostare l'evento in una funzione di inizializzazione:

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

fonte

2010-05-08 02:27:57 Bob

Problemi correlati

 Problemi correlati