3

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.

  • 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 Sep 15 '16 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 Sep 15 '16 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 Sep 15 '16 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 Sep 15 '16 at 16:07
3

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.

  • 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 Sep 19 '16 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 Sep 19 '16 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.