How to offset the center point in Google maps api V3
This is not particularly difficult once you find the relevant previous answer.
You need to convert the centre of the map to its world co-ordinates, find where the map needs to be centered to put the apparent centre where you want it, and re-centre the map using the real centre.
The API will always centre the map on the centre of the viewport, so you need to be careful if you use map.getCenter()
as it will return the real centre, not the apparent centre. I suppose it would be possible to overload the API so that its getCenter()
and setCenter()
methods are replaced, but I haven't done that.
Code below. Example online. In the example, clicking the button shifts the centre of the map (there's a road junction there) down 100px and left 200px.
function offsetCenter(latlng, offsetx, offsety) {
// latlng is the apparent centre-point
// offsetx is the distance you want that point to move to the right, in pixels
// offsety is the distance you want that point to move upwards, in pixels
// offset can be negative
// offsetx and offsety are both optional
var scale = Math.pow(2, map.getZoom());
var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);
var worldCoordinateNewCenter = new google.maps.Point(
worldCoordinateCenter.x - pixelOffset.x,
worldCoordinateCenter.y + pixelOffset.y
);
var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
map.setCenter(newCenter);
}
How to offset the center of a Google maps (API v3) in pixels?
Found this question when researching and thought I should provide an answer:
function map_recenter(latlng,offsetx,offsety) {
var point1 = map.getProjection().fromLatLngToPoint(
(latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
);
var point2 = new google.maps.Point(
( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
);
map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
point1.x - point2.x,
point1.y + point2.y
)));
}
If your Google maps variable isn't map
use the following call function reference:
function map_recenter(map,latlng,offsetx,offsety) { ...
Google Maps Api: set center of the map to an offset in pixels?
call the panBy-method of the map
mapObject.panBy(0,30)
Display Google Map off center
This is a solution for the current case, but won't set the center to get the desired view when zoom changes. If you want more elegant solution, you can reset the center after each zoom_changed event with a formula including zoom value.
...
var myMarker = new google.maps.Marker({ position: latlng, map: map });
var offsetLat = -0.02;
var offsetLng = -0.02;
map.setCenter(new google.maps.LatLng((map.getCenter().lat() + offsetLat) , (map.getCenter().lng() + offsetLng)));
} else {
...
In google maps API is it possible to center the map 25% above a point?
Try this:
Take the height of the plugin and get 25% of that.
Then you need to multiply that by the degrees or kilometres per pixel scale at that height (if you can't get it straight from the plugin then I guess do the math), then centre the screen at that point on the globe.
Related Topics
How to Get the Day of Week and the Month of the Year
How to Break a String Across More Than One Line of Code in JavaScript
How to Toggle an Element's Class in Pure JavaScript
JavaScript - How to Extract Filename from a File Input Control
Set Additional Data to Highcharts Series
Jquery (Or Pure Js) Simulate Enter Key Pressed for Testing
Jquery Selector for Id Starts with Specific Text
Invalid Hook Call. Hooks Can Only Be Called Inside of the Body of a Function Component
What's the Cause of the Error 'Getaddrinfo Eai_Again'
How to Change the Content of a <Textarea> with JavaScript
Javascript: Which Browsers Support Parsing of Iso-8601 Date String with Date.Parse
Ajax Mailchimp Signup Form Integration
Three.Js Generate Uv Coordinate
What Does the @ Mean Inside an Import Path
Adding Console.Log to Every Function Automatically