Add Google Maps To Custom Page Template

[alexwright]

Hiya-

I know you all don’t support custom work, but I guess I’m giving this a shot. I’ve built custom templates that have geo latitude and longitude as custom field variables on the page. I’d like to have the template auto generate a map based on these variables. I’ve included the below code in the template (without the custom field variables yet, this is just for testing) and the div shows up but no map generates.


<section class="row fw-row ">
<div class="spb_gmaps_widget fullscreen-map spb_content_element col-sm-12 spb-full-width-element">
<div class="spb-asset-content">
<div class="spb_map_wrapper">
<div class="map-canvas" style="width:100%;height:300px;" data-center-lat="30.4993045" data-center-lng="-97.6172277" data-zoom="14" data-controls="yes" data-maptype="roadmap" data-mapcolor="" data-mapsaturation="color">
</div>
<div class="pin_location" data-title="First Pin" data-pinlink="" data-pinimage="" data-address="" data-content="This is a map pin. Click the edit button to change it." data-lat="30.4993045" data-lng="-97.6172277" data-button-text="" >
</div>
</div>
</div>
</div>
<div class="spb-fw-sizer"></div>
</section>


I’ve tried adding code from uplift > includes > meta-box > inc > fields > map.php with no success.

Any tips? If not, no worries + have a good day!

-Alex

[David Martin – Support]

Hi,

It would sound easier to simply use the supplied Maps page builder asset on the page. You can enter those items into the Page Builder maps asset.

You can pull in your custom custom fields using the get_post_meta function. Ref: https://developer.wordpress.org/reference/functions/get_post_meta/

[alexwright]

Thanks! I have no problem pulling in the custom fields via the get_post_meta() function. I’m trying to generate maps with a pin on ~100 pages based on a custom template with geo lat and long coordinate as supplied custom fields. So doing it manually for each page is what I’m trying to avoid.

Here’s the custom page template code. Any tips on getting the page to render the map? The divs to get rendered and all the custom fields are passed properly.

Thanks!


<?php
$location_name = get_post_meta( get_the_ID(), 'location_name', true );
$location_geo_latitude = get_post_meta( get_the_ID(), 'location_geo_latitude', true );
$location_geo_longitude = get_post_meta( get_the_ID(), 'location_geo_longitude', true );
?>

<?php while ( have_posts() ) : the_post(); ?>

<?php do_action( 'sf_page_content_before' ); ?>

<div class="content-divider-wrap container">
<div class="content-divider sf-elem-bb"></div>
</div>

<div class="inner-page-wrap row clearfix">

<?php get_sidebar('location'); ?>

<!-- OPEN page -->
<div class="col-sm-8 push-right clearfix">
<div class="page-content hfeed clearfix">
<div <?php post_class( 'clearfix' ); ?> id="<?php the_ID(); ?>">
<?php do_action( 'sf_page_content_start' ); ?>
<?php the_content(); ?>
<section class="row fw-row ">
<div class="spb_gmaps_widget fullscreen-map spb_content_element col-sm-12 spb-full-width-element">
<div class="spb-asset-content">
<div class="spb_map_wrapper">
<div class="map-canvas" style="width:100%;height:300px;" data-center-lat="<?php echo "$location_geo_latitude"; ?>" data-center-lng="<?php echo "$location_geo_longitude"; ?>" data-zoom="14" data-controls="yes" data-maptype="roadmap" data-mapcolor="" data-mapsaturation="color">
</div>
<div class="pin_location" data-title="First Pin" data-pinlink="" data-pinimage="" data-address="" data-content="<?php echo "$location_name"; ?>" data-lat="<?php echo "$location_geo_latitude"; ?>" data-lng="<?php echo "$location_geo_longitude"; ?>" data-button-text="" >
</div>
</div>
</div>
</div>
<div class="spb-fw-sizer"></div>
</section>
</div>
</div>
<!-- CLOSE page -->
</div>
</div>

<?php do_action( 'sf_page_content_after' ); ?>

<?php endwhile; ?>


[David Martin – Support]

I would advise you to work with a developer in this instance.

What is your URL?

[alexwright]

You helped me a lot. Thanks. I didn’t think of doing it this way but this is what works and I think what you were getting at:


<?php echo do_shortcode( ' [spb_gmaps size="300" type="roadmap" map_center_latitude="' . $location_geo_latitude . '" map_center_longitude="' . $location_geo_longitude . '" zoom="15" map_controls="yes" advanced_styling="no" saturation="color" fullscreen="yes" width="1/1" el_position="first last"] [spb_map_pin pin_title="' . $location_name . '" pin_latitude="' . $location_geo_latitude . '" pin_longitude="' . $location_geo_longitude . '" width="1/1" el_position="first last"] [/spb_map_pin] [/spb_gmaps] ' ); ?>


Thanks for pointing me in the right direction!

-Alex

[David Martin – Support]

You did it all not me! – Glad you got it working.

Cheers,
David.