Title: Timber and Google Maps Plugin
Last modified: July 11, 2018

---

# Timber and Google Maps Plugin

 *  [breadhouse](https://wordpress.org/support/users/breadhouse/)
 * (@breadhouse)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/timber-and-google-maps-plugin/)
 * We built a Timber-based site for a client but have caught a snag in development.
   Could use assistance (paid hourly!)!
 * Our site allows users to post properties (via Advanced Custom Field) to site.
   Posts incorporate location (via Google Maps API).
 * However, when posting, we can’t seem to link/display property location via Google
   Maps API (which we tried through a few Google PAI plugins, with no effect). Note
   Google Maps feature was installed through a Jquery Plugin.
 * If you are familiar with Timber and it’s TWIG format files please get in touch.
   Could use Timber experts!

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

 *  [JakeJ](https://wordpress.org/support/users/jakepwa/)
 * (@jakepwa)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/timber-and-google-maps-plugin/#post-10513864)
 * [@breadhouse](https://wordpress.org/support/users/breadhouse/)
 * I am very familiar with Timber/Twig. I actually have started “giving back: to
   the project due to the fact I “love” this template framework. So I will be willing
   to assist, no need to pay. You can usually post your issues or for help in the
   GitHub repository also.
 * I have a personal project I have been working on for a while, I have incorporated
   the Google Maps API, but opted for direct code instead of a plugin, was to resource
   intensive. So if you are still having the issue, let me know and I will be more
   than happy to share the code.
 *  Thread Starter [breadhouse](https://wordpress.org/support/users/breadhouse/)
 * (@breadhouse)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/timber-and-google-maps-plugin/#post-10619868)
 * Hi Jake. Awesome. Let’s talk!
 * Email
    [andy@breadhou.se](https://wordpress.org/support/topic/timber-and-google-maps-plugin/andy@breadhou.se?output_format=md)
 *  [JakeJ](https://wordpress.org/support/users/jakepwa/)
 * (@jakepwa)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/timber-and-google-maps-plugin/#post-10622388)
 * [@breadhouse](https://wordpress.org/support/users/breadhouse/)
 * Thanks for getting back, was wondering if you go it solved.
 * First off when using the map feature of ACF you do not need any map plugin, the
   jQuery already in WordPress will suffice. That is what you should be using. ACF
   has an excellent guide for the integration of that field and that is here:
 * [https://www.advancedcustomfields.com/resources/google-map/](https://www.advancedcustomfields.com/resources/google-map/)
 * Based upon that I built the integration.
 * The custom post type in my case was venue. So I created in ACF the following 
   fields: Label/Field Name
    Venue Name/venue_name Venue Address/venue_address Venue
   City/venue_city Venue State/venue_state Venue Zip/venue_zip Map/map –This is 
   a special ACF Field
 * Then in the file single-venue.php I added the function, scripts, and css for 
   the map as per ACF instructions. You can add the function to functions.php, if
   desired, but in my case I opted by the file so the scripts were only loaded on
   the pages necessary (Keep the home page fast).
 * single.php
 *     ```
       function my_acf_google_map_api( $api ){
   
                   $api['key'] = 'YOUR API CODE';
   
                   return $api;
   
               }
               add_filter('acf/fields/google_map/api', 'my_acf_google_map_api'); 
               ?>
   
   
       <style type="text/css">
   
       .acf-map {
       	width: 100%;
       	height: 400px;
       	border: #ccc solid 1px;
       	margin: 20px 0;
       }
   
       /* fixes potential theme css conflict */
       .acf-map img {
          max-width: inherit !important;
       }
   
       </style>
   
       <script src="https://maps.googleapis.com/maps/api/js?key=YOUR API CODE"></script>
       <script type="text/javascript">
       (function($) {
   
       /*
       *  new_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 new_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 );
   
   
       	// return
       	return 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 );
   
       		});
       google.maps.event.addListenerOnce(map, 'tilesloaded', 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
       */
       // global var
       var map = null;
   
       $(document).ready(function(){
   
       	$('.acf-map').each(function(){
   
       		// create map
       		map = new_map( $(this) );
   
       	});
   
       });
   
       })(jQuery);
       </script>
   
       $context = Timber::get_context();
       		$context['single_venue'] = new TimberPost(); // It's a new TimberPost object, but an existing post from WordPress.
       		$html = Timber::compile('single-venue.twig', $context, 6000);
       		echo $html;//Since once the listing was made, I compiled the template and results saved them to a variable. I also put a 6000 second cache on it - since it will probably not change for a bit.
       ```
   
 * Then in the template file of single-venue.twig:
 *     ```
       {# Set up a conditional to make sure an address was entered before rendering #}
       {% if single_venue.map.address %}
   
       {# Setup a link for the user to click on to go to Google Maps for directions #}
       <strong><a href="https://www.google.com/maps/search/?api=1&query={{single_venue.map.address | url_encode}}" target="_blank">Open in Google Maps</a></strong>
   
       {# call the map #}
       <div class="acf-map">
   
       {# populate the marker at the lat/lng and put the name and address on the marker #)
       <div class="marker" data-lat="{{single_venue.map.lat}}" data-lng="{{single_venue.map.lng}}"><center><b>{{ single_venue.venue_name }}</b><br>{{ single_venue.venue_address ~ ", " ~single_venue.venue_city ~ ", " ~ " " ~ single_venue.venue_state ~ " " ~ single_venue.venue_zip}}</center>
       </div>
       </div>
       {% endif %}
       ```
   
 * Once you know how to pull the variables from $context, it becomes a breeze, even
   when using 3rd party plugins such as ACF. In fact, in the newer model, I am actually
   using the address from the map field to populate the ACF address fields (DRY).
 * If you have any additional questions do not hesitate to ask.
 * Jake

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

The topic ‘Timber and Google Maps Plugin’ is closed to new replies.

 * ![](https://ps.w.org/timber-library/assets/icon-256x256.png?rev=1482054)
 * [Timber](https://wordpress.org/plugins/timber-library/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/timber-library/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/timber-library/)
 * [Active Topics](https://wordpress.org/support/plugin/timber-library/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/timber-library/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/timber-library/reviews/)

## Tags

 * [googlemaps](https://wordpress.org/support/topic-tag/googlemaps/)

 * 3 replies
 * 2 participants
 * Last reply from: [JakeJ](https://wordpress.org/support/users/jakepwa/)
 * Last activity: [7 years, 8 months ago](https://wordpress.org/support/topic/timber-and-google-maps-plugin/#post-10622388)
 * Status: not resolved