Support

Account

Home Forums ACF PRO Keep Google Map centered on resize

Solving

Keep Google Map centered on resize

  • 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

  • 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() );
      });
    }
  • 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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.