HTML+JavaScriptだけで、URLパラメータ(QueryString)による座標などを指定できるGoogleマップのページ
Googleマップのページは便利ですが、ページを沢山作ると後々メンテナンスが大変ですね。
今回も、GoogleMapsがv2からv3に移行して苦労した人も多いのでは。
ということで、単に動的なMAPを表示するだけのページなら、メンテナンス性を考え、できるだけ1つにまとめたい…とウェブ担当者なら誰でも考えるはず。
要は、画面いっぱいに地図を表示するページを1つ作っておき、それを地図が必要なページからiframeで呼び出せばよいだけです。
中心地点を表示するGoogle公式サンプル
をベースに、パラメータで座標とズームレベルを指定するサンプルを以下に示します。
極論、コピペするだけで実現できます。「良い時代になったものだ(・∀・)」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #gmap { height: 100%; } @media print { html, body { height: auto; } #gmap { height: 650px; } } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var lat = 35.681382, lng = 139.766084, zoom = 14; //デフォルト座標&ズームレベル //QueryStringを取得 var QS = new Array; if (location.search.length > 1) { var m_Array = location.search.substr(1).split("&"); for (idx in m_Array) { QS.push(m_Array[idx].split("=")); } for (idx in QS) { var qsvalue = QS[idx][1]; switch (QS[idx][0]) { case "lat": lat = qsvalue; break; case "lng": lng = qsvalue; break; case "zm": zoom = qsvalue; break; default: break; } } } var myLatlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom: eval(zoom), center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("gmap"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: "" }); } </script> </head> <body onload="initialize()"> <div id="gmap"> </div> </body> </html>
で、このページを親ページ(例えば店舗案内、アクセスマップなどのページ)からこんな感じで呼び出すだけです。
<html> <head></head> <body> <iframe src="map.htm?lat=34.701980&lng=135.495320&zm=10" width="500" height="400"></iframe> </body> </html>