Google Maps not displaying in wordpress using Google Maps Javascript API

Question

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.

Answer 1

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.