Reply To: Offsetting the centre point of a Google Map

• James

• June 6, 2016 at 6:38 pm

Hi @alexstanhope,

Thanks for the post.

I believe you can resize the map via jQuery after the map is loaded and then change the size of the canvas to the specific vertical offset that your require.

The resize event code would look like so:

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

The style would look like so:

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}