Google APIの利用

解決済 Baccatore
(@baccatore)

8年、 11ヶ月前
初めまして。
Wordpressのプリセットテーマで子テーマを作成し、そこにGoogle Map APIをで地図を描画しようとしたのですが動作が不可解で原因を調べています。みさなんの知恵をお借りしたいです。
以下のコードで実装したところ、Googleマップの基本的なパーツの表示（左上の切り替え表示タブ、左下のGoogleのロゴ、右下のエラーレポートなどへのリンク)は表示されるのですが肝心の地図の内容だけが表示されません。
確認したこととしては、
- テンプレート中でもiframeタグを用いた実装した場合では機能します。
- Google Developper Consoleからのレスポンスを確認するとどうやら通信は成功している。
- モジュールファイルを読み込まず、該当の子テーマのディレクトリに作成したファイルからは機能する。
- PHP, Javascript, Google Map APIでのエラーは確認できない。
このテーマ中ではgoogleのAPIを使ってfontのデータを参照しているようで、それが原因なのかとあたりをつけているのですが、どうすれば良いのか。。。
みなさんならどう原因を特定しますか？あまり助長になってはならないと思い以下の内容に絞りましたが、他に必要な情報があればおっしゃってください。ご助力、どうぞよろしくお願いいたします。

[環境]
- WordPress Ver.:4.4.1
- 使用テーマ：Twentythirteen1.7の自作子テーマ
- ブラウザ:Safari 9.0.2 / Firefox 42.0
- ローカル環境での開発
[front-page.php]
```
<?php get_header();?>
<div id="map"  style="height:100%; width:100%;"></div><br />
<?php get_footer();
```
[functions.php]
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    ...(スタイルシートの読み込み)
    wp_enqueue_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key={取得済みAPI KEY}', array());
    wp_enqueue_script( 'map', get_stylesheet_directory_uri() . '/js/map.js', array('google-api'), '1.0.0', true);
}
```
[map.js]
```
function initMap() {
  var latLng = new google.maps.LatLng({緯度}, {経度});
  var map = new google.maps.Map(document.getElementById('map'), {
    center: latLng,
    zoom: 16,
  });

  var marker = new google.maps.Marker({
    map : map,
    position : latLng,
  }) ;

  var infoWindow = new google.maps.InfoWindow({
    content : '<b>{ピンに加えるコメント}</b>',
    position : latLng,
  });

  infoWindow.open(map, marker);
}

initMap();
```
次のファイルを該当の子テーマのベースディレクトリに保存して読み込んだ場合は機能します。
[map.html]
```
<!DOCTYPE html>
<html>
<head>
    <title>Google Map API Test</title>
    <style>
        html, body { height:100%; }
        #map {height:100%; width: 100%;}
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
    <script>
    function initMap() {
        var latLng = new google.maps.LatLng({緯度},{経度});
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latLng,
            zoom: 16,
        });

        var marker = new google.maps.Marker({
            map : map,
            position : latLng,
        }) ;

        var infoWindow = new google.maps.InfoWindow({
            content : '<b>{ピンに書き込むコメント}</b>',
            position : latLng,
        });

        infoWindow.open(map, marker);
    }
    intiMap();
</script>
</body>
</html>
```

7件の返信を表示中 - 1 - 7件目 (全7件中)

ikaring
(@ikaring)

8年、 11ヶ月前

ざっと拝見したところ２点map.htmlと違うのではないかと思います。

１．callbackが指定されていない点

wp_enqueue_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key={取得済みAPI KEY}'&callback=initMap, array());

２．map.jsがフッター読み込みになっている点

wp_enqueue_script( 'map', get_stylesheet_directory_uri() . '/js/map.js', array('google-api'), '1.0.0', false);
トピック投稿者 Baccatore
(@baccatore)

8年、 11ヶ月前
回答ありがとうございます。

１．callbackが指定されていない点

(外部APIへの紐付けを同じブロックに纏める為に)Google APIを読み込んだ後に、マップやマーカーのインスタンスを記述しinitMap()を呼び出せれば同じことかと考えていましたがよく考えればajaxを使っているそうなので確かにコールバック関数として呼び出さないといけませんね。ありがとうございます。参考になりました！

２．map.jsがフッター読み込みになっている点

これは従来のJavascriptの配置やGoogle Map APIのサンプルに倣いました。HTMLとCSSのレンダリングを優先させることで読み込みの高速化を図っています。(マップの読み込みは比較的重いですし)今回の制作では特にJavascriptから大量のHTMLを描画する訳ではないのでヘッダーには入れなかったのですが、もしやと思い試してみました。しかしながら結果に変化はありませんでした。ですが読み込み順序の確認になりました。ご指摘ありがとうございます。

ikaringさんのアドバイスを受けて、一部修正しました。アドバイスありがとうございます。
しかしながら以前症状に変化はありません。基本的なコンポーネントは読み込んでくれますが、地図の描画が開始されません。PHP、ブラウザのコンソール共にエラーなしです。
バージョンに関する引数は適当なこと書いているんですがこれでしょうか？GETでの送信ですし、受信側が呼び出さないのであれば何書いても同じかと思ってるのですが。。。

[修正点]
- map.js内からの呼び出しからURIインターフェイスを使ったコールバックとしての呼び出しに変更しました
- mapとgoogle-apiの依存関係を見直しました。Google Map APIの公式サンプルではMapやMarkerのインスタンス作成はAPI呼び出しに先行しているので直感的な記述と逆になっています
- 今回はバージョンとかないので第4引数はfalseにしました。
[functions.php]
```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    ...(スタイルシートの読み込み)
    wp_enqueue_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key={API KEY}&callback=initMap',array('map'), false, true);
    wp_enqueue_script( 'map', get_stylesheet_directory_uri() . '/js/map.js', array(), false, true );
}
```
ikaring
(@ikaring)

8年、 11ヶ月前

あんまり詳しくはないんですが、apiの読み込みをhttpsからhttpにしてみるっていうのはどうですかね。
トピック投稿者 Baccatore
(@baccatore)

8年、 11ヶ月前
追記になりますが、スタイルシートやスクリプトファイルの競合がどうかを原因か調べるために、map.phpを以下のように修正しました。親テーマのheaderとfooterのモジュールをそのまま引っ張ってきてdiv#idにくっつけた形になります。この場合は地図の読み込みは問題なく行われます。
ここから原因のアテがなくなってしまいました。他にどんなことが考えられるでしょうか…
Wordpressで使われるjQueryは一部修正されていると聞きますが、Google APIがjQueryに依存しているとは聞いたことありませんし、API側の設定ホストサーバーの登録など)が問題ならば、以下のファイルからはGoogle APIからアラートされると思うのですがそんなこともありません。Google Developpersのフォーラムで質問するべきかとも思いましたが、どうにもこの問題はWordpressで呼び出すとき特有のことだと現時点では推測できるので引き続きこちらでみなさんのお力をお借りしたいです。

[{子テーマのベースディレクトリ}/map.php]
```
<?php require_once '../../../wp-load.php'; ?>



<html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    
    <title>Google Map API Test</title>
    <?php wp_head(); ?>
</head>
<body>
    <div id="map"></div>
    <?php wp_footer(); ?>
</body>
</html>
```
[さらに追記]
気づいたのですが、このとき、マップ中央に配置したマーカーは認識している（というのもカーソルがドラッグのものからpointerにかわる）ので正しく描画の時点で問題が発生しているようです。
(そこでマップのスタイルを試しに変更してみたのですがやはり描画はされませんでした。)
トピック投稿者 Baccatore
(@baccatore)

8年、 11ヶ月前
ikaringさん>投稿が前後してしまいました。すみません。

apiの読み込みをhttpsからhttpにしてみるっていうのはどうですかね。

以下のようにhttpへと変更してみましたが変わりありませんね。。。ありがとうございます。

[functions.php]
```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
...
    wp_enqueue_script( 'google-api', 'http://maps.googleapis.com/maps/api/js?key={API KEY}&callback=initMap',array('map'), false, true);
...
}
```
トピック投稿者 Baccatore
(@baccatore)

8年、 11ヶ月前

大変すみません解決しました。。。。。

スタイルシートの設定が問題だったようです。
気づかずにdiv#mapの子要素全体に
overflow: hidden;
をかけていたのですが、こう設定するとマップのカラーリングがされずにさも(少なくとも)データを受信できてないような挙動になるようです。(また詳しく調べてみてようと思います。)

大変お騒がせしました。結局の所、WordpressではなくGoogle Developpersに尋ねるべき問題でした。反省しております。
しかしながら、ご指摘を受けた点からgoogle apiとwordpressの動作についてとても勉強になりました。重ねて感謝いたします。
ikaringさんありがとうございました！

ikaring
(@ikaring)

8年、 11ヶ月前

なるほどです。私も勉強になります。
解決して良かったです。

7件の返信を表示中 - 1 - 7件目 (全7件中)

トピック「Google APIの利用」には新たに返信することはできません。

Google APIの利用

タグ

トピック

人気のトピック

返信がないトピック

サポート関連ではないトピック

解決済みのトピック

未解決のトピック

すべてのトピック