Title: Adding Google Maps API to WordPress After Enqueue
Last modified: August 30, 2016

---

# Adding Google Maps API to WordPress After Enqueue

 *  Resolved [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/)
 * Hey all! I have successfully enqueue my google maps api and javascript code to
   my front page using this code in my functions.php:
    function google_maps_api(){
   wp_register_script( ‘googlemap’, ‘[https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap&#8217](https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap&#8217);,
   true); wp_register_script( ‘map-script’, ‘/js/map_script.js’,true); if( is_page(‘
   To the Nations Worldwide’ ) ) { wp_enqueue_script(‘googlemap’); } if( is_page(‘
   To the Nations Worldwide’ ) ) { wp_enqueue_script(‘map-script’); } } add_action(‘
   wp_enqueue_scripts’, ‘google_maps_api’ );
 * Using this code makes my API key and Javascript code map_script.js show up in
   the page source of my home page at [http://www.tothenationsworldwide.com](http://www.tothenationsworldwide.com)
   and not on any other pages.
 * However, what do I need to do next to show my map on this page?
 * Thanks for any help you can provide!

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792712)
 * Should I add in the CSS
 * #map{
    height: 100% }
 * And a <div id=”map”></div> onto my page?
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792730)
 * enqueue script fixed to add uri so the map_script.js shows in the page source
   when you click on it, but still no map…
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792731)
 * The order is wrong:
 *     ```
       <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap&ver=4.3.1'></script>
       <script type='text/javascript' src='http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1'></script>
       ```
   
 * See, the first script uses a callback that is only defined in the second script.
   So it is never going to be available. Also Google recommends you use the async
   attribute on the map api.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792732)
 * Thanks for the input. Okay I have the order like this on my page:
 *  <script async defer src=”[https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap”></script&gt](https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap”></script&gt);
   
   <script type=”text/javascript” src=”[http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1″></script&gt](http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1″></script&gt);
   <div id=”map”></div>
 * and in my CSS
 *  #map{
    height: 80%; }
 * and the code on my first post in my functions.php plus the revision with the 
   uri
 * But still not showing the map. There is an extra space after the page’s title
   though.
 * Any advice?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792733)
 * To absolutely make sure that it not an issue with the order, reverse the order
   of the two scripts.
 * The script that calls this:
 *     ```
       callback=initMap
       ```
   
 * Should be loaded _after_ the script that defines it.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792734)
 * Reverse the order of the scripts on the page? So the API key comes after the .
   js file with my javascript code? I tried, but still not showing.
 * Thanks for the help so far, this has taken me too long.
 * Any other suggestions?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792735)
 * > So the API key comes after the .js file with my javascript code?
 * Yes, like this:
 *     ```
       <script type='text/javascript' src='http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1'></script>
       <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap&ver=4.3.1'></script>
       ```
   
 * > Thanks for the help so far, this has taken me too long.
 * Are you using the browser’s console to debug JS? That can help understand issues
   better when developing with JavaScript.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792736)
 * Check in the source code for “callback=initmap” to see if your reverse changes
   have worked.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792737)
 * If I rearrange the scripts on the page, they are rearranged in the page content.
   They also show up before they show up in the page content because I used the 
   enqueue code in my functions.php and it has the API key first and map_script.
   js afterwards. If this makes sense…In my page source, the API key shows twice
   and the javascript file shows twice because I am enqueueing them and adding them
   to my page.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792738)
 * I finally got it by changing the CSS
    thanks for your help!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792739)
 * > I used the enqueue code in my functions.php and it has the API key first and
   > map_script.js afterwards.
 * They don’t necessarily enqueue in the order they appear in the functions.php 
   file. A more consistent and accurate way to order them is by using making one
   a dependency of the other, see the `$deps` parameter documentation: [https://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters](https://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters)
 * For example, you have this maps API script:
 *     ```
       wp_enqueue_script( 'google-maps-api', 'path-to-file', array(), '1.0.0', true );
       ```
   
 * And you want to then enqueue your ‘map_script’ file that depends on the ‘google-
   maps-api’ file, you’d use this:
 *     ```
       wp_enqueue_script( 'maps-script', 'path-to-file', array('google-maps-api'), '1.0.0', true );
       ```
   
 * The duplicated Map API scripts also might cause problems for you. I’m not sure
   you need to call the Google Maps API library script more than once.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792741)
 * Oh okay, I see. Thanks for the heads up!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Adding Google Maps API to WordPress After Enqueue’ is closed to new replies.

## Tags

 * [api](https://wordpress.org/support/topic-tag/api/)
 * [invalid](https://wordpress.org/support/topic-tag/invalid/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 12 replies
 * 2 participants
 * Last reply from: [plet9090](https://wordpress.org/support/users/plet9090/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/adding-google-maps-api-to-wordpress-after-enqueue/#post-6792741)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics