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


前回の質問 http://q.hatena.ne.jp/1469814381 で、住所表示と周辺スポット表示が可能にはなったのですが。
自サイトで指定の住所だけを表示するためのコードと、指定の住所周辺のラーメン屋などのスポットを表示するためのコードにつきまして。
片方のコードを、headタグの終わり(~</head>)の前に入れて、地図を表示したいページの特定箇所に「<div id="map"></div>」とすれば、地図は表示されるのですが。

あるページには指定の住所だけを表示する地図を、あるページには住所周辺のスポットを表示する地図を表示したい場合、HTMLサイトでしたら各ページにそれぞれのコードを入れればうまくいくのですが。
WordPressサイト等の場合、ヘッダーを記載するエリアが共通で1箇所しかない?(header.php)ので、両方のコードを入れるわけにもいかないような気もします。
どうすれば、それぞれのページでタイプの違う地図を表示することができますでしょうか。
よろしくお願い致します。

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2016/08/15 01:04:54
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

ポイント1500pt

以前の質問の回答の最後のコードを共通部分を関数として切り出してみました。
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>

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


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

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

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

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





追記です。

http://my.site/map の方ではkeywordパラメータは指定せずに無視していただいて構いません。
http://my.site/map2 の方では、もし指定がないのであればマーカーは無し表示でよいです。
クリックした際はスポット名と住所が出てきたら幸いです。

了解です。

下記を、<head> の中に記載してください。
最初に回答したコードに、吹き出しを表示する処理を追加しています。

<!-- 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);

                            // 吹き出し
                            var iw = new google.maps.InfoWindow({
                                content: title = r.name + "<br>" + r.vicinity,
                                size: new google.maps.Size(50, 30)
                            });

                            // マーカーをクリックしたときに吹き出しを表示する
                            google.maps.event.addListener(marker, 'click', function() {
                                iw.open(map, marker);
                            });

                        });

                        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
                });

                // 吹き出し
                var iw = new google.maps.InfoWindow({
                    content: title = results[0].formatted_address,
                    size: new google.maps.Size(50, 30)
                });

                // マーカーをクリックしたときに吹き出しを表示する
                google.maps.event.addListener(marker, 'click', function() {
                    iw.open(map, marker);
                });
            }


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

        }
    });

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


スポットを探さなくて良い http://my.site/map の方に以下のコードを書いてください。

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

    var zoom = parseInt(param['zoom']), address = '', keyword = '';

    if (param['address']) {
        address = decodeURIComponent(param['address']);
    }

    display_map("map", zoom, address, keyword);
});
</script>
<div id="map"></div>


スポットを探す方の http://my.site/map2 の方には以下のコードを書いてください。

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

    var zoom = parseInt(param['zoom']), address = '', keyword = '';

    if (param['address']) {
        address = decodeURIComponent(param['address']);
    }
    if (param['keyword']) {
        keyword = decodeURIComponent(param['keyword']);
    }

    display_map("map", zoom, address, keyword);
});
</script>
<div id="map"></div>
他21件のコメントを見る
id:a-kuma3

スクリプトのロードエラーはなくなりましたが、元に(sensor=false をつけてたときに)戻って、このエラーが出ています。
# javascript のコンソールで確認できると思います

"Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://pokemon.低価格hills.com/map2?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7&keyword=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3/"


多言語ドメインなのが気になるんですよね。
ちょっと古い記事ですが↓
http://d.hatena.ne.jp/inokuni/20070521/p1

2016/08/14 02:21:18
id:sherlockhomeless

a-kuma3さんの仰る通りで、英字のみのドメインでしたら、mapもmap2も表示されました。
mapに吹き出しが出てこない状況については、

/map?address=新宿御苑&keyword=新宿御苑&zoom=17

のように、keywordに同一のスポット名・住所を入れることで、吹き出しが表示されるようになりました!
ありがとうございました。

2016/08/15 00:47:30

その他の回答0件)

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

ポイント1500pt

以前の質問の回答の最後のコードを共通部分を関数として切り出してみました。
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>

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


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

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

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

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





追記です。

http://my.site/map の方ではkeywordパラメータは指定せずに無視していただいて構いません。
http://my.site/map2 の方では、もし指定がないのであればマーカーは無し表示でよいです。
クリックした際はスポット名と住所が出てきたら幸いです。

了解です。

下記を、<head> の中に記載してください。
最初に回答したコードに、吹き出しを表示する処理を追加しています。

<!-- 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);

                            // 吹き出し
                            var iw = new google.maps.InfoWindow({
                                content: title = r.name + "<br>" + r.vicinity,
                                size: new google.maps.Size(50, 30)
                            });

                            // マーカーをクリックしたときに吹き出しを表示する
                            google.maps.event.addListener(marker, 'click', function() {
                                iw.open(map, marker);
                            });

                        });

                        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
                });

                // 吹き出し
                var iw = new google.maps.InfoWindow({
                    content: title = results[0].formatted_address,
                    size: new google.maps.Size(50, 30)
                });

                // マーカーをクリックしたときに吹き出しを表示する
                google.maps.event.addListener(marker, 'click', function() {
                    iw.open(map, marker);
                });
            }


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

        }
    });

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


スポットを探さなくて良い http://my.site/map の方に以下のコードを書いてください。

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

    var zoom = parseInt(param['zoom']), address = '', keyword = '';

    if (param['address']) {
        address = decodeURIComponent(param['address']);
    }

    display_map("map", zoom, address, keyword);
});
</script>
<div id="map"></div>


スポットを探す方の http://my.site/map2 の方には以下のコードを書いてください。

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

    var zoom = parseInt(param['zoom']), address = '', keyword = '';

    if (param['address']) {
        address = decodeURIComponent(param['address']);
    }
    if (param['keyword']) {
        keyword = decodeURIComponent(param['keyword']);
    }

    display_map("map", zoom, address, keyword);
});
</script>
<div id="map"></div>
他21件のコメントを見る
id:a-kuma3

スクリプトのロードエラーはなくなりましたが、元に(sensor=false をつけてたときに)戻って、このエラーが出ています。
# javascript のコンソールで確認できると思います

"Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://pokemon.低価格hills.com/map2?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7&keyword=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3/"


多言語ドメインなのが気になるんですよね。
ちょっと古い記事ですが↓
http://d.hatena.ne.jp/inokuni/20070521/p1

2016/08/14 02:21:18
id:sherlockhomeless

a-kuma3さんの仰る通りで、英字のみのドメインでしたら、mapもmap2も表示されました。
mapに吹き出しが出てこない状況については、

/map?address=新宿御苑&keyword=新宿御苑&zoom=17

のように、keywordに同一のスポット名・住所を入れることで、吹き出しが表示されるようになりました!
ありがとうございました。

2016/08/15 00:47:30
id:sherlockhomeless

scritptの縦幅と横幅の指定は、以前a-kuma3さんにお教えいただいた、

・・・

#map {

width: 100%; /* 横幅を自動で調整 */

height: 350px; /* とりあえず、高さを 350px に設定 */

}

/* 横幅が 768px 以上の場合:ざっくり言うとスマホ以外 */

@media (min-width: 768px) {

#map {

height: 600px; /* そのときは、高さを 600px に設定 */

}

}

・・・

に変えました!

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

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

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

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

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