Google Mapでの住所表示、周辺スポット表示を、同一サイトでページ毎に行いたい

http://q.hatena.ne.jp/1470778105

Google Mapでの住所表示、周辺スポット表示を、同一サイトでページ毎に行いたい

前回の質問 http://q.hatena.ne.jp/1469814381 で、住所表示と周辺スポット表示が可能にはなったのですが。

自サイトで指定の住所だけを表示するためのコードと、指定の住所周辺のラーメン屋などのスポットを表示するためのコードにつきまして。

片方のコードを、headタグの終わり(~</head>)の前に入れて、地図を表示したいページの特定箇所に「<div id=”map”></div>」とすれば、地図は表示されるのですが。

あるページには指定の住所だけを表示する地図を、あるページには住所周辺のスポットを表示する地図を表示したい場合、HTMLサイトでしたら各ページにそれぞれのコードを入れればうまくいくのですが。

WordPressサイト等の場合、ヘッダーを記載するエリアが共通で1箇所しかない?(header.php)ので、両方のコードを入れるわけにもいかないような気もします。

どうすれば、それぞれのページでタイプの違う地図を表示することができますでしょうか。

よろしくお願い致します。回答リクエスト

以前の質問の回答の最後のコードを共通部分を関数として切り出してみました。

URL から切り出していた住所やキーワードなどのパラメータが、関数の引数になります。

<!-- libraries=places を追加、key は割愛 -->
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&libraries=places&key=..."></script>
<script>
function display_map(id, zoom, address, keyword) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        address: address,
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            // 緯度、経度
            var latlng = results[0].geometry.location;

            // 地図
            var map = new google.maps.Map(document.getElementById(id), {
                zoom: zoom,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });


            if (keyword) {
                // キーワードで検索
                var ps = new google.maps.places.PlacesService(map);
                ps.nearbySearch({
                    name: keyword,
                    radius: 5000,   /* 半径 5km の範囲 */
                    location: latlng,
                }, function(results, status, page) {
                    if (status == google.maps.places.PlacesServiceStatus.OK) {

                        var bounds = new google.maps.LatLngBounds();

                        results.forEach(function(r) {
                            var latlng = r.geometry.location;
                            var title = r.name + "\n" + r.vicinity;

                            // マーカー
                            var marker = new google.maps.Marker({
                                position: latlng,
                                title: title,
                                map: map
                            });

                            bounds.extend(latlng);
                        });

                        map.fitBounds(bounds);
                    }

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

            } else {
                // キーワードが指定されていないときは、地図の中央にマーカー

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


        } else {
            var e = document.getElementById("map");
            e.innerHTML = "見つかりません<br>住所:" + address;

        }
    });



}
</script>
<style>
#map {
    width: 1000px;
    height: 500px;
}
</style>

上記を、<head> の中に記載してください。

地図を表示する display_map 関数は、四つのパラメータをとります。

    display_map(地図を表示する要素のID, 拡大率, 住所, スポットのキーワード);

# 関数名が一般的に過ぎるかも(他の機能が持つ関数と衝突するかも)しれません

地図を表示する個別のページには、以下のように書きます。
以下のコードは、皇居の地図を表示して、ラーメンの情報にマーカーを打ちます。

<script>
window.addEventListener("DOMContentLoaded", function() {
    display_map("map", 16, '皇居', 'ラーメン');
});
</script>

<div id="map"></div>

上記を、<head> の中に記載してください。

地図を表示する display_map 関数は、四つのパラメータをとります。

    display_map(地図を表示する要素のID, 拡大率, 住所, スポットのキーワード);

# 関数名が一般的に過ぎるかも(他の機能が持つ関数と衝突するかも)しれません

地図を表示する個別のページには、以下のように書きます。
以下のコードは、皇居の地図を表示して、ラーメンの情報にマーカーを打ちます。

<script>
window.addEventListener("DOMContentLoaded", function() {
    display_map("map", 16, '皇居', 'ラーメン');
});
</script>

<div id="map"></div>

地図を表示する領域は、script タグと離れたところに書いても大丈夫です。

住所だけ指定する場合には、四番目の引数 キーワードを空白にするか、省略します。

<script>
window.addEventListener("DOMContentLoaded", function() {
    display_map("map", 16, '皇居', '');
});
</script>

<div id="map"></div>

こちらの場合は、2番目の引数で指定された拡大率で、地図の中央にマーカーを打ちます。

id:sherlockhomeless

a-kuma3さんありがとうございます。

個別のページごとに別々のスクリプトを加えることで、地図の表示方法を変えることができました。

さらに追加で質問で恐縮なのですが。

URLに打ち込まれるキーワードに連動して、スクリプトの中身も変えるようなことは出来ないでしょうか?

例えば、地図を表示するリンクは、

http://my.site/map?address皇居&zoom=15/

となることもあるのですが、

http://my.site/map?address新宿御苑&zoom=15/

になったり、

http://my.site/map?address東京都港区芝公園4丁目2-8&zoom=15/

(東京タワー)

と住所表記にしたりと、常に動的にリンク先が変化します。

それに連動して、

display_map(“map”, 16, ‘皇居’, ”);

display_map(“map”, 16, ‘新宿御苑’, ”);

display_map(“map”, 16, ‘東京都港区芝公園4丁目2-8’, ”);

と、スクリプトの方もURLに打ち込んだキーワードと共に変わることで、地図にピンを表示させることが出来るようになると思うのですが、そういったURLに連動した形でスクリプトを変えるといった操作は可能でしょうか?

今回の例ですと「皇居」以外の住所を表示する際、キーワードの数だけ別のスクリプトを用意しないといけないとなりますと大変時間が掛かってしまうように感じまして。

度々恐縮です、もし可能でしたらお時間のある際によろしくお願いします。

2016/08/11 00:32:44

コメントを残す