URL から切り出していた住所やキーワードなどのパラメータが、関数の引数になります。
<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,
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);
}
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番目の引数で指定された拡大率で、地図の中央にマーカーを打ちます。
a-kuma3さんありがとうございます。
個別のページごとに別々のスクリプトを加えることで、地図の表示方法を変えることができました。
さらに追加で質問で恐縮なのですが。
URLに打ち込まれるキーワードに連動して、スクリプトの中身も変えるようなことは出来ないでしょうか？
例えば、地図を表示するリンクは、
http://my.site/map?address皇居&zoom=15/
となることもあるのですが、
http://my.site/map?address新宿御苑&zoom=15/
になったり、
http://my.site/map?address東京都港区芝公園４丁目２－８&zoom=15/
（東京タワー）
と住所表記にしたりと、常に動的にリンク先が変化します。
それに連動して、
display_map(“map”, 16, ‘皇居’, ”);
display_map(“map”, 16, ‘新宿御苑’, ”);
display_map(“map”, 16, ‘東京都港区芝公園４丁目２－８’, ”);
と、スクリプトの方もURLに打ち込んだキーワードと共に変わることで、地図にピンを表示させることが出来るようになると思うのですが、そういったURLに連動した形でスクリプトを変えるといった操作は可能でしょうか？
今回の例ですと「皇居」以外の住所を表示する際、キーワードの数だけ別のスクリプトを用意しないといけないとなりますと大変時間が掛かってしまうように感じまして。
度々恐縮です、もし可能でしたらお時間のある際によろしくお願いします。
2016/08/11 00:32:44