前回では、検索機能がなかったので追加しました。（まずはサンプル）
本来であれば
map.addControl(new google.maps.LocalSearch());
を追加することにより検索フォームを追加できるんですが、「Google AJAX Search APIキー」を取る必要があるし、中心座標はついてくるけど、マーカーが付いてこない。もちろんやり方はあるでしょうが、いまいちわからなかったので、こちらのサイトを参考に検索フォームを設置しました。
ソースのベースは前回同様「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースです。
手順
１．まずこちらで、Googleマップ用APIキーを取得してください。
Google MAPS API に登録する （Google Maps API）
２．headタグ内に以下のスクリプトを記述してください。
※（APIキー）のところは、１．で取得したAPIキーを入れてください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = "map";
var lat = 34.6862971; //緯度初期値
var lng = 135.5196609; //経度初期値
var zoom = 7; //ズーム初期値
var geocoder;
var map;
var mk;var set_map = function () {
if (GBrowserIsCompatible()) {
// マップ表示
map = new GMap2(document.getElementById(mapname));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);
geocoder = new GClientGeocoder();
// コントロール（小）表示
map.addControl(new GSmallMapControl);
// ドラッグ可能なマーカー
mk = new GMarker(point, {draggable:true});
// ドロップ時に緯度経度取得
GEvent.addListener(mk,"dragend", function() {
var p = mk.getLatLng();
document.getElementById("latitude").innerHTML = p.lat();
document.getElementById("longitude").innerHTML = p.lng();
});
// マップにマーカーを表示
map.addOverlay(mk);
document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
// ズーム取得（イベント時）
GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
document.getElementById("zoom").innerHTML = newZoomLevel;
});
// ズーム初期設定
zoom=map.getZoom();
document.getElementById("zoom").innerHTML = zoom;
// 中心座標を取得（イベント時）
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("center_latitude").innerHTML = center.y;
document.getElementById("center_longitude").innerHTML = center.x;
});
// 中心座標初期設定
document.getElementById("center_latitude").innerHTML = lat;
document.getElementById("center_longitude").innerHTML = lng;
}
}//住所を取得する
function moveAddress(){
var address = document.getElementById("search_word").value;
geocoder.getLatLng(address, moveTo);
}function moveTo(latlng){
if (latlng){
map.setCenter(latlng, zoom);
mk.setPoint(latlng);
document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
}else{
alert("住所から緯度経度に変換できません");
}
}
// ONLOADイベントで呼び出し
window.onload = set_map;
window.onunload = GUnload();
//]]>
</script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
３．次にbody内に以下を記述してください
<div class"search">
<p>住所から検索：<input type="text" name="search_word" id="search_word" value="" />
<input type="button" onclick="moveAddress()" value="検索" /></p>
</div>
<div id="map" style="width:500px; height:500px;"></div>
<table>
<caption>パラメータ1</caption>
<tr>
<th>マーカー緯度</th>
<td id="latitude" name="latitude"></td>
</tr>
<tr>
<th>マーカー経度</th>
<td id="longitude" name="longitude"></td>
</tr>
<tr>
<th>中心緯度</th>
<td id="center_latitude" name="center_latitude"></td>
</tr>
<tr>
<th>中心経度</th>
<td id="center_longitude" name="center_longitude"></td>
</tr>
<tr>
<th>ズーム</th>
<td id="zoom" name="zoom"></td>
</tr>
</table>
id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。
※サンプルでは少しスタイルをつけています。