Google maps field doc section

• VoiD2008

• August 30, 2014 at 3:05 am

Hi there, I guess it would be better to change a bit your documentation about placing google map using google-map-field.
Declaring global map var will help interacting map object after rendering

edited code:

<style type="text/css">
.acf-map {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var acf_map;
(function($) {
/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/
  function render_map( $el ) {
	// var
	var $markers = $el.find('.marker');
	// vars
	var args = {
		zoom		: 16,
		center		: new google.maps.LatLng(0, 0),
		mapTypeId	: google.maps.MapTypeId.ROADMAP
	};
	
	// create map	        	
	var newmap = new google.maps.Map( $el[0], args);

	// add a markers reference
	newmap.markers = [];

	// add markers
	$markers.each(function(){
    	    add_marker( $(this), newmap );
	});

	// center map
	center_map( newmap );
	
	if (map!==undefined&&Object.prototype.toString.call( map ) !== '[object Array]') {
		var map_ = map;
		map = Array();
		map.push(map_);
		map.push(newmap)
	} else 
		if (Object.prototype.toString.call( map ) === '[object Array]') 
			map.push(newmap); 
		else 
			map = newmap;
  }

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/

  function add_marker( $marker, map ) {
	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});

	// add to array
	map.markers.push( marker );

	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// create info window
		var infowindow = new google.maps.InfoWindow({
			content		: $marker.html()
		});

		// show info window when marker is clicked
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open( map, marker );
		});
	}
  }

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/

  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( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}
  }

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type	function
*  @date	8/11/2013
*  @since	5.0.0
*
*  @param	n/a
*  @return	n/a
*/

  $(document).ready(function(){
	$('.acf-map').each(function(){
		render_map( $(this) );
	});
  });
})(jQuery);
</script>

changed this block
var acf_map;
(function($) {

/*
* render_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $el (jQuery element)
* @return n/a
*/

function render_map( $el ) {

// var
var $markers = $el.find(‘.marker’);

// vars
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};

// create map
var newmap = new google.maps.Map( $el[0], args);

// add a markers reference
newmap.markers = [];

// add markers
$markers.each(function(){
add_marker( $(this), newmap );
});

// center map
center_map( newmap );

if (acf_map!==undefined&&Object.prototype.toString.call(acf_map) !== ‘[object Array]’) {
var map_ = acf_map;
acf_map = Array();
acf_map.push(map_);
acf_map.push(newmap)
} else
if (Object.prototype.toString.call( acf_map ) === ‘[object Array]’)
acf_map.push(newmap);
else
acf_map = newmap;
}

so you can interact map object after initializing using for example acf_map.setOptions()

If you have more than one map on the page, acf_map variable will become array with your map objects

• CodeFish

• November 20, 2015 at 9:39 pm

Hi,

we recently released a plugin extending ACF Google Map field functionality with some useful features – ACF Google Map Extended.

It creates a global variable, which you can use to change Google Map behavior to your needs.

The plugin is also backward compatible with the data format of the original ACF Google Map field.

Best wishes,
CodeFish team