4

I was wondering if someone could help me out. I am currently trying to set up the google maps Javascript API to work with wordpress on a localhost but i have had no luck. Please find my steps below.

-Step 1: I went to the Google Developer API Manager and enable an api for Google Maps Javascript API.

-Step 2: I generated an API Key.

-Step 3: I enqued the maps Javascript API like so and included the API key where it says key={MY API KEY} :

 if ( ! function_exists( 'foundationpress_scripts' ) ) : function foundationpress_scripts() { //Load Google Maps API wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key={MY API KEY}' ); //Load custom JS script wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/assets/javascript/custom/custom-scripts.js', array(), '1.0.0', true ); // Add the comment-reply library on pages where it is necessary if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'foundationpress_scripts' ); endif;

-Step 4: I created a custom-scripts.js file and loaded to the directory i enqued it to.

-Step 5: I added 

 var map; function initMap() { map = new google.maps.Map(document.getElementById('map-canvas'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); }

to the custom-scripts.js file.

Step 6: I created a template page and linked it to a page inside the dashboard and added <div id="map-canvas"></div>.

I am not receiving any WP_DEBUG errors nor am I receiving any developers console errors. Does anyone know why this is happening. I appreciate the help.

Improve this question
4
  • Have you verified that your map implementation is working outside of WordPress (in a static page, for example)? Knowing that your map works on localhost independently would be helpful. It does appear that your custom-scripts JS should specify your google-maps script as a dependency though.
    – Dave Romsey
    CommentedSep 15, 2016 at 0:59
  • hey @DaveRomsey, I have tested the API on a static HTML doc and it is working, I am even getting info back on the Developer's API console. However it is still not working in my wordpress theme. I am still recieving no errors in the developers console.
    – steamfunk
    CommentedSep 15, 2016 at 12:57
  • Are you creating a child theme for Foundation Press? If so, and the function foundationpress_scripts() exists in the parent theme, your code will not run. Remove the function_exists() conditional check around your function. Note that this will override the parent theme's foundationpress_scripts() function. If you don't want that to happen, rename your foundationpress_scripts() to something else.
    – Dave Romsey
    CommentedSep 15, 2016 at 15:28
  • hey @DaveRomsey I am not building a child theme, FoundationPress is barebones so you could just develop on top. I have registered other scripts and they are running fine. I checked my developer's console and the api is loading in the head with all the necessary files, and I do not have a single error. But the map will not display.
    – steamfunk
    CommentedSep 15, 2016 at 16:07

1 Answer 1

Reset to default
4

I was able to get this working after a bit of fiddling. Give the #map-canvas element a height (you can do this in CSS):

<div id="map-canvas" style="height:500px"></div>

Add the callback argument to the google-maps script URL and add the defer and async attributes to the google-maps script tag. Also make custom-scripts a dependency for google-maps:

if ( ! function_exists( 'foundationpress_scripts' ) ) : function foundationpress_scripts() { //Load custom JS script wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/assets/javascript/custom/custom-scripts.js', array(), '1.0.0', true ); // Load Google Maps API. Make sure to add the callback and add custom-scripts dependency wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap', array( 'custom-scripts' ) ); // Add the comment-reply library on pages where it is necessary if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'foundationpress_scripts' ); endif; // Add async and defer attributes function google_maps_script_attributes( $tag, $handle) { if ( 'google-maps' !== $handle ) { return $tag; } return str_replace( ' src', ' async="async" defer src', $tag ); } add_filter('script_loader_tag', 'google_maps_script_attributes', 10, 2);

Make sure to do a hard reload in your browser after fixing everything.

Improve this answer
2
  • Thanks again for the help. I am experiencing an error and i think it is due to the maps loading on every page, but the map div is not on all the pages only the contact page, how could i get rid of this errror? Uncaught TypeError: Cannot read property 'offsetWidth' of null
    – steamfunk
    CommentedSep 19, 2016 at 13:02
  • You could wrap the calls to wp_enqueue_script() with a conditional statement, such as is_page_template() or is_page() using a similar pattern to what is done with the comment-reply script. This also might be helpful: stackoverflow.com/questions/11740663/…
    – Dave Romsey
    CommentedSep 19, 2016 at 15:47

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.