Baccatoreの返信 | WordPress.org 日本語

フォーラムへの返信

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

フォーラム: テーマ
返信が含まれるトピック: Google APIの利用

トピック投稿者 Baccatore
(@baccatore)

8年、 3ヶ月前

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

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

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

フォーラム: テーマ
返信が含まれるトピック: Google APIの利用
トピック投稿者 Baccatore
(@baccatore)

8年、 3ヶ月前
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);
...
}
```
フォーラム: テーマ
返信が含まれるトピック: Google APIの利用
トピック投稿者 Baccatore
(@baccatore)

8年、 3ヶ月前
追記になりますが、スタイルシートやスクリプトファイルの競合がどうかを原因か調べるために、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にかわる）ので正しく描画の時点で問題が発生しているようです。
(そこでマップのスタイルを試しに変更してみたのですがやはり描画はされませんでした。)
フォーラム: テーマ
返信が含まれるトピック: Google APIの利用
トピック投稿者 Baccatore
(@baccatore)

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

１．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 );
}
```

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