GoogleMapクラス① | jAction

GoogleMapクラス①


このエントリーをはてなブックマークに追加

 

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
カテゴリー：プラグイン