Hi,
its shown in the Backend, but hidden in the portfolio itself…tried a lot, but no idea left 
Thanks for helping…
Hi @cyrock
I can see you have created the custom field correctly, that’s great. However, there is only one step left which is displaying the custom field data on the portfolio page. To do that you will have to setup child theme first by following this guide:
Then, on your parent X theme navigate to \x\framework\views\integrity and copy the file content-portfolio.php
And navigate to your child theme’s \x-child\framework\views\integrity directory (create it if it does not exist) and paste the copied file.
Inside this file, you can add this line:
<p><?php the_field('FIELD_NAME'); ?></p>
before:
<div class="entry-extra">
Of course, replace FIELD_NAME with your own custom field name which I believe is map in your case, this is enough to show the custom field data under portfolio content section.
Note: I assumed you are using Integrity stack in X theme, for sure you can apply similar steps if you are using Ethos for example.
For more information, please check “Displaying your Field” section on this article:
Thanks.
Hi, alaa
–> child theme was already installed. GoogleMapAPI is inserted in functions.php
And: Nope, this is not working properly. I tried a lot, but its only showing the result like on the screenshot.
I tried the same on my develope-server. With the same result.
LinkWatch
i don´t want to use the map on the Portfolio-Contentpage but in the single-portfoliopage.
Thanks for helping me out…
CyRock Christian
Hi,
Please use get_field instead the_field
eg.
<p><?php echo get_field('FIELD_NAME'); ?></p>
Thanks
(…) Hi!
Now it says array…
(…) everywhere i put it…
(…) Ok, no one of the support seems to take care about this…?! Problem still exists. So ACF is not usable with PRO!!!
Hi CyRock Christian,
Please avoid bumping your own thread because that will push the ticket back to the queue which will take longer to get a response.
As for the ACF Pro Google Map field, it is definitely working fine on Pro, you just have to use it correctly.
Firstly, in the single portfolio item file, use this code:
<?php
$location = get_field('location');
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; ?>
get_field() should work fine but please make sure to indicate the correct field name.
Once you’ve done that, you might see nothing on the page but when you inspect the code you will get something like this:
<div class="acf-map">
<div class="marker" data-lat="-37.79518105926923" data-lng="145.01203183105463"></div>
</div>
That is normal as you will have to add some custom Javascript code to have the map display on the page.
Please add this in the functions.php file of your child theme:
add_filter('wp_head', 'load_acf_maps_scripts');
function load_acf_maps_scripts() {
if ( is_singular( 'x-portfolio' ) ) {
?>
<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=YOU_MAP_KEY_HERE"></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 );
});
}
}
/*
* 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>
<?php
}
}
The code above will only load the necessary JS file required to display ACF Google Map field to the single portfolio pages.
Please make sure to add your API key in the code above:
<script src="https://maps.googleapis.com/maps/api/js?key=YOU_MAP_KEY_HERE"></script>
For more info about the Google Map setup for ACF Pro, please check this link:
Hope this helps.
Thanks a lot for this,
works fine!
best regards,
Cy.
1 Like