GoogleMapクラスは、GoogleMapの貼り付けたり、現在情報の取得、マーカーの表示などを可能にするクラスです。
2部に分けて説明します。
1部では、GoogleMapの表示、現在地の取得の方法の説明
2部では、マーカーや吹き出しなどの細かいオプションを説明する予定です。
下記のようにGoogleMapをスマホ向けに表示することが可能になります。
デモはこちら
●チュートリアルサンプルはこちらをダウンロードして、こちらのチュートリアルをはじめてください。
準備として、index.htmlに①GoogleMapを埋め込むためのタグと、②GoogleMapに接続のためのアクセスダグ、③GgoogleMapクラスへのアクセスタグを追加します。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>テストサンプル</title> <script src="jaction.js"></script> <script src="Main.js"></script> <script src="googlemap.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div style="position:relative;"> <div id="map_div" style="position:absolute;z-index:1;"></div> </div> </body> </html> |
それでは実際にコードを書いていきます。
コードは、main.js に書き込んでいきます。
まず、最初に、基本的なMapの表示の仕方です。
GoogleMapクラスがあるので、そのオブジェクトをつくります。ちなみに、変数名はgooglemapとしていますが、任意の変数名でも結構です。
var googlemap=new GoogleMap(); |
次に経度と緯度を設定します。ここでは、経度35.711744、緯度139.70445にします。
//経度、35.711744 googlemap.lat=35.711744; //緯度を139.70445 googlemap.lon=139.70445; |
次に、ズームを設定します。1~15までの整数のみ設定可能になっております。ここでは、10にします。
googlemap.zoom=5; |
最後に、次のコードを入力すると、GoogleMapが表示されます。
googlemap.Display(); |
GoogleMapクラスでは次のようなオプションを用意してます。
//地図の横幅。300pxにした場合 googlemap.width=300; //地図の縦幅。400pxにした場合 googlemap.height=400; |
次にHTML5特有の機能、GeolocationAPIを利用して、現在地を取得して、それ中心とするGoogleMapを表示させてみたい思います。
最初に、現在地を取得するgetCurrentPositionクラスのオブジェクトを生成します。
var geo=new getCurrentPosition(); |
次に、現在地を取得するイベントをつくります。
geo.addEventListener(“onGeoMap”,this); |
現在地が取得できたら、起こすメソッドをつくります。
ここで、先程設置したイベントをremoveEventlistenerで消す処理も加えます。
this.getCurrentPosition=function() { geo.removeEventListener("getCurrentPosition",this); } |
次に、googlemapオブジェクトの経度と緯度に取得した、現在地の経度と緯度をいれ、実際に表示してみます。
現在地の経度と緯度はそれぞれ、geo.xとgeo.yで取得できます。
this.getCurrentPosition=function() { geo.removeEventListener("getCurrentPosition",this); //現在地の経度geo.xをいれる。 googlemap.lat=geo.x; //現在地の緯度geo.yをいれる。 googlemap.lon=geo.y; //mapを表示する。 googlemap.Display(); } |
これで、現在地を中心とするマップを表示させることができました。
2012年5月29日 1:56 AM
カテゴリー:プラグイン
コメントフィード