検索
タグ：Google Maps
過去２回ほどGoogle Maps JavaScript APIを掘り下げてみました。
placesライブラリ編：GoogleMapsAPIでマップで施設検索してやんよ!!!
directions API編：GoogleMapsAPIでルート検索してやんよ!!!
さすがGoogle先生、奥が深いです。
まだまだ色んな事できそうです！
geometryライブラリで中心点からの距離を円を描いて表す
Google Maps JavaScript APIのgeometryライブラリを利用して
ある地点を中心にして、そこからの距離を円で示すことができる地図を作ってみます。
実装したデモページはコチラ
表示されるマーカーをドラッグして動かすことで、円が拡大・縮小します
円が中心点から半径何メートルの範開を表示しているのかも表示されます
APIのリクエスト
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【取得したAPIキー】&sensor=false&language=js&libraries=geometry" charset="utf-8"></script>
HTML
<div id="displayDistance"></div> <div id="map_canvas" style="width: 100%;"></div>
CSS
html { height: 100%; }
body { height: 100%; margin:0; padding:0; }
#map_canvas { height:100%; }
JavaScript
var mayMap;
var service;
// マップの初期設定
function initialize() {
// Mapクラスのインスタンスを作成（緯度経度は池袋駅に設定）
var initPos = new google.maps.LatLng(35.729756, 139.711069);
// 地図のプロパティを設定（倍率、マーカー表示位置、地図の種類）
var myOptions = {
zoom: 16,
center: initPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// #map_canva要素にMapクラスの新しいインスタンスを作成
myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// newgoogle.maps.Circleを使って、円を描くための各プロパティを設定
var myCircle = new google.maps.Circle({
map : myMap,
center : initPos,
strokeWeight : 1,
strokeColor : '#ff0000',
fillColor : '#ff0000',
fillOpacity : 0.3
});
// マーカーを表示するためのcreateMarker関数を実行
var myMarker = createMarker({
position : new google.maps.LatLng(initPos.lat(), initPos.lng()),
map : myMap,
draggable: true
});
// 半径距離の数値を表示
google.maps.event.addListener(myMarker, 'position_changed', function(){
var myDistance = google.maps.geometry.spherical.computeDistanceBetween(initPos, myMarker.getPosition());
myCircle.setRadius(myDistance);
document.getElementById("displayDistance").innerHTML="池袋駅を中心に半径" + myDistance.toFixed(2) + "m範囲内"
});
}
// 該当する位置にマーカーを表示
function createMarker(options) {
// Markcrクラスのオブジェクトmarkerを作成
var marker = new google.maps.Marker(options);
return marker;
}
// ページ読み込み完了後、Googleマップを表示
google.maps.event.addDomListener(window, 'load', initialize);
処理の概要
- ・
initialize関数では、まずnewgoogle.maps.LatLngを使って、Mapクラスのインスタンスを作成し、変数「initPos」で参照。
引数には自動的にジオコーデイング(住所や施設名を緯度・経度に変換すること)されるので、0で初期化しています。 - ・変数「
mapOptions」は地図のプロパティを設定するコードです。
地図の中心座標を決めるcenterには変数「initPos」（ここでは0）、
倍率を表すzoomには16、
地図の種類を表すmapTypeldには「ROADMAP」 (標準の道路地図)を指定します。 - ・
newgoogle.maps.Circleを使って、円を描くための各プロパティを設定
中心点となるCenterには、緯度と純度を格納しているinitPos変数を指定します。
外枠の太さを表すstrokeWeight、
外枠の色を表すstrokeColor、
円の塗りつぶし色を表すfillColor、
円の透明度を表すfillOpacityの各設定を行い、変数「myCircle」に格納します。 - ・マーカーを表示するための
createMarker関数を実行します。
位置となるpositionに変数「initPos」に格納されている緯度initPos.latと経度initPos.lngを指定。
ドラック操作で、マーカーを動かせるようにdraggableをtrueに指定します - ・マーカーをドラッグしたときに、円を描いて半径の距離を表示するために、
google.maps.eventのaddListenerメソッドを使って、position_changedのイ ベントリスナーを登録
google.maps.geometry.spherical.computeDistanceBetween(A, B);
引数となるＡとＢの２点間の距離を求められるので、id名displayDistance要素にテキスト表示させます（myDistance.toFixed(2)で小数点以下2桁まで表示） - ・
createMarker関数でmapプロパティに位置情報を保持しているmyOptionsオブジェクトを指定し、マーカーを表すMarkerクラスのオブジェクトmarkerを作成します。
Google Maps JavaScript APIのライブラリについて
Google Maps JavaScript APIでは追加ライブラリをロードすることでマップ上に様々な表現を加えることができます。<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【取得したAPIキー】&sensor=false&language=js&libraries=geometry" charset="utf-8"></script>また、複数のライブラリをリクエストするには、リクエストをコンマで区切ります。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【取得したAPIキー】&sensor=false&language=js&libraries=geometry,places" charset="utf-8"></script>
APIのライブラリ機能一覧
| drawing | グラフィカル インターフェースが提供され、ユーザーがポリゴンや長方形、ポリライン、円、マーカーなどをマップ上に描画できるようになります。 |
|---|---|
| geometry | 地球の表面上のジオメトリ値（距離や領域など）を計算するためのユーティリティ関数です （※今回使用したサンプルがコチラ） |
| places | 領域内にある施設、地理的位置、または有名なスポットなどのプレイスをアプリケーションが検索できるようにします。 （※利用したサンプルがコチラ） |
| visualization | ヒートマップレイヤーを使って、マップに可視化表現を追加することができます。 |
”drawing”は色んなサイト様で解説があるので、今回は”geometry”と”places”のライブラリについて掘り下げてみました。
”visualization”などはヒートマップと言われればイメージは沸くのですが
いざ実装させるとなると温度差の基準をどう設定すれば良いのかよくわからなかったので、今後も色々試してみたいと思います。
