人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Google Places API等を利用した地図表示が自サイトでうまくできない

Google API コンソール で Google Maps JavaScript API ・・・Google Places API Web Service を有効にするアプリケーションの登録
http://goo.gl/arQTKm

を利用して自サイトで地図を表示させようと試みました。
例えば
http://senzaihoikushi.com/saitama/saitama-3/saitama_3_hoikuen10.html
のページにある「≫≫大きい地図で確認」や「●●周辺の保育園を検索」をクリックすると、地図が表示されるというものです。
前回の質問 http://q.hatena.ne.jp/1470778105 でお教えいただいたようにやって、リファラーにも senzaihoikushi.com ドメインを指定したのですが…。

http://senzaihoikushi.com/map
http://senzaihoikushi.com/map2

共に、全く地図が出てこない状況です。
Chromeのデベロッパーツールで調べますと、

map2:221 Uncaught SyntaxError: Unexpected token <
maps.google.co.jp/maps-api-v3/api/js/26/1/intl/ja_ALL/util.js:209 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

というエラーは出ていますが…。

私だけでは解決が難しいので、お力添えをいただきたい次第です。
よろしくお願いします。

1472078366
●拡大する

●質問者: sherlockhomeless
●カテゴリ:ウェブ制作 学習・教育
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●2000ポイント ベストアンサー

個別の方に書いているスクリプトで、<script> 内に P タグが入ってしまっています。

map の方。微妙に見切れているかもしれませんが、変になっている行の行末に「※」を追記しています。

<p><script>
window.addEventListener("DOMContentLoaded", function() {
 // パラメータの切り出し
 var param = {}
 location.search.substring(1).split("&").forEach(function(s) {
 var a = s.split('=');
 param[a[0]] = a[1];
 });</p> // ※
<p> var zoom = parseInt(param['zoom']), address = '', keyword = '';</p> // ※
<p> if (param['address']) { // ※
 address = decodeURIComponent(param['address']);
 }</p> // ※
<p> display_map("map", zoom, address, keyword); // ※
});
</script></p>

map2 の方も、同様です。

<p><script>
window.addEventListener("DOMContentLoaded", function() {
 // パラメータの切り出し
 var param = {}
 location.search.substring(1).split("&").forEach(function(s) {
 var a = s.split('=');
 param[a[0]] = a[1];
 });</p>
<p> var zoom = parseInt(param['zoom']), address = '', keyword = '';</p> // ※
<p> if (param['address']) { // ※
 address = decodeURIComponent(param['address']);
 }
 if (param['keyword']) {
 keyword = decodeURIComponent(param['keyword']);
 }</p> // ※
<p> display_map("map", zoom, address, keyword); // ※
});
</script></p>
<div id="map"></div>

スクリプトは、記事の中にではなく、個別ページのテンプレートの方に書いてください。


sherlockhomelessさんのコメント
ありがとうございます、同じミスを繰り返していました…(;^_^ function.phpに指定の文字列 http://scope.minibird.jp/niji-life/archives/289 を入れてpタグが自動挿入されないようにしないとですね。 mapの方はうまく表示されました。 http://goo.gl/84M8ge しかしmap2の方は… http://goo.gl/d092w2 未だ枠しか表示されない状況です。 たびたびの質問ですみません、原因と対処法につきまして、お時間ある時にご教授いただきますと幸いです。 よろしくお願い致します。

a-kuma3さんのコメント
>> しかしmap2の方は… ... 未だ枠しか表示されない状況です。 << 共通の方に入れているスクリプトの中央あたりですが、 >|javascript| // 拡大率は 16 まで var zoom_listener = google.maps.event.addListener(map, "idle", function() { if (map.getZoom() > 16) { map.setZoom(16); } google.maps.event.removeListener(zoom_listener); }); ||< これを、以下のようにすると改善しないでしょうか。 >|javascript| // 拡大率は 16 まで var zoom_listener = google.maps.event.addListener(map, "idle", function() { google.maps.event.removeListener(zoom_listener); if (map.getZoom() > 16) { map.setZoom(16); } }); ||< removeListener を呼んでいる行の場所を入れ替えてます。

sherlockhomelessさんのコメント
書き換えてみたのですが、両方とも表示されなくなってしまいましたね…。 やはりWordPressの共通headerに、住所表示と周辺スポット表示の両方に対応させるコードを入れるのはよくないのですかね。 ドメイン下にディレクトリ作って、そのディレクトリ下にあるファイルのヘッダーには周辺スポット検索用のコードを入れて。 住所表示も周辺スポット表示も同一ドメイン内で完結するようにしてみましょうか。

a-kuma3さんのコメント
>> 書き換えてみたのですが、両方とも表示されなくなってしまいましたね…。 << 二ヶ所ほど、編集ミスを見つけました。 >|javascript| // ↓ここに、全角の空白が 9個ほど入ってます。半角の空白にしてください // 拡大率は 16 まで var zoom_listener = google.maps.event.addListener(map, "idle", function() { google.maps.event.removeListener(zoom_listener); if (map.getZoom() > 16) { map.setZoom(16); } }); }); // ★この行が無くなってます } else { ||< - 「拡大率は 16 まで」のコメントの前が全角の空白になっています<br>文法エラーになりますので、半角の空白にしてください - <code style="color:red;">});</code> の行がひとつなくなってます。

sherlockhomelessさんのコメント
ありがとうございます、map直りました! map2はやはり変わらずですね…。

a-kuma3さんのコメント
分かった。 map2 の方に、zoom=10 というようなパラメータを入れてください。 例えば、こんなふうに。 []http://senzaihoikushi.com/map2?address=%E5%9F%BC%E7%8E%89%E7%9C%8C%E3%81%95%E3%81%84%E3%81%9F%E3%81%BE%E5%B8%82%E5%B2%A9%E6%A7%BB%E5%8C%BA%E7%BE%8E%E5%B9%B8%E7%94%BA%EF%BC%93%E2%88%92%EF%BC%91%EF%BC%98&keyword=%E4%BF%9D%E8%82%B2%E5%9C%92[]<span style="color:red;">&zoom=10</span> 数字は、適当で構いません。

sherlockhomelessさんのコメント
遅くなりましてすみません。 さすがa-kuma3さんです…表示されました! ありがとうございました(^^)

a-kuma3さんのコメント
>> さすがa-kuma3さんです…表示されました! << 長引いてすんません。 最初から想定できてても良かったかなあ、という気がしなくもなく (´・ω・`) とりあえず、うまくいってホッとしました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ