google maps: recenter a map
See:http://stackoverflow.com/questions/14285251/google-maps-redefine-center-point-fit-bounds-to-specific-area/14285910#14285910
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="map_canvas"></div>
<script>
var mapEl = document.getElementById('map_canvas');
var map;
var mapHeight = 200;
var mapWidth = 500;
var mapZoom = 10;
var mapCenter = [47.376887, 8.541694];
mapEl.style.width = mapWidth + 'px';
mapEl.style.height = mapHeight + 'px';
var sphericalmercator = new SphericalMercator();
var ll0 = sphericalmercator.ll([0, 0], mapZoom);
var ll1 = sphericalmercator.ll([mapWidth, mapHeight], mapZoom);
var latDelta = Math.abs(ll0[1] - ll1[1]);
var lngDelta = Math.abs(ll0[0] - ll1[0]);
var south = mapCenter[0] - latDelta / 2
var north = mapCenter[0] + latDelta / 2
var west = mapCenter[1] - lngDelta / 2
var east = mapCenter[1] + lngDelta / 2;
var marker1 = [north, west];
var marker2 = [south, east];
function initialize() {
var mapOptions = {
zoom: mapZoom,
center: new google.maps.LatLng(mapCenter[0], mapCenter[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker1[0], marker1[1])
});
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker2[0], marker2[1])
})
setTimeout(() => {
console.log(map.getBounds().toJSON())
console.log({south, west, north, east})
}, 500)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>