views:

995

answers:

2

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?

A: 

Use addDomListener to add a click event to the link that will move the map to that marker (you'll also need to add an id to the link tag so you can reference it in code):

Edit: Set the event in a initialization function:

<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>
Bob
A: 

Thanks Bob. Unfortunately I can't seem to get it to work just yet...

Do I need to place the code in a specific place? Right now I have this:

<body>

<script type="text/javascript">
google.maps.event.addDomListener(document.getElementById("location1"), "click", function(ev) { map.setCenter(marker1.getPosition()); }
google.maps.event.addDomListener(document.getElementById("location2"), "click", function(ev) { map.setCenter(marker2.getPosition()); }
</script>

<a href="#location1" id="location1">First place</a>
<a href="#location2" id="location2">Second place</a>

<div id="map"></map>

</body>
Tom