Google Maps API V3: How to jump to a specific marker from outside the map?

Posted by Tom on Stack Overflow See other posts from Stack Overflow or by Tom
Published on 2010-05-08T02:23:53Z Indexed on 2010/05/08 2:28 UTC
Read the original article Hit count: 334

Filed under:

I have a map with two markers on it.

The initial view of the map only shows one marker, and I want to provide a link next to the map that will move the map to the 2nd marker when clicked.

Here's a demo of what I want, using v2 of the API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (note the links below the map)

Here's what I have so far:

    <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 what I'd like to add is a link to marker2, to move the map some 50-odd miles up, e.g. <a href="#marker2">Second location</a>.

How would I do this?

© Stack Overflow or respective owner

Related posts about google-maps-api-3