おやじプログラマー日記: javascript

カテゴリ「javascript」の19件の記事

2011年5月30日 (月)

「GoogleMap API V3」の使い方その７（ポリライン・ポリゴン）

■マップ上にポリライン・ポリゴンを表示

マップ上にポリライン（折れ線）及び、ポリゴン（多角形）を表示します。
ポリラインを表示するにはPolylineクラスを生成し、それをマップ上に設定します。また、ポリゴンを表示するにはPolygonクラスを生成し、それをマップ上に設定します。

以下の例は、5個の座標を用いてそれぞれ同じ形のポリライン、ポリゴンを表示します。ポリゴンは内部を薄い色で塗りつぶしを行います。 <head> <title>Google Map API v3-7</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var map = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個の座標(値は特に意味は無い) var latlngData = [ { lat:"36.067258", lng:"136.220604" }, { lat:"36.065487", lng:"136.230723" }, { lat:"36.062456", lng:"136.230704" }, { lat:"36.061456", lng:"136.220904" }, { lat:"36.063794", lng:"136.210064" } ]; // ５個の座標2(値は特に意味は無い) var latlngData2 = [ { lat:"36.057258", lng:"136.220604" }, { lat:"36.055487", lng:"136.230723" }, { lat:"36.052456", lng:"136.230704" }, { lat:"36.051456", lng:"136.220904" }, { lat:"36.053794", lng:"136.210064" } ]; var arrCoords = new Array(); for (i = 0;i < latlngData.length;i++) { // 座標地をlatlng値に変換 var latlng = new google.maps.LatLng(latlngData[i].lat, latlngData[i].lng); // latlng値を配列に退避 arrCoords.push(latlng); } var arrCoords2 = new Array(); for (i = 0;i < latlngData2.length;i++) { // 座標地をlatlng値に変換 var latlng2 = new google.maps.LatLng(latlngData2[i].lat, latlngData2[i].lng); // latlng値を配列に退避 arrCoords2.push(latlng2); } // ポリライン(折れ線)を生成し、マップに表示 var poly = new google.maps.Polyline({ map: map, //マップ path: arrCoords, //ポリラインの座標の列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//16進数形式のストロークの色 strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0) }); // ポリゴン(多角形)を生成し、マップに表示 var poly2 = new google.maps.Polygon({ map: map, //マップ paths: arrCoords2, //閉ループを示す座標列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//ストロークの色(16進数形式) strokeOpacity: 0.5, //ストロークの不透明度 fillColor: "#fc4040", //塗りつぶしの色(16進数形式) fillOpacity: 0.1 //塗りつぶしの不透明度(0.0～1.0) }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

投稿時刻 14:32 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

2011年5月27日 (金)

「GoogleMap API V3」の使い方その６（続々イベント）

■マップのイベントとマーカーのイベントの複合的な使い方

マップ上でクリックした位置にマーカーを表示し、さらにそのマーカーをクリックした時にマーカーの緯度経度の値を情報ウインドウに表示します。

この例は、Googleのサンプルとして乗っているものを変更したものです。
マップ上でのクリックイベント時の関数を設定し、その中でマーカーを生成し、さらに情報ウインドウの表示を行うように、マーカーのクリックイベント時の関数を設定しています。

また、マーカーを生成した時に、そのマーカーをグローバル変数の配列に保存し、その配列のマーカーを使って、再表示、クリア、削除処理を行っています。 <head> <title>Google Map API v3-6</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var map; // GoogleMapオブジェクトの変数宣言 var markers = []; // マーカー保存配列 function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); // マップのクリックイベントの関数登録 google.maps.event.addListener(map, 'click', function(event) { // マップ上の位置でマーカーを生成 addMarker(event.latLng); }); } // マーカーの生成関数 function addMarker(location) { // マーカーを生成 marker = new google.maps.Marker({ position: location, map: map }); // 情報ウインドウの生成とクリックイベント関数の登録処理 setMarkerListener(marker, location); // 生成されたマーカーを保存 markers.push(marker); } // 情報ウインドウの生成とクリックイベント関数の登録処理 function setMarkerListener(marker, location) { // 表示文字列の生成(緯度・経度) var contentString = "lat:" + location.lat() + "<br>" + "lng:" + location.lng(); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(marker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(map, marker); }); } // マップからマーカーの画像を消す(保存されたマーカーはそのまま) function clearMarkers() { if (markers) { for (i in markers) { markers[i].setMap(null); } } } // 保存されたマーカーをマップ上に表示 function showMarkers() { if (markers) { for (i in markers) { markers[i].setMap(map); } } } // マップからマーカーの画像を消し、マーカーも削除 function deleteMarkers() { if (markers) { clearMarkers(); markers.length = 0; } } </script> </head> <body onload="initialize();"> マップ上をクリックするとマーカーを表示します。<br> さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。 <div> <input onclick="clearMarkers();" type=button value="マーカー消去"/> <input onclick="showMarkers();" type=button value="マーカー表示"/> <input onclick="deleteMarkers();" type=button value="マーカー削除"/> </div> <div id="map" style="width: 400px; height: 300px;"></div> </body> </html>
マップ上をクリックするとマーカーを表示します。
さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。

投稿時刻 17:31 GoogleMap API, javascript | 個別ページ | コメント (7) | トラックバック (0)

「GoogleMap API V3」の使い方その５（続イベント）

■マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、クリックイベントの関数の中でその情報ウインドウを表示する様にしています。
<head> <title>Google Map API v3-5</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: "InfoWindow - test", maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

■複数のマーカーイベントで情報ウインドウを表示

「使い方その３（マーカーの表示）」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときにそれぞれのマーカーの内容を表示する例を示します。
<head> <title>Google Map API v3-5</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> // GoogleMapオブジェクトの変数宣言 var gmap; function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個のマーカー(座標に特に意味は無い) var markerData = [ { lat:"36.065487", lng:"136.230723", title:"marker-1" }, { lat:"36.067258", lng:"136.220604", title:"marker-2" }, { lat:"36.063794", lng:"136.220264", title:"marker-3" }, { lat:"36.062456", lng:"136.230704", title:"marker-4" }, { lat:"36.061456", lng:"136.220904", title:"marker-5" } ]; for (i = 0;i < markerData.length;i++) { // マーカーを生成 var marker = new google.maps.Marker({ map: gmap, position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng), title: markerData[i].title }); // 情報ウインドウの生成とクリックイベント関数の登録処理 setMarkerListener(marker, markerData[i].title); } } // 情報ウインドウの生成とクリックイベント関数の登録処理 function setMarkerListener(marker, title) { // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: title, maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(marker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, marker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

最初の例で説明しましたイベントの処理とは、少し変わった部分があります。先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられてクリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったままになっています。それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。

<head> <title>Google Map API v3-5</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> // GoogleMapオブジェクトの変数宣言 var gmap; function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個のマーカー(座標に特に意味は無い) var markerData = [ { lat:"36.065487", lng:"136.230723", title:"marker-1" }, { lat:"36.067258", lng:"136.220604", title:"marker-2" }, { lat:"36.063794", lng:"136.220264", title:"marker-3" }, { lat:"36.062456", lng:"136.230704", title:"marker-4" }, { lat:"36.061456", lng:"136.220904", title:"marker-5" } ]; for (i = 0;i < markerData.length;i++) { // マーカーを生成 var marker = new google.maps.Marker({ map: gmap, position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng), title: markerData[i].title }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: markerData[i].title, maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(marker, 'click', function(event) { alert("marker:"+this.getTitle()); // 情報ウィンドウの表示 infoWindow.open(gmap, marker); }); } } </script> </head> <body onload="initialize()"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

投稿時刻 09:50 GoogleMap API, javascript | 個別ページ | コメント (2) | トラックバック (0)

2011年5月26日 (木)

「GoogleMap API V3」の使い方その４（イベント）

■マップのイベント

マップなどの各種オブジェクトに対して、ユーザインターフェース等からのイベントを処理できるようになっています。
以下の例は、マップ上でクリックした場所の緯度・経度をアラートで表示します。
<head> <title>Google Map API v3-4</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マップのクリックイベントの関数登録 google.maps.event.addListener(gmap, 'click', function(event){ alert("クリック!! 緯度=" + event.latLng.lat() + " 経度=" + event.latLng.lng()); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>
「google.maps.event」の「addListener」メソッドを使って、イベントリスナーを登録します。「addListener」の引数について

addListener(instance, eventName, handler)

引数	タイプ	内容
instance	Object	対象オブジェクトのインスタンス (例ではマップなので gmap を渡す)
eventName	string	イベント名 ('click','dblclick','mouseup','mousedown','mouseover','mouseout'等)
handler	function	リスナ関数 (例の様に直接宣言するか、別に関数を宣言しその名前を指定)

この例のリスナ関数の引数は、MouseEventのオブジェクトが返されてきます。引数の名前を「event」としましたが、分かりやすい識別名を宣言します。「event」のオブジェクトには、タイプが「LatLng」のプロパティ「latLng」が存在します。それでタイプ「LatLng」の緯度取得メソッドである「lat()」を使って、緯度を取得します。

■マーカーのイベント

マーカーをクリックしたときに、アラートを表示する簡単な例を示します。
<head> <title>Google Map API v3-3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { alert("福井駅"); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

マーカーのクリックイベントのハンドラで「function(event)」と宣言していますが、ブラウザによって返されるeventオブジェクトのプロパティが異なるため、これを利用することはないと思われます。

もし、マーカーの緯度経度を取得するのであれば、以下の様に位置（緯度経度）取得メソッドを使用します。
// マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { var latlng = this.getPosition(); alert("福井駅 lat:"+latlng.lat()+" lng:"+latlng.lng()); }); 補足説明ですが、「this」キーワードは、実行中のコードが「自分自身」を表すオブジェクトにアクセスするもので、この場合では、functionを持っているマーカーオブジェクトを指し示し、マーカーオブジェクトが持っているメソッドをアクセスすることができます。

投稿時刻 10:56 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (1)

2011年5月25日 (水)

「GoogleMap API V3」の使い方その３（マーカーの表示）

■簡単なマーカーの表示
前回の地図の上に、簡単なマーカーを表示したいと思います。
<head> <title>Google Map API v3-3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ position: latlng, // 緯度・経度は地図の中心 title: "maker-test" // ツールチップ }); // マーカーを地図の中心に表示 gmarker.setMap(gmap); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>
マーカーを表示するときは、最初にマップを生成します。その後、マーカーを生成し、マーカーをマップに関連付けて表示させます。
マーカーのオプションに「title: "maker-test"」を指定していますので、マーカーのところにカーソルを持っていくと "maker-test"のロールオーバーが表示されます。

マーカークラスについて詳しくは以下のURLを参照してください。
Marker クラス
尚、「setMap」を使わなくても、以下の様にオプションで一括で指定しても同じことができます。（マーカーの生成部分のみ抜粋）
// GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを地図の中心に表示(一括) var gmarker = new google.maps.Marker({ map: gmap, position: latlng, // 緯度・経度は地図の中心 title: "maker-test" // ツールチップ });

■複数マーカーの表示

複数のマーカーを表示したいことはよくあることだと思います。今回は５個の適当な緯度・経度のマーカーの表示を行います。
<head> <title>Google Map API v3-3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個のマーカー(座標に特に意味は無い) var markerData = [ { lat:"36.065487", lng:"136.230723", title:"marker-1" }, { lat:"36.067258", lng:"136.220604", title:"marker-2" }, { lat:"36.063794", lng:"136.220264", title:"marker-3" }, { lat:"36.062456", lng:"136.230704", title:"marker-4" }, { lat:"36.061456", lng:"136.220904", title:"marker-5" } ]; for (i = 0;i < markerData.length;i++) { // マーカーを生成 var marker = new google.maps.Marker({ position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng), title: markerData[i].title }); // マーカーを地図に表示 marker.setMap(gmap); } } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

次回はイベントを取り上げたいと思います。

投稿時刻 11:17 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

2011年5月23日 (月)

「GoogleMap API V3」の使い方その２

前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。
<head> <title>Google Map API v3-2</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); // JR福井駅の緯度・経度 var mapOptions = { zoom: 14, mapTypeControl: true, // 地図の種別切り替えを表示 mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT, //右上配置 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR//水平ラジオボタンバー }, navigationControl: true, // 拡大縮小のナビを表示 navigationControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, //左上配置 style: google.maps.NavigationControlStyle.ZOOM_PAN //ズームスライド・移動パッド }, scaleControl: true, // 縮尺の表示 scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, //左下配置 style: google.maps.ScaleControlStyle.DEFAULT //標準のスケール }, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>

■mapTypeControl（地図の種別切り替え）

マップタイプコントロールの詳細を指定したい場合は、mapTypeControlをtrueにし、mapTypeControlOptionsの設定を行います。
mapTypeControlOptionsにはposition、style等のオプションがあります。それぞれの設定値は以下の通りです。

positionの設定は、以下のControlPositionクラスの定数値を用います。

定数	内容
`TOP`	上中央
`TOP_LEFT`	左上
`TOP_RIGHT`	右上
`LEFT`	左
`RIGHT`	右
`BOTTOM`	下中央
`BOTTOM_LEFT`	左下(Google ロゴの右側)
`BOTTOM_RIGHT`	右下(著作権の左側)

styleの設定は、以下のMapTypeControlStyleクラスの定数値を用います。

定数	内容
`DEFAULT`	デフォルトのマップタイプコントロール
`DROPDOWN_MENU`	ドロップダウンメニュー
`HORIZONTAL_BAR`	水平ラジオボタンバー

■navigationControl（拡大縮小のナビ）

拡大縮小のナビの詳細を指定したい場合は、navigationControlをtrueにし、navigationControlOptionsの設定を行います。

styleの設定は、以下のNavigationControlStyleクラスの定数値を用います。

定数	内容
`ANDROID`	小さいズームコントロール（Androidのマップソフトに似ている）
`DEFAULT`	デフォルトのナビゲーションコントロール
`SMALL`	ズームのみのナビゲーションコントロール
`ZOOM_PAN`	ズームスライドと双方向の移動パッド

■scaleControl（縮尺）

縮尺の詳細を指定したい場合は、scaleControlをtrueにし、scaleControlOptionsの設定を行います。

styleの設定は、以下のScaleControlStyleクラスの定数値を用います。定数値としては現状、「DEFAULT」しかないので、これを指定しなくても問題ありません。

投稿時刻 11:14 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

2011年5月20日 (金)

「GoogleMap API V3」の使い方その１

「GoogleMap API」もバージョンが３．０になってからしばらく経ちますが、「GoogleMap API V3」を使う機会がありましたので「GoogleMap API V3」について数回に分けてチュートリアルを載せていきます。

今回は最初として、簡単な地図のみを表示することを行います。（JR福井駅を中心とした地図）

<head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); // JR福井駅の緯度・経度 var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body> </html>

手順としては以下の様に行います。

１）Google Maps API を読み込む
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script>
headタグ内に上記のように宣言します。「sensor」パラメータはこのHTMLがユーザー位置情報の取得にセンサーを使用するかどうかを示すためのもので、必ず指定しなければなりません。
この場合は位置情報は必要ありませんので、「false」と指定します。
最近までこの方法でOKでしたが、GoogleにおいてGoogleMapを使用するKEYを取得しないと、画面上のマップが表示されなくなりました。
そのため、js?sensor=false を js?key=(取得したkeyコード) の様に変更が必要です。

２）bodyタグ内に地図を表示する領域をdivタグで宣言する
<body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body>
bodyタグの中にdivタグで縦・横300pxの領域を、idを「map」として宣言します。

３）Google Maps APIに必要なオプションを宣言する
// Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); // JR福井駅の緯度・経度 var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng };
最初の「google.maps.LatLng」はパラメータとして渡される緯度・経度を「LatLng」クラスのデータに変換します。
次は、GoogleMapオブジェクトを生成するためのパラメータですが、最小限必要な地図の解像度「zoom」、地図の表示形式「mapTypeId」、地図の中心の緯度・経度「center」を宣言します。
（基本的には必須のもののみで取りあえず地図の表示はできます）
パラメータはその他以下の様なものがあります。ここに示したもの以外のオプションがあります。詳しくは以下のURLを参照してください。

MapOptions オブジェクト

パラメータ	データタイプ	内容
`backgroundColor`	`string`	地図の DIV の背景に使用される色。
`center`	`LatLngクラス`	地図の最初の中心。※必須
`mapTypeControl`	`boolean`	マップタイプコントロールの有効/無効（初期時の状態）。
`mapTypeControlOptions`	`MapTypeControlOptionsクラス`	マップタイプコントロールの最初の表示オプション。
`mapTypeId`	`MapTypeIdクラス`	地図の最初の mapTypeId。※必須
`navigationControl`	`boolean`	ナビゲーション・コントロールの有効/無効（初期時の状態）。
`navigationControlOptions`	`NavigationControlOptionsクラス`	ナビゲーション・コントロールの最初の表示オプション。
`noClear`	`boolean`	true の場合、地図の DIV の内容を消去してはいけません。
`scaleControl`	`boolean`	スケールコントロールの有効/無効（初期時の状態）。
`scaleControlOptions`	`ScaleControlOptionsクラス`	スケールコントロールの最初の表示オプション。
`scrollwheel`	`boolean`	地図上でのスクロール・ホイールを使用したズーム指定。（デフォルトでは、スクロール・ホイールは有効）
`zoom`	`number`	地図の最初のズームレベル。※必須

４）bodyタグのonloadイベント時に、宣言されたオプションをパラメータとして渡し、GoogleMapの生成を行う。
// GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
GoogleMapのコンストラクタ「google.maps.Map」のパラメータはHTMLのコンテナ（DIVタグの要素）と３）で指定されたオプションを渡します。
この処理により「id="map"」のDIVタグに地図が表示されます。初回としては簡単な地図の表示でしたが、今後はいろいろな処理について書いていきたいと思います。
尚、「GoogleMap API V3」について本家の説明がありますので、参考にしてください。
Google Maps JavaScript API V3

投稿時刻 13:41 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

2011年5月19日 (木)

javascriptのクラス

今回はjavascriptのクラスについてです。
function hoge() {} var obj = new hoge(); alert("obj:" + obj);
上の例は、一番簡単なクラスを宣言してみました。
「function」文で宣言だけをしたものですが、「new」宣言して「obj」に代入してやればクラス「hoge」が生成されて返されます。
「function」で宣言されたものをそのまま実行すれば、いわゆる関数ですが「new」で作成すればクラスになるということです。

「alert」の結果は”obj:[object Object]”が表示されます。
function hoge() { this.property1 = "A"; this.property2 = "B"; } var objX = new hoge(); alert("objX.property1:" + objX.property1); var objY = new hoge(); alert("objY.property1:" + objY.property1); objY.property1 = "Y"; alert("objY.property1:" + objY.property1 + " objX.property1:" + objX.property1);
上の例は、一番簡単なクラスにプロパティを追加して宣言しました。
別の変数に「new」宣言して代入してやれば別々のインスタンス「hoge」クラスが生成されます。

「alert」の結果は”objX.property1:A”、”objY.property1:A”が表示されます。
同じプロトタイプの値を持つインスタンスが生成されたことが分かります。
異なるインスタンスかどうかは、”objY.property1”への代入で最後の「alert」の結果がかわることでわかります。

function hoge() {} var obj = new hoge(); dumpObject(obj); obj.property1 = "A"; dumpObject(obj); var dumpObject = function(obj) { var str = ""; for(var i in obj) { if (str) str += "\n"; str += i + ":\t"+ obj[i]; } if (str) { alert(str); } else { alert("Property is nothing."); } }
上の例は、プロパティの無い場合に、後付でプロパティを強制的に代入すればその時点でプロパティが生成されるようです。
「dumpObject」関数はオブジェクトのプロパティ内容を表示するように作成した、簡易の変数ダンプ関数です。

そこでプロパティ宣言をするところで「prototype」をつけてみます。
function hoge() {} hoge.prototype.property1 = "A"; var objX = new hoge(); var objY = new hoge(); dumpObject(objX); //「property1: A」と表示 dumpObject(objY); //「property1: A」と表示 objX.property1 = "B"; dumpObject(objX); //「property1: B」と表示 dumpObject(objY); //「property1: A」と表示
「hoge.property1 = "A";」と宣言したものと変わらない感じですが、内部的には最初の2個の「new」宣言を行った時点では「objX」「objY」のproperty1は同じものを参照しています。
その後「objX.property1 = "B";」の時点で、「objX.property1」が別のところに生成され、別のプロパティとして存在することになります。

それでは、prototypeを関数に拡張してみます。
function hoge() {} hoge.prototype.func1 = function() { alert("func1"); }; var objX = new hoge(); var objY = new hoge(); var objZ = new hoge(); objZ.func1 = function() { alert("funcZZZZZ"); }; objX.func1(); //　prototype.func1を実行 objY.func1(); //　prototype.func1を実行 objZ.func1(); //　objZのfunc1を実行
この例から、同じクラス宣言で同じ関数ではあるが、特別に機能を変えたいときなどに便利な感じです。

投稿時刻 18:04 javascript | 個別ページ | コメント (0) | トラックバック (0)

2011年5月 7日 (土)

Javascriptでの論理OR、論理ANDの注意点

Javascriptで変数を判定する場合に、判定条件が2個以上あるときに論理演算を使います。
例として以下の様な感じでしょうか。
var x,y; // いろいろな処理・・・ if ((x > 10) && (y > 20)) { // xが10より大きく、かつ、yが20より大きい場合の処理 } if ((x > 10) || (y > 20)) { // xが10より大きいか、または、yが20より大きい場合の処理 }
最初のif文は(x > 10)の論理式と(y > 20)の論理式をAND演算で結合し判定しています。
また、次のif文はそれぞれの論理式をOR演算で結合しています。

これらを以下の様にしてみると、新しい変数h1、h2にはそれぞれ論理演算の結果であるtrueもしくはfalseの値が設定されます。
var x, y; var h1, h2; h1 = (x > 10) && (y > 20); h2 = (x > 10) || (y > 20);
論理OR、論理ANDの前後が論理式の場合は分かりやすいのですが、それが式そのものであった場合はどうなるでしょうか。
以下の様に書いてみます。
var x, y; var h1, h2; h1 = x || 10; h2 = y && 20;
この例では、「x || 10」の「x」の値がfalseと判定されない値（空では無い文字列, 0ではない数値, オブジェクト等）の場合、その値が「h1」に代入されます。この場合、論理演算子の右側の「10」は判定されないことになります。
また、「x」の値がfalseと判定された場合は「10」が「h1」に代入されます。

「y && 20」の「y」の値がfalseと判定された場合は、論理ANDなので右側の「20」は評価されずにfalseが「h2」に代入されます。
また、「y && 20」の「y」の値がfalseと判定されない場合は、右側の「20」が評価され「h2」にその値が代入されます。

これらの考え方で「(x > 10) && (y > 20)」および「(x > 10) || (y > 20)」を再び見てみれば分かりやすいと思います。

「x || 10」の方法を関数の引数のデフォルト値設定などで利用できると思われます。
function hoge(width, height, str) { var w = width || 100; var h = height || 200; var s = str || "default"; // hogeの処理・・・ }

投稿時刻 10:51 javascript | 個別ページ | コメント (0) | トラックバック (0)

おやじプログラマー日記

コンピュータ業界に身をおいて３０年あまり…VB.NET・OracleなどのTIPS、おやじの独り言

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad