Google Maps PanTo OnClick

Question

I am trying to panTo an area on a map on click. The script is not working and page reloading. Perhaps someone can see the problem.

My function

function clickroute(lati,long) {

       map = google.maps.Map(document.getElementById("map_canvas"));
      map.panTo(lati,long)
  }

And the rest

var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
      geocoder = new google.maps.Geocoder();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var address = 'virginia water';
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } 
    });
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

And my event

<a href="" onclick="clickroute(51.433373, -0.712251)">test</a>

score 32 · Accepted Answer · edited Jun 20 '20 at 09:12

32

The issue is that your using map.panTo(latitude,longitude) but the google maps API uses this: panTo(latLng myLatLng) where latLng is a google map class.

try something like this (untested)

function clickroute(lati,long) {
      var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
      map.panTo(latLng); //Make map global
  }

Look here for more info.

EDIT As someone else stated you don't want to remake a new map. Maybe its easier to make it global?

edited Jun 20 '20 at 09:12

Community

1
1

answered May 31 '11 at 18:26

Soatl

10,224
28
95
153

Works like a charm! Is there any customization for this? Like a fluid motion? Now it snaps to the location and the map renders after that slowly... – nclsvh Dec 13 '15 at 19:32

score 4 · Answer 2 · edited May 31 '11 at 22:31

The panTo accepts LatLng object as parameters not just coordinates. Create a LatLng object before passing it to panTo method.

function clickroute(lati,long) {
    map.panTo(new google.maps.LatLng(lati,long));
    return false; //this will cancel your navigation
}

Your page reloads because you do not cancel the navigation event in onClick that you put in the anchor tag. See comment in code above.

And like the others say take out the map variable from this function and make map global.

score 2 · Answer 3 · answered Feb 13 '13 at 15:52

you can also set a new marker on the fly:

   var LatLng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
              content: "<h2>Hier wohne ich!</h2>",
              map: map,position: results[0].geometry.location 
              });
    map.panTo(LatLng);

score 0 · Answer 4 · edited Apr 18 '20 at 19:11

0

You can do this:

var latLng = new google.maps.LatLng(lat_val, lng_value);
map.panTo(latLng);`

edited Apr 18 '20 at 19:11

Paul Roub

36,322
27
84
93

answered Apr 18 '20 at 19:06

Arjjun

1,203
16
15

score -1 · Answer 5 · answered May 31 '11 at 18:27

The line...

map = google.maps.Map(document.getElementById("map_canvas"));

.. is actually attempting to create a new Map within the #map_canvas Div. Since that map should already exist, you don't need that assignment statement. Just calling

map.panTo(lati,long)

should work?

Edit: Sorry, SSRide360 is correct that should be...

map.panTo(new google.maps.LatLng(lati, long));

Google Maps PanTo OnClick

5 Answers5

Linked