Struggling to implement a design using my code, but it's not behaving as expected. When the old width is larger than the new width, the offset Center should be -50. And when the old width is smaller, the offset Center should be 50.
The offset Center works without the need for "if" statements, but this means the offset will be fixed at 50 or -50 whenever the user resizes the window.
The rectangles on the map are only meant to cover the names.
htmlCSS
#map{
width: 100%;
height: 400px;
}
JS
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=initMap">
</script>
<script>
function oh_ow() {
var oh = $(window).height();
var ow = $(window).width();
return ow;
}
var old_w = oh_ow()
alert(old_w );
alert(ow);
function initMap() {
var uluru = {lat: 62.26393, lng: 82.386004};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
function offsetCenter(latlng, offsetx, offsety) {
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);
}
google.maps.event.addDomListener(window, 'resize', function() {
//---------------------------------------------
var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
var nh = $(window).height();
var nw = $(window).width();
if(nw > old_w){
offsetCenter(map.getCenter(),50,-0);
}else if(nw < old_w){
offsetCenter(map.getCenter(),-50,-0);
}
}
}
//---------------------------------------------
});
}
</script>
Looking for a responsive version of How to offset the center point in Google maps api V3
Your help would be greatly appreciated.