Offsetting the centre point of a Google Map

• alexstanhope

• February 7, 2015 at 9:10 pm

Hi Elliot and the big ACF family out there,

I’ve got a little query about the Google Maps Field; I’ve been using the sample code to centre a map generated through ACF (shown below), but given the presence of certain UI elements on the page, I’d like to change the vertical offset of the marker by approximately 70 pixels downwards.

I can use the panBy feature in the Google Maps API just fine, but the kicker is trying to keep the marker centred when zooming, and so far, I have drawn a blank.

If anyone’s got any ideas on the best way to achieve this, I’d be enormously grateful!

Thanks in advance for any help with this.

Alex

—

function center_map( map ) {

	// vars
	var bounds = new google.maps.LatLngBounds();

	// loop through all markers and create bounds
	$.each( map.markers, function( i, marker ){

		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

		bounds.extend( latlng );

	});

	// only 1 marker?
	if( map.markers.length == 1 )
	{
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 14 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}

}

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