Part 2 Part2 UI 編 UI 編 Google マップと連携したページを 手軽に作成する Part1▶イントロダクション 2 山田祥寛 Gmap3 は jQuery プラグインの一種で、Google Part2 ▶UI 編 マップの機能を簡単に呼び出すための機能を提供 します。Google マップの標準 API である Google Maps API の薄いラッパーのようなライブラリで す。もちろん、Google Maps API を直接に利用 しても構いませんが、Gmap3 を利用することで、 jQuery の コ ー ド か ら よ り シ ン プ ル な コ ー ド で Google マップを操作できます。 名 称 Gmap3 分 類 UI Part3 ▶スマートフォン編 URL http://gmap3.net/ 関連ファイル jquery-1.9.0.js、gmap3.min.js ▲ Gmap3 で生成した地図 Part4 ▶小ネタ編 たとえばリスト 002-01 は、Gmap3 で Google タを指定することで、地図の表示を設定したり、 マップを表示する例です。Gmap3 を利用する マーカーや図形を追加していくのが Gmap3 の には、❶のように Google マップを表示するた 基本です。まず、最低限の地図を表示するには、 めの領域を用意しておきます。style 属性で map パラメータを設定します。 height/width プロパティを指定することで、 map パラメータには、入れ子で Google.maps. この値がそのまま地図の高さ/幅となります。 MapOption オブジェクト* 1 のプロパティを指 あとは、この領域に対して gmap3 メソッド 定します。サンプルでは最低限、中心座標 (緯度、 を呼び出すだけです。構文は、以下のとおり 経度) とズーム率 (0∼21。大きくなるほど拡大) です。 を設定しています。中心座標の緯度、経度には Part5 ▶フレームワーク編 $(マップを表すセレクタ).gmap3( { パラメータ名: 値,... }); HTML5 の Geolocation API * 2 で取得した現在 地の座標をセットします。 地図上に線分を描画する 指定できるパラメータには表 002-01 のような ものがあります。これらのパラメータに対して、 入れ子で Google Maps API に渡すべきパラメー 続いて、地図上に線分を描画します (リスト 02。図 002-01) 。表 002-01 で も 見 た よ う に、 002- Part6 ▶テスト編 表 002-01 ▶ Gmap3 プラグインの主なパラメータ 20 パラメータ 概要 map Google マップの基本設定 circle 円を描画 rectangle 矩形を描画 polyline 折れ線を描画 polygon 多角形を描画 marker マーカーを作成 Gmap3 では図形描画のための circle、polyline、 polygon、renctangle といったパラメータを用 意 し て い ま す が、折 れ 線 を 描 画 す る な ら ば * 1) Google Maps API の オ ブ ジ ェ ク ト で す。詳 細 は「Google (https://developers. Maps Javascript API V3 Reference」 google.com/maps/documentation/javascript/ reference)を参照してください。 * 2) 現在地の座標を取得するための API です。 Google マップと連携したページを手軽に作成する 2 Part1▶イントロダクション リスト 002-01 ▶ gmap3_basic.html Part3 ▶スマートフォン編 Part4 ▶小ネタ編 Part5 ▶フレームワーク編 polyline を利用します。 Part2 ▶UI 編 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Gmap3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script> <script type="text/javascript" src="js/gmap3.min.js"></script> <script type="text/javascript"> $(function(){ // Geolocation APIを利用できるかをチェック if (navigator.geolocation) { // Geolocation APIで現在位置を取得 navigator.geolocation.getCurrentPosition( function (pos) { // 現在位置を取得 var current = [ pos.coords.latitude, pos.coords.longitude ]; // Googleマップを表示 $('#map').gmap3({ map:{ options: { center: current, // 地図の中心点(現在位置をセット) zoom: 10 // ズーム率 } } }); } ); } else { alert('ブラウザがGeolocation APIに対応していません。'); } }); </script> </head> <body> <!--Googleマップを表示するための領域を準備--> <div id="map" style="width:500px;height:400px;"></div> ❶ </body> </html> 図 002-01 ▶地図の指定座標に線分を描画 polyline パラメータには、入れ子で google. maps.PolylineOptions オ ブ ジ ェ ク ト の プ ロ パ ティを指定します。サンプルで利用しているプ ロパティについては、コード内のコメントも合 Part6 ▶テスト編 わせて参照してください。path パラメータには、 [[ 緯度 , 経度 ],...] の配列形式で必要な数だけ折 れ線の座標を指定します。 21
© Copyright 2024 Paperzz