web-dev-qa-db-fra.com

Google Maps ne s'affiche pas dans wordpress à l'aide de l'API Javascript de Google Maps

Je me demandais si quelqu'un pourrait m'aider. J'essaie actuellement de configurer l'API Javascript de Google Maps pour fonctionner avec wordpress sur un hôte local, mais je n'ai pas eu de chance. S'il vous plaît trouver mes étapes ci-dessous.

-Etape 1: je suis allé dans le gestionnaire des API de développeur de Google et j'ai activé une API pour l'API Javascript de Google Maps.

-Etape 2: j'ai généré une clé API.

-Etape 3: j'ai interrogé l'API Javascript des cartes de la même manière et ai inclus la clé API où il est dit clé = {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;

-Etape 4: j'ai créé un fichier custom-scripts.js et chargé dans le répertoire dans lequel je l'ai enquêté.

-Etape 5: j'ai ajouté

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

au fichier custom-scripts.js.

Étape 6: J'ai créé une page de modèle, l'ai liée à une page du tableau de bord et ajouté <div id="map-canvas"></div>.

Je ne reçois aucune erreur WP_DEBUG ni des erreurs de la console de développement. Est-ce que quelqu'un sait pourquoi cela se produit. J'apprécie l'aide.

theme-developmentjavascriptapigoogle-maps
3
steamfunk

Je pouvais le faire fonctionner après un peu de violon. Donnez une hauteur à l'élément #map-canvas (vous pouvez le faire en CSS):

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

Ajoutez l'argument callback à l'URL de script google-maps et ajoutez les attributs defer et async à la balise de script google-maps. Faites également de custom-scripts une dépendance pour 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);

Assurez-vous de recharger votre navigateur après avoir tout corrigé.

3
Dave Romsey