Posting this is my last resort; I have read the documentation, searched the forums and Googled extensively but I am still missing something…
I have created a set of Custom Fields for a restaurant page and they are working beautifully, I just can’t get my Google Map to display. I am using a Magazine Pro child theme on the Genesis framework.
I have created it in the back-end successfully with a Field Label of ‘Location’ and a Field Name of ‘restaurant_googlemap’. I have then gone into a Post and selected the location – all good so far.
What I am struggling with is what code to add where to get the map to display. Where does the CSS/JS need to go? Everytime I add the code from the documentation to my function.php page I save it and the website white screens when I refresh.
The existing code for the other fields is shown below and the page I want the map to display on is here: http://teasandkeys.com/restaurants/atomic-pizza
This is the final piece in the puzzle in this website development and I would be really grateful for any help. Thank you!
//* [All Restaurant pages] Function to display values of custom fields (if not empty)
function sk_display_custom_fields() {
$restaurant_address = get_field( 'restaurant_address' );
$restaurant_website = get_field( 'restaurant_website' );
$restaurant_rating = get_field( 'restaurant_rating' );
$restaurant_phone = get_field( 'restaurant_phone' );
$restaurant_twitter = get_field( 'restaurant_twitter' );
$restaurant_facebook = get_field( 'restaurant_facebook' );
$restaurant_bittensays = get_field( 'restaurant_bittensays' );
if ( $restaurant_address || $restaurant_website || $restaurant_rating || $restaurant_phone || $restaurant_twitter || $restaurant_facebook || $restaurant_bittensays ) {
echo '<div class="restaurant-meta">';
if ( $restaurant_address ) {
echo '<p><strong>Address</strong>: <br />' . $restaurant_address . '</p>';
}
if ( $restaurant_website ) {
echo '<p><strong>Website</strong>: ' . $restaurant_website . '</p>';
}
if ( $restaurant_rating ) {
echo '<p><strong>Rating</strong>: ' . $restaurant_rating . '</p>';
}
if ( $restaurant_phone ) {
echo '<p><strong>Phone</strong>: ' . $restaurant_phone . '</p>';
}
if ( $restaurant_twitter ) {
echo '<p><strong>Twitter</strong>: ' . $restaurant_twitter . '</p>';
}
if ( $restaurant_facebook ) {
echo '<p><strong>Facebook</strong>: ' . $restaurant_facebook . '</p>';
}
if ( $restaurant_bittensays ) {
echo '<p><strong>Bitten Says</strong>: ' . $restaurant_bittensays . '</p>';
}
}
}
I think you can add this code in your function.
$location = get_field('location');
if( !empty($location) ){
echo '<div class="acf-map">
<div class="marker" data-lat="'.$location['lat'].'" data-lng="'.$location['lng'].'"></div>
</div>';
}
Then with regards to your script and styles you can add it using wp_enqueue_script() a wordpress core function on adding css and js.
Source for ACF Google Map: http://www.advancedcustomfields.com/resources/google-map/
Source for WP Enqueue Script: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Thats it definitely you can display the map on the frontend.
Thanks for the reply but I have already tried the code from the support resources. I am looking for help on the forums as I have already tried everything suggested and need advice.
I did try that code and its working fine on my part.
CSS
.acf-map {
width: 100%;
height: 400px;
border: 1px solid #80d3f1;
margin: 20px 0;
}
.acf-map .gmnoprint img {
max-width: none;
}
JS
`jQuery(‘.acf-map’).each(function () {
render_map($(this));
});`
HTML / PHP
`function get_location_map($loc) {
$str_ret =”;
$str_ret .='<div class=”acf-map”>’;
$str_ret .='<div class=”marker” data-lat=”‘.$loc[‘lat’].'” data-lng=”‘.$loc[‘lng’].'”></div>’;
$str_ret .='</div>’;
return $str_ret;
}`
$loc = will be your google map field.
USE FUNCTION
echo get_location_map(get_field('map'));
test.png.png