ブログという名のメモ: Google Maps API をとりあえず使う

Google Maps APIのサンプルを作ったのでメモ。

とりあえず動くものにしてある。

おもしろそうな機能があれば更新する予定。

文字コードはUTF-8にすること。

■GoogleMapsAPIサンプル.html

<!DOCTYPE html>

<html>

<head>

<title>Google Maps API サンプル</title>

</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="text" id="address" /> 

キーワード：<input type="text" id="keyword" /> 

</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();

}

});

}

ブログという名のメモ

2014年4月2日水曜日

Google Maps API をとりあえず使う

0 件のコメント:

コメントを投稿