Support

Account

Home Forums General Issues Offsetting the centre point of a Google Map

Helping

Offsetting the centre point of a Google Map

  • 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 );
    	}
    
    }
  • 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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.