Google Maps API V3
(→その他) |
(→参考) |
||
(1人の利用者による、間の3版が非表示) | |||
719行: | 719行: | ||
* https://developers.google.com/maps/?hl=ja | * https://developers.google.com/maps/?hl=ja | ||
+ | * https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja | ||
+ | |||
<pre> | <pre> | ||
728行: | 730行: | ||
==その他== | ==その他== | ||
http://www.kuhalabo.net/mapcolor/demo.html | http://www.kuhalabo.net/mapcolor/demo.html | ||
+ | |||
+ | http://www.kuhalabo.net/~kuha/tutorial0/demo3/demo03_3.html | ||
+ | |||
[[Category:授業|授業]] | [[Category:授業|授業]] |
2017年9月30日 (土) 07:29時点における最新版
目次 |
[編集] 概要
Google Maps API V3を使ってみる。
[編集] 地図の表示
まずはここから。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <title>Google Maps API サンプル</title> </head> <body> <p>Google Maps APIを使ったサンプルです。</p> </body> </html>
[編集] Google Maps APIの取得
- GoogleのサイトからAPIをインクルードする。
- センサーの指定sensor=XXXXは必須
- trueの場合、端末のGPSなどから現在位置情報を使用する。
- flaseの場合、現在位置情報は使用しない。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
必要に応じて、言語の指定などを指定する場合は、以下の通り。(しなくてもよい)
- デフォルトでは、ブラウザの言語設定になる。
- 以下は、明示的に言語を日本語に設定している
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
英語設定の場合は以下の通り
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
[編集] 地図表示エリアの記述
body内にdivで地図を表示する領域を指定する。
- idでdiv要素に名前をつける。この例は、map_canvas
- widthとheightで領域のピクセルを指定
<div id="map_canvas" style="width:500px; height:300px"></div>
CSSを記述する。
- ブラウザによっては、サイズが指定されていないと、0 x 0 ピクセルと見なされて地図が表示されないことがある。
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style>
[編集] 地図表示のJavaScript
head内に地図を定義するJavaScriptを<script>タグで囲って記述する。
- google.maps.LatLngで緯度・経度クラスオブジェクトを作る
- 地図表示に使う情報をoptionとして指定
- 必須のoptionは、zoom,center,mapTypeId
- 他のoptionは、https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapOptions
- google.maps.Mapで地図クラスオブジェクトを作る
- 地図をbody内に表示するdiv領域map_canvasを指定する。
<script type="text/javascript"> //<![CDATA[ function initialize() { var latlng = new google.maps.LatLng(35.463536,139.32945); var opts = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); } //]]> </script>
[編集] 地図表示スクリプトの呼び出し関数
bodyタグにonloadオプションで表示と同時に呼び出される関数initialize()を指定する。
<body onload="initialize()">
[編集] 完成版
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <title>Google Maps API サンプル</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //<![CDATA[ function initialize() { var latlng = new google.maps.LatLng(35.463536,139.32945); var opts = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); } //]]> </script> </head> <body onload="initialize()"> <p>Google Maps APIを使ったサンプルです。</p> <div id="map_canvas" style="width:500px; height:300px"></div> </body> </html>
- 緯度経度、ズームの値の取得は、地図上で右クリック
- 表示場所、ズーム、マップタイプを変えてみる
- HYBRID This map type displays a transparent layer of major streets on satellite images.
- ROADMAP This map type displays a normal street map.
- SATELLITE This map type displays satellite images.
- TERRAIN This map type displays maps with physical features such as terrain and vegetation.
- MapTypeIdについては、以下を参照
[編集] ボタンで地図の変更
[編集] 地図の種類の変更
mapオブジェクトをグローバルに変更
var map;
衛星地図に変更する関数を書く。
// 衛星地図に変更する function changeMapType() { map.setMapTypeId(google.maps.MapTypeId.SATELLITE); }
上記関数を呼び出すボタンを作る。
<input type="button" value="衛星地図に変更" onClick="changeMapType()" />
[編集] 位置の移動
中心位置を変更
var osaka = new google.maps.LatLng(34.694203,135.502625); // 中心位置を変更する function changeCenter() { map.setCenter(osaka); }
滑らかに移動
var senzu = new google.maps.LatLng(35.46628,139.337497); //滑らかに移動 function changeCenterSenzu() { map.panTo(senzu); }
指定したピクセルだけ移動
- 地図の座標系
- 西から東(x 値の場合)に増える
- 北から南(y 値の場合)に増える
//指定したピクセルだけ移動 function gotoNorthEast() { map.panBy(100,-50); }
[編集] 地図の座標の取得
var latlng = map.getCenter(); var lat = latlng.lat(); var lng = latlng.lng();
[編集] イベントリスナー
地図上をクリックすると、緯度・経度がアラートウィンドウに表示される。
// clickイベントを取得するListenerを追加 google.maps.event.addListener(map, 'click', clickEventFunc); function clickEventFunc(event) { alert(event.latLng.toString()); }
Mapクラスにおける「click」イベント発生時に呼び出されるfunctionの引数は、MouseEvent。
- https://sites.google.com/site/gmapsapi3/Home/v3_reference
- https://developers.google.com/maps/documentation/javascript/events?hl=ja
地図上をクリックすると、緯度・経度がtable内に表示される。
google.maps.event.addListener(map, 'click', clickEventFunc2); function clickEventFunc2(event) { document.getElementById("show_lat").innerHTML = event.latLng.lat(); document.getElementById("show_lng").innerHTML = event.latLng.lng(); }
<table border="1"> <tr><th>LAT</th><td id="show_lat"></td></tr> <tr><th>LNG</th><td id="show_lng"></td></tr> </table>
[編集] オーバーレイ
オーバーレイは緯度/経度座標に固定された地図上のオブジェクト。 たとえば、マーカー、情報ウィンドウ、ポリライン、ポリゴン・・・
[編集] マーカー
Markerの設定
var mkopts = { position: latlng, map: map, title: "Tokyo Koogei" }; var marker = new google.maps.Marker(mkopts);
マーカーをボタンで表示・非表示
function markerOn() { marker.setVisible(true); } function markerOff() { marker.setVisible(false); }
マーカー<br> <input type="button" value="出す" onclick="markerOn()" /> <input type="button" value="消す" onclick="markerOff()" />
マーカーをドラッグ可能にする/ マーカーをアニメーション表示する
var mkopts = { position: latlng_koogei, map: map, draggable: true, animation: google.maps.Animation.DROP, //animation: google.maps.Animation.BOUNCE, title: "Tokyo Koogei大学" };
マーカー移動に関する他のオプションも試してみる。
dragCrossMove bouncy autoPan
マーカーアニメーション表示のトグル関数
function toggleBounce() { if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } }
マーカーとして独自のアイコンを設定
var image = "./img/icon.png"; var mkopts01 = { position: senzu, map: map, title: "千頭橋", icon: image }; var marker1 = new google.maps.Marker(mkopts01);
より複雑な独自マーカーを配列で指定
var places = [ ['小鮎幼稚園', 35.46266214773244, 139.32520138092036, 4], ['小鮎中', 35.46203296822141, 139.32327019042964, 5], ['島津製作所', 35.46112414468374, 139.326574671936, 3], ['小鮎郵便局', 35.46378067693368, 139.3217681533813, 2], ['本禅時', 35.45944628963795, 139.3226693756103, 1] ]; function setMarkersOn(map, locations) { var image = new google.maps.MarkerImage('img/flag.png', new google.maps.Size(20, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shadow = new google.maps.MarkerImage('img/flag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var places = locations[i]; var myLatLng = new google.maps.LatLng(places[1], places[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: places[0], zIndex: places[3] }); } }
[編集] 情報ウィンドウ(ふきだし)
情報ウィンドウの表示
var latlng = new google.maps.LatLng(35.463536,139.32945); var iwopts = { content: 'こうげい', position: latlng }; var infowindow = new google.maps.InfoWindow(iwopts); infowindow.open(map);
情報ウィンドウを閉じる
infowindow.close();
[編集] ポリライン、ポリゴン
- https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Polylines
- https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Polygons
[編集] 円、矩形(四角形)
//Circle生成 var cityCircle; function setCircle() { var circleOpts = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, center: senzu, radius: 200 }; cityCircle = new google.maps.Circle(circleOpts); } function circleOn() { cityCircle.setMap(map); } function circleOff() { cityCircle.setMap(null); } //Rectangle生成 var cityRectangle; function setRectangle() { var cityBounds = new google.maps.LatLngBounds(honzen,senzu); var rectangleOpts = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, bounds: cityBounds }; cityRectangle = new google.maps.Rectangle(rectangleOpts); } function rectangleOn() { cityRectangle.setMap(map); } function rectangleOff() { cityRectangle.setMap(null); }
表示・非表示ボタン
円 <input type="button" value="描画" onClick="circleOn()" /> <input type="button" value="消す" onClick="circleOff()" /> 矩形 <input type="button" value="描画" onClick="rectangleOn()" /> <input type="button" value="消す" onClick="rectangleOff()" />
[編集] ジオコーディング
- https://developers.google.com/maps/documentation/geocoding/index?hl=ja
- Google Maps JavaScript API V3 サービス
[編集] 住所から緯度経度情報を取得
住所や場所を入力して、地図にマーカーを表示する。
var map; var geocoder; function initialize() { //ジオコーダの設定 geocoder = new google.maps.Geocoder(); //地図の設定 var opts = { zoom: 15, center: latlng_koogei, mapTypeId: google.maps.MapTypeId.ROADMAP //mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById("map_canvas"), opts); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); }
検索結果は、resultオブジェクトに入っており、 result[0]が第1候補、result[1]が第2候補、result[2]が第3候補というように、候補順に結果が配列に収められている。
住所入力テキストボックスと検索ボタン
<div> 場所を入力: <input id="address" type="textbox" value=""> <input type="button" value="Encode" onclick="codeAddress()"> </div>
[編集] 緯度経度情報から住所を取得(リバースジオコーディング)
イベントリスナーを利用して、クリックした位置の緯度経度情報から、住所を取得してテーブルに表示する。
google.maps.event.addListener(map, 'click', clickGetLatlng); function clickGetLatlng(event) { var lat = event.latLng.lat(); var lng = event.latLng.lng(); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { marker = new google.maps.Marker({ position: latlng, map: map }); document.getElementById("show_address").innerHTML = results[0].formatted_address; } } else { alert("Geocoder エラー: " + status); } }); }
緯度、経度、住所を表示するテーブル
<table border="1"> <tr><th>緯度</th><td id="show_lat">ido</td></tr> <tr><th>経度</th><td id="show_lng">keido</td></tr> <tr><th>住所</th><td id="show_address">address</td></tr> </table>
緯度経度情報から住所を取得して、テーブル内に記述する関数
function codeLatLng(lat,lng) { var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { document.getElementById("show_address").innerHTML = results[0].formatted_address; } } else { alert("Geocoder エラー: " + status); } }); }
[編集] GPSによる現在位置の取得GeoLocation
sensorをtrueにする。
<script src="http://maps.google.com/maps/api/js?v=3&sensor=true" type="text/javascript" charset="UTF-8"></script>
navigator.geolocation.getCurrentPositionで現在位置の緯度経度情報をGPSから取得する。
var map; function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(0, 0); var opts = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map_camvas"), opts); // W3C Geolocationを使う if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleGeolocation,handleNoGeolocation); } else { alert("W3C Geolocationがありません"); } } function handleGeolocation(position) { // 位置情報を取得 var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(latlng); } // エラーの内容を表示 function handleNoGeolocation(err) { var errCodeStr; // エラー内容を示す文字列を用意。 if (err.code == 0) { errCodeStr = "UNKNOWN_ERROR"; } else if (err.code == 1) { errCodeStr = "PERMISSION_DENIED"; } else if (err.code == 2) { errCodeStr = "POSITION_UNAVAILABLE"; } else if (err.code == 3) { errCodeStr = "TIMEOUT"; } else { errCodeStr = "想定外"; } var errStr = "失敗 [" + err.code + "] " + errCodeStr; // 失敗内容をふきだしで表示。位置はいい加減。 alert(errStr); }
[編集] サイドバーとの連動
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3"></script> <script type="text/javascript"> //<![CDATA[ var restaurantList = [ {"latlng":[35.454839,139.34432],name:"○屋製麺店",comment:"味玉塩ラーメンがおすすめ"}, {"latlng":[35.443127,139.299007],name:"セルバジーナ",comment:"自家製地ビールのイタリアン"}, {"latlng":[35.44503,139.312407],name:"アマンダンヒルズ",comment:"身近なフレンチレストラン"}, {"latlng":[35.436093,139.314078],name:"HAPPY cafe 食堂",comment:"カレーとドリアがおいしい"}, {"latlng":[35.490311,139.364496],name:"My Lan 美蘭",comment:"ベトナム料理がおいしい"}, {"latlng":[35.464021,139.331918],name:"工芸大学食MESA",comment:"カフェテリア形式レストラン"} ]; var map; var infowindow; var geocoder; function initialize() { //地図の生成 var opts = { //center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), opts); //地図上にマーカーを配置していく var bounds = new google.maps.LatLngBounds(); var restaurant, i, latlng; for (i in restaurantList) { //マーカーを作成 restaurant = restaurantList[i]; latlng = new google.maps.LatLng(restaurant.latlng[0], restaurant.latlng[1]); bounds.extend(latlng); var marker = createMarker(latlng, restaurant.name, restaurant.comment); //サイドバーのボタンを作成 createMarkerButton(marker); } //マーカーが全て収まるように地図の中心とズームを調整して地図表示 map.fitBounds(bounds); } function createMarker(latlng, name, comment) { //マーカーを作成 var marker = new google.maps.Marker({ position : latlng, map : map, title : name }); //マーカーがクリックされたら、情報ウィンドウを表示 google.maps.event.addListener(marker, "click", function(){ if(infowindow) infowindow.close(); var iwopts = { content: "<b>" + name + "</b><br>" + comment }; infowindow = new google.maps.InfoWindow(iwopts); infowindow.open(map, marker); }); return marker; } function createMarkerButton(marker) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } window.onload = initialize; //]]> </script> </head> <body> <h1>厚木のグルメマップ</h1> <div id="map_canvas"></div> <div id="side_bar"> <ul id="marker_list"></ul> </div> </body> </html>
html, body { width : 100%; height : 100%; margin : 0; } #map_canvas { width:100%; height:100%; } body #side_bar { width:20%; height:100%; float:right; overflow-y: scroll; } body #map_canvas { width:80%; height:80%; float:left; } body ul#marker_list { list-style-type: none; padding:0; } body ul#marker_list li { cursor: pointer; margin: 5px; border: 1px solid #888; padding: 5px; font-size: 75%; }
[編集] 参考
- https://developers.google.com/maps/?hl=ja
- https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja