@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/
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
