Categories
JavaScript Answers

How to offset the center point in Google Maps API V3 and JavaScript?

Spread the love

Sometimes, we want to offset the center point in Google Maps API V3 and JavaScript.

In this article, we’ll look at how to offset the center point in Google Maps API V3 and JavaScript.

How to offset the center point in Google Maps API V3 and JavaScript?

To offset the center point in Google Maps API V3 and JavaScript, we can use the panTo method.

For instance, we write

const offsetX = 0.25;
const offsetY = 0.25;

const span = map.getBounds().toSpan();

const newCenter = {
  lat: center.lat() + span.lat() * offsetY,
  lng: center.lng() + span.lng() * offsetX,
};

map.panTo(newCenter);

to get the latitude and longitude from center with lat and lng respectively.

Then we set the new lat and lng in the newCenter object.

Next, we call panTo with newCenter to pan the map to the new center coordinates.

Conclusion

To offset the center point in Google Maps API V3 and JavaScript, we can use the panTo method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *