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

Question

sherlockhomeless

7

7もっと見る

2000pt

ウェブ制作学習・教育

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

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

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

回答の条件

1人20回まで

登録：2016/08/25 07:39:26
終了：2016/08/28 19:29:35

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2016-08-25T09:56:53+09:00

No.1

a-kuma3497421542016/08/25 09:56:53

2000pt

個別の方に書いているスクリプトで、<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>

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

他6件のコメントを見る

ありがとうございます、同じミスを繰り返していました…(;^_^

function.phpに指定の文字列 http://scope.minibird.jp/niji-life/archives/289 を入れてpタグが自動挿入されないようにしないとですね。

mapの方はうまく表示されました。
http://goo.gl/84M8ge

しかしmap2の方は…
http://goo.gl/d092w2

未だ枠しか表示されない状況です。
たびたびの質問ですみません、原因と対処法につきまして、お時間ある時にご教授いただきますと幸いです。
よろしくお願い致します。

2016/08/25 21:27:09

しかしmap2の方は…
　　...
未だ枠しか表示されない状況です。

共通の方に入れているスクリプトの中央あたりですが、

                    // 拡大率は 16 まで
                    var zoom_listener = google.maps.event.addListener(map, "idle", function() { 
                        if (map.getZoom() > 16) {
                            map.setZoom(16); 
                        }
                        google.maps.event.removeListener(zoom_listener); 
                    });

これを、以下のようにすると改善しないでしょうか。

                    // 拡大率は 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 を呼んでいる行の場所を入れ替えてます。

2016/08/25 23:09:43

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

住所表示も周辺スポット表示も同一ドメイン内で完結するようにしてみましょうか。

2016/08/26 05:51:09

書き換えてみたのですが、両方とも表示されなくなってしまいましたね…。

二ヶ所ほど、編集ミスを見つけました。

//  ↓ここに、全角の空白が 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 まで」のコメントの前が全角の空白になっています
文法エラーになりますので、半角の空白にしてください
}); の行がひとつなくなってます。

2016/08/26 09:19:37

ありがとうございます、map直りました！
map2はやはり変わらずですね…。

2016/08/27 00:10:00

分かった。

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&zoom=10
数字は、適当で構いません。

2016/08/27 00:30:44

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

2016/08/28 19:29:24

さすがa-kuma3さんです…表示されました！

長引いてすんません。
最初から想定できてても良かったかなあ、という気がしなくもなく　(´・ω・｀)

とりあえず、うまくいってホッとしました。

2016/08/28 20:48:26

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

ベストアンサー

a-kuma3497421542016/08/25 09:56:53

コメント（0件)

この質問への反応（ブックマークコメント）