GoogleMapにDirectionを表示する
前回作成したアプリを修正してDirectionを追加する
ソース修正
GMapSample.gwt.xml
AjaxLoaderを使うのでデプロイしてなくてもMapKeyを設定する必要がある
<script src="http://maps.google.com/maps?gwt=1&file=api&v=2&key=[APIKEY]" /> <inherits name="com.google.gwt.ajaxloader.AjaxLoader"></inherits>
GMapSample.html
いらないコメントを削除してdivを追加
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="GMapSample.css"> <title>Web Application Starter Project</title> <script type="text/javascript" language="javascript" src="gmapsample/gmapsample.nocache.js"></script> </head> <body> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> <div id="map"></div> </body> </html>
GMapSample.java
東京駅から東京タワーまでのDIrectionを表示する
- メンバ変数追加
private MapWidget map; //ルートとか表示する奴 private DirectionsPanel directionsPanel; //ルートとか表示するときにどこ通るの的なあれ private Waypoint[] waypoints; private Waypoint tokyo; private Waypoint tokyotawer; private LatLng latLngTokyo;
- WayPointを東京駅、東京タワーでnewする
- 作ったWayPointを配列にする
private void initWay() { // 東京駅 緯度 35度40分52.975秒(35.681382), 経度 139度45分57.902秒(139.766084) // 東京タワー 緯度 35度39分42.887秒(35.661913), 経度 139度42分3.395秒(139.700943) this.latLngTokyo = LatLng.newInstance(35.681382, 139.766084); this.tokyo = new Waypoint(this.latLngTokyo); this.tokyotawer = new Waypoint(LatLng.newInstance(35.661913, 139.700943)); this.waypoints = new Waypoint[] { tokyo, tokyotawer }; }
- 距離とかルートとか
GWT.logってやるとGWTのlogcat版的なとこに出力される
private void loadway(){ final DirectionQueryOptions options = new DirectionQueryOptions(map, directionsPanel); Directions.loadFromWaypoints(this.waypoints, options, new DirectionsCallback() { @Override public void onSuccess(DirectionResults result) { GWT.log("-------------------------"); GWT.log("ルート"); GWT.log("距離:" + result.getDistance().inMeters()); GWT.log("時間:" + result.getDuration().inSeconds()); GWT.log("-------------------------"); } @Override public void onFailure(int statusCode) { GWT.log("err " + statusCode); } }); }
- UIとか設定
DockPanelとか標準レイアウト仕様になっちゃうんで使わない。
なんか痛い仕様だよなぁ
private void buildUi() { //水平方向にUIを配置する HorizontalPanel horizPanel = new HorizontalPanel(); // MapWidgetの定義 引数 真ん中の緯度・軽度, ズームレベル map = new MapWidget(this.latLngTokyo, 10); map.setSize("80%", "80%"); // ズームレベルを変更できるあれ追加 map.addControl(new LargeMapControl()); // マーカ追加 map.addOverlay(new Marker(this.latLngTokyo)); // 真ん中に吹き出し的なあれ追加 map.getInfoWindow().open(map.getCenter(), new InfoWindowContent("東京駅はここ！")); //HorizontalPanelに配置するので高さを指定しないと表示されない map.setHeight("480px"); map.setWidth("480px"); //DirectionPanelの初期化 directionsPanel = new DirectionsPanel(); directionsPanel.setSize("60%", "60%"); directionsPanel.setWidth("300px"); //ルートを取得 loadway(); //UI配置 horizPanel.add(directionsPanel); horizPanel.add(map); // RootLayoutPanelを取得してdockを追加する RootPanel.get("map").add(horizPanel); }
実行結果
画面
ログ
ソース
GMapSample.gwt.xml
<?xml version="1.0" encoding="UTF-8"?> <module rename-to='gmapsample'> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> <!-- Other module inherits --> <!-- Specify the app entry point class. --> <entry-point class='com.example.map.client.GMapSample'/> <!-- Specify the paths for translatable code --> <source path='client'/> <source path='shared'/> <inherits name='com.google.gwt.maps.GoogleMaps' /> <script src="http://maps.google.com/maps?gwt=1&file=api&v=2&key=[APIKEY]" /> <inherits name="com.google.gwt.ajaxloader.AjaxLoader"></inherits> </module>
GMapSample.html
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="GMapSample.css"> <title>Web Application Starter Project</title> <script type="text/javascript" language="javascript" src="gmapsample/gmapsample.nocache.js"></script> </head> <body> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> <div id="map"></div> </body> </html>
GMapSample.java
package com.example.map.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.maps.client.InfoWindowContent; import com.google.gwt.maps.client.MapWidget; import com.google.gwt.maps.client.Maps; import com.google.gwt.maps.client.control.LargeMapControl; import com.google.gwt.maps.client.geocode.DirectionQueryOptions; import com.google.gwt.maps.client.geocode.DirectionResults; import com.google.gwt.maps.client.geocode.Directions; import com.google.gwt.maps.client.geocode.DirectionsCallback; import com.google.gwt.maps.client.geocode.DirectionsPanel; import com.google.gwt.maps.client.geocode.Waypoint; import com.google.gwt.maps.client.geom.LatLng; import com.google.gwt.maps.client.overlay.Marker; import com.google.gwt.user.client.ui.DockLayoutPanel; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.RootLayoutPanel; import com.google.gwt.user.client.ui.RootPanel; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class GMapSample implements EntryPoint { private MapWidget map; //ルートとか表示する奴 private DirectionsPanel directionsPanel; //ルートとか表示するときにどこ通るの的なあれ private Waypoint[] waypoints; private Waypoint tokyo; private Waypoint tokyotawer; private LatLng latLngTokyo; /** * This is the entry point method. */ public void onModuleLoad() { initWay(); Maps.loadMapsApi("", "2", false, new Runnable() { public void run() { buildUi(); } }); } private void initWay() { // 東京駅 緯度 35度40分52.975秒(35.681382), 経度 139度45分57.902秒(139.766084) // 東京タワー 緯度 35度39分42.887秒(35.661913), 経度 139度42分3.395秒(139.700943) this.latLngTokyo = LatLng.newInstance(35.681382, 139.766084); this.tokyo = new Waypoint(this.latLngTokyo); this.tokyotawer = new Waypoint(LatLng.newInstance(35.661913, 139.700943)); this.waypoints = new Waypoint[] { tokyo, tokyotawer }; } private void loadway(){ final DirectionQueryOptions options = new DirectionQueryOptions(map, directionsPanel); Directions.loadFromWaypoints(this.waypoints, options, new DirectionsCallback() { @Override public void onSuccess(DirectionResults result) { GWT.log("-------------------------"); GWT.log("ルート"); GWT.log("距離:" + result.getDistance().inMeters()); GWT.log("時間:" + result.getDuration().inSeconds()); GWT.log("-------------------------"); } @Override public void onFailure(int statusCode) { GWT.log("err " + statusCode); } }); } private void buildUi() { //水平方向にUIを配置する HorizontalPanel horizPanel = new HorizontalPanel(); // MapWidgetの定義 引数 真ん中の緯度・軽度, ズームレベル map = new MapWidget(this.latLngTokyo, 10); map.setSize("80%", "80%"); // ズームレベルを変更できるあれ追加 map.addControl(new LargeMapControl()); // マーカ追加 map.addOverlay(new Marker(this.latLngTokyo)); // 真ん中に吹き出し的なあれ追加 map.getInfoWindow().open(map.getCenter(), new InfoWindowContent("東京駅はここ！")); //HorizontalPanelに配置するので高さを指定しないと表示されない map.setHeight("480px"); map.setWidth("480px"); //DirectionPanelの初期化 directionsPanel = new DirectionsPanel(); directionsPanel.setSize("60%", "60%"); directionsPanel.setWidth("300px"); //ルートを取得 loadway(); //UI配置 horizPanel.add(directionsPanel); horizPanel.add(map); // RootLayoutPanelを取得してdockを追加する RootPanel.get("map").add(horizPanel); } }
