CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
alias51
alias51

Reputation: 8628

How to offset panTo in google maps

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

Upvotes: 1

Views: 2484

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117344

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);
});

Upvotes: 5

Related Questions