GWTでGoogleMaps - hidecheckの日記

GWTを使ってGoogleMapを表示するアプリの作成

プロジェクト概要

プロジェクト名：GwtSampleGoogleMap
パッケージ：sample.googlemap
外部jar：gwt-maps.jar

アプリ概要

TextBox x,yに座標を記入
表示ボタンでMap表示

パーツ

DockPanel
- HorizontalPanel
- MapWidget：マップ

HorizontalPanel
- panelFrom：以下のWidgetを配置
- TextBox
  - textx：緯度
  - texty：経度
- Button
  - btMap：マップの表示

MapWidget
- map：マップ

準備

■gwt-maps.jar

gwt-maps-1.0.4.zipのダウンロード http://code.google.com/p/gwt-google-apis/
解凍
プロジェクトにgwt-maps.jarをインポートする
- プロジェクト右クリック→BuildPath→AddExternalArcive→gwt-maps.jar選択

GwtSampleGoogleMap.html

デフォルトのhtmlを以下のように変更

      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      ↓変更
      <tr>
        <td id="dockpanel"></td>
      </tr>

GwtSampleGoogleMap.gwt.xml

以下を追加

-<inherits name='com.google.gwt.maps.GoogleMaps'/>
-<script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;sensor=false" />

※参照：http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=MapsGettingStarted
※サーバに上げるときは&key=******"を追加

  <!-- Other module inherits                                      -->
  <inherits name='com.google.gwt.maps.GoogleMaps'/>
  <script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;sensor=false" />

GwtSampleGoogleMap

ボタンが押されたときの処理

textX,textYから座標を取得
LatLngの設定（緯度と経度によって表された地理的位置を示す）

LatLng here = LatLng.newInstance(x, y);

マップサイズの設定

map.setSize("500px", "300px");

ズームコントローラを設定

map.addControl(new LargeMapControl());

ホイールでズームレベルを変更できるようにする

map.setScrollWheelZoomEnabled(true);

マーカーの設定

map.addOverlay(new Marker(here));

ClickHandlerの処理

		this.btMap.addClickHandler(new ClickHandler(){

			@Override
			public void onClick(ClickEvent event) {
				double x = Double.parseDouble(textX.getText());
				double y = Double.parseDouble(textY.getText());
				LatLng here = LatLng.newInstance(x, y);
				
				//マップサイズ
				map.setSize("500px", "300px");
			    
			    // ズームコントローラ
			    map.addControl(new LargeMapControl());
			    map.setScrollWheelZoomEnabled(true);
			    
			    // マーカー
			    map.addOverlay(new Marker(here));

			    //真ん中と縮尺
			    map.setCenter(here, 13);
			
				panelMap.add(map, DockPanel.CENTER);

			}
		});

実行結果

ソース

■GwtSampleGoogleMap.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="GwtSampleGoogleMap.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="gwtsamplegooglemap/gwtsamplegooglemap.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <h1>GWT Google Map Sample</h1>

    <table align="center">
      <tr>
        <td id="dockpanel"></td>
      </tr>
    </table>
  </body>
</html>

■GwtSampleGoogleMap.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.6.4//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.6.4/distro-source/core/src/gwt-module.dtd">
<module rename-to='gwtsamplegooglemap'>
  <!-- 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                                      -->
  <inherits name='com.google.gwt.maps.GoogleMaps'/>
	<script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;sensor=false" />
  <!-- Specify the app entry point class.                         -->
  <entry-point class='sample.googlemap.client.GwtSampleGoogleMap'/>
</module>

■GwtSampleGoogleMap

package sample.googlemap.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.maps.client.InfoWindowContent;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.control.LargeMapControl;
import com.google.gwt.maps.client.geom.LatLng;
import com.google.gwt.maps.client.overlay.Marker;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GwtSampleGoogleMap implements EntryPoint {

	private Button btMap;
	private DockPanel panelMap;
	private Panel panelForm;
	private TextBox textX;
	private TextBox textY;
	private MapWidget map;
	
		
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		this.btMap = new Button("表示");
		this.panelMap = new DockPanel();
		this.panelForm = new HorizontalPanel();
		this.textX = new TextBox();
		this.textY = new TextBox();
		this.map = new MapWidget();
		this.panelForm.add(textX);
		this.panelForm.add(textY);
		this.panelForm.add(btMap);
		this.panelMap.add(panelForm, DockPanel.NORTH);
		
		this.textY.setText("139.77089");
		this.textX.setText("35.69964");

		this.btMap.addClickHandler(new ClickHandler(){

			@Override
			public void onClick(ClickEvent event) {
				double x = Double.parseDouble(textX.getText());
				double y = Double.parseDouble(textY.getText());
				LatLng here = LatLng.newInstance(x, y);
				
				//マップサイズ
				map.setSize("500px", "300px");
			    
			    // ズームコントローラ
			    map.addControl(new LargeMapControl());
			    map.setScrollWheelZoomEnabled(true);
			    
			    // マーカー
			    map.addOverlay(new Marker(here));

			    //真ん中と縮尺
			    map.setCenter(here, 13);
			
				panelMap.add(map, DockPanel.CENTER);
			}
		});
		
		RootPanel.get("dockpanel").add(panelMap);
		
	}
}