Google offsetCenter изменить карту по ширине страницы

Question

Я пытаюсь сделать это design мой код не работает, как я ожидал .. если старая ширина больше, чем новая ширина и центр -50 смещения и если старый ширина меньше, чем новая ширина и смещение центра 50

смещение центра работает с вне если , но это означает, что если пользователь изменяет размер окна смещение центра будет 50 или -50 каждый раз, когда пользователь изменяет размер

прямоугольник эс на карте для покрытия только название HTML

Css

#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) { 

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

} 

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(); 
      //alert("old"+old_w); 
      //alert("new"+nw); 
     if(nw > old_w){ 
      offsetCenter(map.getCenter(),50,-0); 
     }else if(nw < old_w){ 
      offsetCenter(map.getCenter(),-50,-0); 
     } 


    }    
}  
//---------------------------------------------  
}); 





} 



</script> 

, что я не буду это отзывчивым дева How to offset the center point in Google maps api V3

пожалуйста может кто-то Помощь

Answer 1

Из того, что я понял, я думаю, что это может быть достигнуто с помощью методов setCenter, panTo и panBy.

function initMap() { 
    var uluru = { 
    lat: 25.26393, 
    lng: 55.386004 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 16, 
    center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map 
    }); 

    var winWidth = $(window).width(); 
    panMap(); 

    $(window).resize(function() { 
    map.setCenter(uluru); 
    panMap(); 
    }); 

    google.maps.event.addListener(map, 'zoom_changed', function() { 
    map.panTo(uluru); 
    panMap(); 
    }); 

    function panMap(xChange){ 
    var winWidth = $(window).width(); 
    if(winWidth > 671){ 
     map.panBy(xChange || -170, 0); 
    } 
    } 

} 

Вы можете отрегулировать -170, чтобы получить нужную позицию.

Демо-версия: https://jsbin.com/fasawofofa/1/edit?html,output