Keep Google Map centered on resize

• rpk

• August 16, 2014 at 9:53 am

I’ve got a slight problem. I am running the google maps code from the acf documentation.

http://www.advancedcustomfields.com/resources/google-map/

Basically everthing works fine, the only problem is if resize the window responsively the map looses its center as well as markers get out of the visible map area. Is there a way to get it properly working. i’ve researched a bit on stackoverflow. the most cited suggestion was the following modified center_map function i came up with and tried:

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 );
	});
 
	// no marker
	if (map.markers.length == 0 ) {
      map.setCenter(new google.maps.LatLng(49.45203,11.07675));
      map.setZoom( 12 );
	}
        // only one marker
	else if( map.markers.length === 1 ) {
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}

  $(document).on('click', '.map', function() {
    google.maps.event.trigger(this.map, 'resize');
    map.setCenter( bounds.getCenter() );
    map.setZoom( 16 );
  });
}

But unfortunately it isn’t working. anyone has an idea how to keep the markers centered responsively? Best regards Ralf

• rpk

• August 16, 2014 at 7:27 pm

Would the following addition to the function make sense? At least it works but would there be a more elegant solution?

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 == 0 ) {
      map.setCenter(new google.maps.LatLng(49.45203,11.07675));
      map.setZoom( 12 );
	}
	else if( map.markers.length === 1 ) {
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}
  google.maps.event.addDomListener(window, "resize", function() {
      google.maps.event.trigger(map, "resize");
       map.setCenter( bounds.getCenter() );
  });
}

• Elliot

• September 3, 2014 at 10:20 am

Hi @rpk

Thanks for the code and feature request. I worry that adding a window resize event to each map would come at a JS performance hit.