mammut: google maps version 3

Wednesday, June 16, 2010

google maps イベント

Google Maps API version 3のイベントは二つがある。

ユーザーイベント。DOMからGoogle Maps APIに伝播される。
Maps　APIオブジェクトのMVC状態変化を通知する。

ユーザーイベント。

UIイベント。マウスやキーボードイベントのようなユーザーイベントです。Maps　APIでは様々クロスブラウザの特徴を扱う必要なく、DOMイベントを監視し反応さセルメカニズムを提供します。UIステートが引数として渡されます。

MVC状態変化

　　　MVCオブジェクトは一般的にstate(状態)を持っています。オブジェクトのプロパティが変更した時は、APIはプロパティ変更通知（property_changedイベント）を発生します。例えば、地図のズームレベルが変更されると、zoom_changedイベント発生する。引数は何も渡しません。

イベントを登録する

通知を受け取るために、addListener()を使って、イベントハンドラを登録する。zoom_changedイベントを登録する。

google.maps.event.addListener(map, 'zoom_changed', functionA);

UIイベントの引数にアクセスする。

UIイベントは引数を渡し、イベントリスナーを使ってアクセスすることができます。’click’イベントで、通常はMouseクリックされた地図上の位置を意味するlatLngプロパティとスクリーン上のクリックされた位置を意味するpixelを渡す。

google.maps.event.addListener(map, 'click', function(event){

var mylatlng = event.latLng;

});

イベントハンドラ内でプロパティの取得と設定

MVC状態変化イベントは引数を渡しません。MVC状態変化のプロパティを調べたい時は、明示的なオブジェクトのgetProperty()メソッドをコールするのが良い。

Monday, June 14, 2010

Google Maps Version 3

Google Mapsを作り手順

scriptタグを使って、Map　API　JavaScriptを読み込みます。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

地図を表示するためのdiv要素を作成する


<div id="map" style="height:100%;width:100%"></div>

たくさんの地図プロパティの保持するためのJavascriptオブジェクト定数を作成する



function initilize(){

//location
var myLocation = new google.maps.LatLng(34.32322,113.323232);

//map option
var myOptions ={
   zoom: 8,
   center: myLocation,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   //mapTypeId:google.maps.MapTypeId.SATELLITE
   //mapTypeId: google.maps.MapTypeId.HYBRID
   //mapTypeId: google.maps.MapTypeId.TERRAIN

}

}

”map”オブジェクトを作成するためのjavascript関数を書きます。


   var map = new google.maps.Map(document.getElementById("map"), myOptions);

bodyタグのonloadイベントで、地図オブジェクトを初期化します。


   <body onload="initilize()">

   ......
   </body>