前回の質問 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>
地図を表示する領域は、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>
以前の質問の回答の最後のコードを共通部分を関数として切り出してみました。
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>
スクリプトのロードエラーはなくなりましたが、元に(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
a-kuma3さんの仰る通りで、英字のみのドメインでしたら、mapもmap2も表示されました。
mapに吹き出しが出てこない状況については、
/map?address=新宿御苑&keyword=新宿御苑&zoom=17
のように、keywordに同一のスポット名・住所を入れることで、吹き出しが表示されるようになりました!
ありがとうございました。
scritptの縦幅と横幅の指定は、以前a-kuma3さんにお教えいただいた、
・・・
#map {
width: 100%; /* 横幅を自動で調整 */
height: 350px; /* とりあえず、高さを 350px に設定 */
}
/* 横幅が 768px 以上の場合:ざっくり言うとスマホ以外 */
@media (min-width: 768px) {
#map {
height: 600px; /* そのときは、高さを 600px に設定 */
}
}
・・・
に変えました!
スクリプトのロードエラーはなくなりましたが、元に(sensor=false をつけてたときに)戻って、このエラーが出ています。
# javascript のコンソールで確認できると思います
多言語ドメインなのが気になるんですよね。
2016/08/14 02:21:18ちょっと古い記事ですが↓
http://d.hatena.ne.jp/inokuni/20070521/p1
a-kuma3さんの仰る通りで、英字のみのドメインでしたら、mapもmap2も表示されました。
2016/08/15 00:47:30mapに吹き出しが出てこない状況については、
/map?address=新宿御苑&keyword=新宿御苑&zoom=17
のように、keywordに同一のスポット名・住所を入れることで、吹き出しが表示されるようになりました!
ありがとうございました。