Google Maps APIのサンプルを作ったのでメモ。
とりあえず動くものにしてある。
おもしろそうな機能があれば更新する予定。
文字コードはUTF-8にすること。
■GoogleMapsAPIサンプル.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API サンプル</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false&language=ja"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<p>Google Maps APIを使ったサンプルです。</p>
X座標：<input type="text" id="locationX" value="35.709984" />
Y座標：<input type="text" id="locationY" value="139.810703" />
<input type="button" onClick="mapCreate(map_canvas, latlng, locationX, locationY);" value="地図表示" />
<input type="button" onClick="mapUpdate(locationX.value, locationY.value);" value="地図更新" /><br />
住所：<input type="text" id="address" />
<input type="button" onClick="setLatlngZip(address.value, locationX, locationY);" value="座標取得" /><br />
キーワード：<input type="text" id="keyword" />
<input type="button" onClick="setLatlngKeyword(keyword.value, locationX, locationY);" value="座標取得" /><br />
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>
■js/maps.js
var map=null;
var marker=null;
var latlngLabel=null;
var locationXText=null;
var locationYText=null;
// マップの作成
function mapCreate(canvasObject, latlngLabelObject, positionX, positionY) {
// 座標を設定
var latlng = new google.maps.LatLng(positionX.value, positionY.value);
locationXText = positionX;
locationYText = positionY;
// マップオブジェクトのオプションを設定
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// マップを作成し、対象のオブジェクトへ描画
map = new google.maps.Map(canvasObject, opts);
// マーカーを作成
markerCreate();
// 情報ウインドウを作成
infoWindowCreate();
// 地図のドラッグイベントに各座標を表示
latlngLabel = latlngLabelObject;
google.maps.event.addListener(map, 'drag', dispLatLng);
return;
}
// マップの座標更新
function mapUpdate(positionX, positionY) {
if(map != null) {
var latlng = new google.maps.LatLng(positionX, positionY);
// マップの座標更新
map.setCenter(latlng);
// マーカーの再作成
markerCreate();
// 情報ウインドウの再作成
markerCreate();
}
return;
}
// ドラッグ時に座標を表示
function dispLatLng(latlngObject){
var latlng = map.getCenter();
var str = "[中心座標]=[" + latlng.lat() + ", " + latlng.lng() + "]<br />";
var latlngBounds = map.getBounds();
var swLatlng = latlngBounds.getSouthWest();
str = str + "[南西端座標]=[" + swLatlng.lat() + ", " + swLatlng.lng() + "]<br />";
var neLatlng = latlngBounds.getNorthEast();
str = str + "[北東端座標]=[" + neLatlng.lat() + ", " + neLatlng.lng() + "]";
locationXText.value = latlng.lat();
locationYText.value = latlng.lng();
latlngLabel.innerHTML = str;
return;
}
// マーカーを作成
function markerCreate() {
var latlng = map.getCenter();
if(marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latlng,
map: map,
clickable : true
});
}
// 情報ウインドウを作成
function infoWindowCreate() {
var latlng = map.getCenter();
var iwopts = {
content: 'Hello',
position: latlng
};
var infowindow = new google.maps.InfoWindow(iwopts);
infowindow.open(map);
}
// 住所から座標を取得
function setLatlngZip(address,locationX, locationY) {
//ジオコードオブジェクト
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: address,
region: 'jp'
},
function(results, status){
if(status==google.maps.GeocoderStatus.OK){
//処理
locationX.value = results[0].geometry.location.lat();
locationY.value = results[0].geometry.location.lng();
}
});
}
// キーワードから座標を取得
function setLatlngKeyword(keyword,locationX, locationY) {
// 位置情報オブジェクト
var service = new google.maps.places.PlacesService(map);
service.textSearch({
location: map.center,
radius: '500',
query: keyword
},
function(results, status){
if(status==google.maps.places.PlacesServiceStatus.OK){
//処理
locationX.value = results[0].geometry.location.lat();
locationY.value = results[0].geometry.location.lng();
}
});
}
