Google Maps API Javascript in Wordpress

Question

Hope you guys can answer this question! I'm thinking it should be relatively easy but I just can't seem to get to grips with it.

How do you go about loading the Google Maps API Javascript within a Wordpress post/page?

The Wordpress Codex would seem to suggest that having referred to your javascript file in the header of your theme you then need to call the functions within the post.

I've referred to the Google Javascript files in the header as follows:

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

and then to my javascript file with all the API code in the header too:

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js"></script>

I've then used the following code in the post:

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js">
</script>
<script type="text/javascript">
</script>
<div id="map-canvas">
</div>

But this just creates an empty box. I've tried calling the predefined Google JS functions within the post but this doesn't appear to have worked either.

Is there anybody implementing Google Maps on Wordpress that has already done this? I can paste all the code directly into the post but the Google Map comes out full of bugs.

Any ideas would be greatly appreciated! Many thanks.

Answer 1

With WordPress you should never hard code js into the header or footer. Instead use wp_enqueue_script inside a function hooked into the wp_enqueue_scripts action in functions.php. For example:

function add_scripts() {
  wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false');
  wp_enqueue_script('google-jsapi','https://www.google.com/jsapi');     
}
add_action('wp_enqueue_scripts', 'add_scripts')

You would want to prefix the function name with a unique slug. You could add dependencies version numbers or move it to the footer with additional variables, see the codex for more info. In your case you probably want to wrap wp_enqueue_script in a conditional so it only loads on the posts or pages you need it for.