Google Maps JS APIをWordPressにエンキューできません

Question

私はWordPressの新機能を使用しています。私はテーマ開発に関するUdemyコースに従っています.1つはGoogle Maps APIの使用です。スクリプトを登録/エンキューすると、ページを表示するときにHTMLソースコードに表示されません。開発者コンソールにもエラーはありません。

これは私のfunctions.phpからの抜粋です：

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(''), '', true); 
    wp_register_script('fluidboxjs', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array('jquery'), '2.0.5', true); 
    wp_register_script('script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0', true); 

    wp_enqueue_script('googlemaps'); 
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('fluidboxjs'); 
    wp_enqueue_script('script'); 
} 

add_action('wp_enqueue_scripts', 'lapizzeria_styles'); 

そして、これは出力フッター（私はここに、GoogleのAPIへのリンクを見てしなければならないと考えている）を下回っているHTMLです：

<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/jquery.fluidbox.min.js?ver=2.0.5'></script> 
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/scripts.js?ver=1.0.0'></script> 
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-includes/js/wp-embed.min.js?ver=4.7.4'></script> 

は、興味深いことに、この行は、私はエンキュー時に頭に表示されないgooglemaps：

<link rel='dns-prefetch' href='//maps.googleapis.com' /> 

問題の背景のビットとして

：

運動の最初のステップは、直接front-page.phpにGoogle's sample code（スクリプト&スタイル）を配置したマップは、細かい表示しました。

第二のステップは、front-page.phpからそのコードを移動し、functions.phpに置く、scripts.js、及びstyle.cssました。

スタイルをstyle.cssに移動すると問題はありません。 initMap()関数をscripts.jsに移動すると問題ありません。しかし、Google Maps APIのエンキュー/登録をfunctions.phpにしようとすると、他のエンキューされたアイテムと同じように、フッタの下にMaps API用に<script>が追加されているようには見えません。

違いがあるかどうかはわかりませんが、私はローカルで作業してMAMPを実行しています。私は、ブラウザのキャッシュをクリアし、別のブラウザを使用しようとしました。私はそれがエンキューされる順序を変更しようとしました。

編集：私は気づいた ことの一つは、私がgooglemapsためで依存関係を置けば、それは私が期待してい<script>タグを印刷しないということですが、コンソールでこのエラーが表示されます：initMap is not a function。私の理解では、Google Maps APIはjQueryを動作させる必要がないので、この追加情報が適切かどうかはわかりません。

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&#038;callback=initMap&#038;ver=4.7.4'></script> 

たぶん何かが怪しい上の行に表示されて#038;で起こっていますか？

助けていただけたら幸いです！

Answer 1

この問題は、googlemapsに設定されている依存関係のためと思われます。空の配列を渡してスクリプトの依存関係を指定する代わりに、空の文字列が配列に含まれています。スクリプトがロードされないように、依存関係を満たすことはできません。

array('')をarray()に置き換えるだけです。

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(), '', true);