1

How can I offset the panTo function? When a marker is clicked I would like to panTo it, but not place the marker in the center of the screen.

I would like to offset it (both x and y) by a desired % of the screen width and height.

google.maps.event.addListener(marker, 'click', function() {
   map.panTo(loc);
});

Thanks

alias51
  • 8,178
  • 22
  • 94
  • 166
  • You need to calculate the geographic coordinates of your desired center. – geocodezip Aug 17 '13 at 18:43
  • Thanks. How would I do that? I want to offset the center to the left by 25% of the map width – alias51 Aug 17 '13 at 19:23
  • you have to calculate the desired offset in pixels then convert that to geographic coordinates – geocodezip Aug 17 '13 at 20:24
  • possible duplicate of [Google Maps API V3: Offset panTo() by x pixels](http://stackoverflow.com/questions/8146676/google-maps-api-v3-offset-panto-by-x-pixels) – mrooney Apr 11 '14 at 00:53

1 Answers1

4

An easier approach than the calculation suggested in the comments could be to:

  1. use panTo to center the map at the given position
  2. use panBy to apply the desired offset

The dimensions of a element may be retrieved via offsetWidth/offsetHeight

Sample:

google.maps.event.addListener(marker, 'click', function() {
  var map = this.getMap(),
      div = map.getDiv();
  map.panTo(this.getPosition());
  map.panBy(div.offsetWidth/4, div.offsetHeight/4);
});
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thanks; I follow this: getDiv gets the node but how does offsetWidth work? It's not in the API manual as far as I can see: https://developers.google.com/search/results?q=offsetWidth&p=%2Fmaps – alias51 Aug 18 '13 at 07:39
  • offsetWidth is not related to the Maps-API, it's a property of elements. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetWidth – Dr.Molle Aug 18 '13 at 11:13