Title: [Plugin: Advanced Custom Fields] Google map doesn't load
Last modified: August 30, 2016

---

# [Plugin: Advanced Custom Fields] Google map doesn't load

 *  [Jeveloper](https://wordpress.org/support/users/jeveloper/)
 * (@jeveloper)
 * [11 years ago](https://wordpress.org/support/topic/plugin-advanced-custom-fields-2/)
 * I am trying to use google map custom field for my posts, I set up marker and 
   publish an article but the map doesn’t show up however div is create because 
   I can see the whitespace
 * in my functions.php file:
 *     ```
       if(function_exists("register_field_group"))
       {
       	register_field_group(array (
       		'id' => 'acf_mapa',
       		'title' => 'Mapa',
       		'fields' => array (
       			array (
       				'key' => 'field_55c8a94c36b47',
       				'label' => '',
       				'name' => 'mapa',
       				'type' => 'google_map',
       				'center_lat' => '48.6724821',
       				'center_lng' => '19.696058',
       				'zoom' => '7',
       				'height' => '250',
       			),
       		),
       		'location' => array (
       			array (
       				array (
       					'param' => 'post_type',
       					'operator' => '==',
       					'value' => 'post',
       					'order_no' => 0,
       					'group_no' => 0,
       				),
       			),
       		),
       		'options' => array (
       			'position' => '',
       			'layout' => 'wp_box',
       			'hide_on_screen' => array (
       			),
       		),
       		'menu_order' => 0,
       	));
   
       }
   
       	function theme_add_scripts() {
       		wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
       		wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/google-map.js', array('google-map', 'jquery'), '0.1', true );
       	}
   
       	add_action( 'wp_enqueue_scripts', 'theme_add_scripts' );if(function_exists("register_field_group"))
       {
       	register_field_group(array (
       		'id' => 'acf_mapa',
       		'title' => 'Mapa',
       		'fields' => array (
       			array (
       				'key' => 'field_55c8a94c36b47',
       				'label' => '',
       				'name' => 'mapa',
       				'type' => 'google_map',
       				'center_lat' => '48.6724821',
       				'center_lng' => '19.696058',
       				'zoom' => '7',
       				'height' => '250',
       			),
       		),
       		'location' => array (
       			array (
       				array (
       					'param' => 'post_type',
       					'operator' => '==',
       					'value' => 'post',
       					'order_no' => 0,
       					'group_no' => 0,
       				),
       			),
       		),
       		'options' => array (
       			'position' => '',
       			'layout' => 'wp_box',
       			'hide_on_screen' => array (
       			),
       		),
       		'menu_order' => 0,
       	));
   
       }
   
       	function theme_add_scripts() {
       		wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
       		wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/google-map.js', array('google-map', 'jquery'), '0.1', true );
       	}
   
       	add_action( 'wp_enqueue_scripts', 'theme_add_scripts' );
       ```
   
 * in my js file:
 *     ```
       (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 map = new google.maps.Map( $el[0], args);
   
       	// add a markers reference
       	map.markers = [];
   
       	// add markers
       	$markers.each(function(){
   
           	add_marker( $(this), map );
   
       	});
   
       	// center map
       	center_map( map );
   
       }
   
       /*
       *  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);
       ```
   
 * in the loop:
 *     ```
       <?php 
   
       	$location = get_field('mapa');
   
       	if( ! empty($location) ):
   
       	?>
   
       	<div class="acf-map">
   
       	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
   
       	</div>
   
       	<?php endif; ?>
       ```
   

Viewing 1 replies (of 1 total)

 *  Thread Starter [Jeveloper](https://wordpress.org/support/users/jeveloper/)
 * (@jeveloper)
 * [11 years ago](https://wordpress.org/support/topic/plugin-advanced-custom-fields-2/#post-6418123)
 * bump

Viewing 1 replies (of 1 total)

The topic ‘[Plugin: Advanced Custom Fields] Google map doesn't load’ is closed to
new replies.

## Tags

 * [ACF](https://wordpress.org/support/topic-tag/acf/)
 * [advanced custom field](https://wordpress.org/support/topic-tag/advanced-custom-field/)

 * 1 reply
 * 1 participant
 * Last reply from: [Jeveloper](https://wordpress.org/support/users/jeveloper/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/plugin-advanced-custom-fields-2/#post-6418123)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics