title: google maps pan to
body: <p>Been struggling all day with setting a pan to in google maps from a text link. It looks like the id of the map itself isnt being passed through to the function but I have tried a number of things with no joy.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var home = new google.maps.LatLng(4.915833, 10.195313);
      function initialize() {
          var myOptions = {
              zoom: 2,
              center: home,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: false,
              panControl: true,
              panControlOptions: {
                  position: google.maps.ControlPosition.LEFT_CENTER
              },
              zoomControl: true,
              zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.LARGE,
                  position: google.maps.ControlPosition.LEFT_CENTER
              },
              scaleControl: false,
              streetViewControl: true,
              streetViewControlOptions: {
                  position: google.maps.ControlPosition.LEFT_CENTER
              }
          }
          var map = new google.maps.Map(document.getElementById("map"), myOptions);
          setMarkers(map, destinations);
          clickroute(map);
      }
      var destinations = [
          ['Marbella', 36.509937, -4.886352],
          ['Algarve', 37.016945, -7.928728],
          ['London', 51.508129, -0.128005],
          ['Istanbul', 41.00527, 28.97696],
          ['Whistler', 50.116168, -122.959423]
      ];
      function setMarkers(map, locations) {
          var image = new google.maps.MarkerImage('img/marker.png',
          new google.maps.Size(41, 63),
          new google.maps.Point(0,0));
          for (var i = 0; i &lt; locations.length; i++) {
              var destination = locations[i];
              var myLatLng = new google.maps.LatLng(destination[1], destination[2]);
              var marker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  icon: image,
                  title: destination[0]
              });
          }
      }
      function clickroute(lati, long) {
          var latLng = new google.maps.LatLng(51.433373, -0.712251);
          map.panTo(latLng);
      }
  &lt;/script&gt; 
  
  &lt;li onclick="clickroute()"&gt;test&lt;/li&gt;
  </code></pre>
  
  <p>Any possible ideas on what could cause the issue? I get a js error with </p>
  
  <pre><code>Uncaught TypeError: Object #&lt;HTMLDivElement&gt; has no method 'panTo'
  </code></pre>
  
  <p>Thanks</p>
  
  <p>Richard</p>