1. Inicio
  2. Pregunta y respuesta
  3. Google Maps API V3: ¿Cómo saltar a un marcador específico desde fuera del mapa?

Google Maps API V3: ¿Cómo saltar a un marcador específico desde fuera del mapa?

2010-05-08 23 views
11

Tengo un mapa con dos marcadores en él.Google Maps API V3: ¿Cómo saltar a un marcador específico desde fuera del mapa?

La vista inicial del mapa solo muestra un marcador, y deseo proporcionar un enlace al lado del mapa que moverá el mapa al segundo marcador al hacer clic.

Aquí es una demostración de lo que quiero, utilizando v2 de la API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (tenga en cuenta los siguientes enlaces mapa)

Esto es lo que tengo hasta ahora:

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

Así que lo que había gustaría agregar es un enlace a marker2, para mover el mapa unas 50 millas arriba, por ej. <a href="#marker2">Second location</a>.

¿Cómo podría hacer esto?

Fuente

2010-05-08 Tom

Respuesta

14

Uso addDomListener para añadir un evento de clic al enlace que se moverá el mapa para ese marcador (también se tendrá que añadir un identificador a la etiqueta de enlace para que pueda hacer referencia a ella en el código):

Editar : Ajuste el evento en una función de inicialización:

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

Fuente

2010-05-08 02:27:57 Bob

Cuestiones relacionadas

 Cuestiones relacionadas