<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=[あなたのAPIキー]" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var line;
var map;
var gls;
// qはフォームのテキストエリアの値
function localSearch(form) {
var q=form.q.value;
if(q=="" || q=="undefined"){
alert("検索キーワードが入力されていません");
}else{
gls.execute(q);
return false;
}
}
// 検索完了時に呼ばれるコールバック関数
function onLocalSearch() {
if (gls.results.length == 0) return;
// 検索結果の1番目を取得
var first = gls.results[0];
// その結果の緯度・経度を地図の中心にセット
var lat = parseFloat(first.lat);
var lng = parseFloat(first.lng);
map.setCenter(new GLatLng(lat, lng));
// マーカーを立てたり
var marker = new GMarker(new GPoint(lng, lat));
map.addOverlay(marker);
marker.openInfoWindow(first.html.cloneNode(true));
}
function load() {
if (GBrowserIsCompatible()) {
//地図を作成
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.677335,139.744613), 16);
//マップコントローラを付ける
map.addControl(new GLargeMapControl());
var p1=new GLatLng(35.676148,139.74479);
var p2=new GLatLng(35.678494,139.744205);
// GlocalSearchオブジェクトを生成
gls = new GlocalSearch();
// 検索完了時のコールバック関数をセット
gls.setSearchCompleteCallback(null, onLocalSearch);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
//地図
<div id="map" style="width: 500px; height: 500px"></div>
//検索フォーム
<FORM method=post>
<INPUT id=q style="WIDTH: 400px" value="tokyo station" name=q>
<INPUT onclick="javascript:localSearch(this.form);" type=button value=検索する>
</FORM>
</body>
</html>
