google map change offsetCenter on page width

Question

I am trying to make a this design my code is not working as i expect .. if the old width is bigger than the new width and offset Center -50 and if the old width is smaller than the new width and offset Center 50

the offset Center works with out the if but that means the if the user resizes the window the offset Center will be 50 or -50 every time the user resizes

the rectangles on the map is for covering the names only 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>

what i wont is a responsive virgin of How to offset the center point in Google maps api V3

please can someone help

You requirement is not clear. Are you trying to center lock the geo location `{lat: 25.26393, lng: 55.386004}` ? — Diode, Feb 12 '17 at 10:57
I wont the marker to be on the right side when the page loads and and if resized — Moaz Mabrok, Feb 12 '17 at 11:02
the responsive virgin of http://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3@ Diode — Moaz Mabrok, Feb 12 '17 at 11:13

Diode · Accepted Answer · 2017-02-12T11:40:54.877

From what I understood, I think that it is something that can be achieved using setCenter, panTo and panBy methods.

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

}

You can adjust -170 to get the desired position.

Demo here : https://jsbin.com/fasawofofa/1/edit?html,output

yes great ,but how to set it to center if the page width is under 671px; @Diode — Moaz Mabrok, Feb 12 '17 at 11:33
I have added a condition for that. Please see the new answer — Diode, Feb 12 '17 at 11:41

google map change offsetCenter on page width

1 Answers1