gwt2.0でgooglemap - hidecheckの日記

GWT2.0の機能を使ってるとかそんなんじゃないけど、GWTでGoogleMaoとか

参考URL

Google Web Toolkit：http://code.google.com/intl/en/webtoolkit/gettingstarted.html
gwt-google-apiプロジェクト：http://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted
ライブラリ：http://code.google.com/p/gwt-google-apis/downloads/list
apiリファレンス：http://code.google.com/p/gwt-google-apis/wiki/MapsJavadoc
Maps API key：http://code.google.com/intl/ja/apis/maps/signup.html

準備

このページを開く
- http://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted
ライブラリダウンロード
- http://code.google.com/p/gwt-google-apis/downloads/list
Maps API key get
- http://code.google.com/intl/ja/apis/maps/signup.html

プロジェクト作成

プロジェクト概要

ソースをいじる（いらんもの削除的な意味で）

■GMapSample.java
clientパッケージのGMapSample.javaにでふぉでかかれてるコードを削除してこんな感じにする

package com.example.map.client;

import com.google.gwt.core.client.EntryPoint;

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

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
	}
	
	private void buildUi(){
		
	}
}

■GreetingService, GreetingServiceAsync, GreetingServiceImpl, FieldVerifier
GreetingService, GreetingServiceAsync, GreetingServiceImpl, FieldVerifierのメソッド全部削除！
こうなる

@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {

}

public interface GreetingServiceAsync {
}

@SuppressWarnings("serial")
public class GreetingServiceImpl extends RemoteServiceServlet implements
		GreetingService {

}

public class FieldVerifier {
}

■GMapSample.html
tableタグを削除

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype 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="GMapSample.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="gmapsample/gmapsample.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>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <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>

    <h1>Web Application Starter Project</h1>

  </body>
</html>

Google map API を使えるようにする

■ライブラリを追加する

プロジェクト右クリック > Build Path > Configure Build Path..
Liblariesタブを選択
Add External JARs
- ダウンロードしたgwt-maps.jarを選択する

■ソース変更
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' />

</module>

ソースいじる(Map的な意味で）

■GMapSample.java

public class GMapSample implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		Maps.loadMapsApi("", "2", false, new Runnable() {
			public void run() {
				buildUi();
			}
		});
	}

	private void buildUi() {
	    // Mapの真ん中の緯度、軽度 Cawker City, KS USA
	    LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);

	    //　MapWidgetの定義 引数 真ん中の緯度・軽度, ズームレベル(0 〜 19)
	    final MapWidget map = new MapWidget(cawkerCity, 2);
	    map.setSize("100%", "100%");

	    // ズームレベルを変更できるあれ追加
	    map.addControl(new LargeMapControl());

	    // マーカ追加
	    map.addOverlay(new Marker(cawkerCity));

	    // 真ん中に吹き出し的なあれ追加
	    map.getInfoWindow().open(map.getCenter(),
	        new InfoWindowContent("World's Largest Ball of Sisal Twine"));

	    // DockLayoutPanel定義 北とか南とかCenterとかでUI配置するやつ
	    final DockLayoutPanel dock = new DockLayoutPanel(Unit.PX);
	    
	    //北にMapWidgetを置く
	    dock.addNorth(map, 500);

	    // HTMLの大本的なRootLayoutPanelを取得してdockを追加する
	    RootLayoutPanel.get().add(dock);
	}
}

実行する

プロジェクト右クリック＞Run As＞Web Application
Development ModeにURLが表示されるのでコピーしてブラウザを開く
- 初回起動は時間がかかる
- そしてUbuntuのChromeではデバッグができない

実行結果

ソース

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' />

</module>

GMapSample.java

package com.example.map.client;

import com.google.gwt.core.client.EntryPoint;
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.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.RootLayoutPanel;

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

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		Maps.loadMapsApi("", "2", false, new Runnable() {
			public void run() {
				buildUi();
			}
		});
	}

	private void buildUi() {
	    // Mapの真ん中の緯度、軽度 Cawker City, KS USA
	    LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);

	    //　MapWidgetの定義 引数 真ん中の緯度・軽度, ズームレベル
	    final MapWidget map = new MapWidget(cawkerCity, 2);
	    map.setSize("100%", "100%");

	    // ズームレベルを変更できるあれ追加
	    map.addControl(new LargeMapControl());

	    // マーカ追加
	    map.addOverlay(new Marker(cawkerCity));

	    // 真ん中に吹き出し的なあれ追加
	    map.getInfoWindow().open(map.getCenter(),
	        new InfoWindowContent("World's Largest Ball of Sisal Twine"));

	    // DockLayoutPanel定義 北とか南とかCenterとかでUI配置するやつ
	    final DockLayoutPanel dock = new DockLayoutPanel(Unit.PX);
	    
	    //北にMapWidgetを置く
	    dock.addNorth(map, 500);

	    // HTMLの大本的なRootLayoutPanelを取得してdockを追加する
	    RootLayoutPanel.get().add(dock);
	}
}

GreetingService.java

package com.example.map.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

/**
 * The client side stub for the RPC service.
 */
@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {

}

GreetingServiceAsync.java

package com.example.map.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

/**
 * The async counterpart of <code>GreetingService</code>.
 */
public interface GreetingServiceAsync {
}

GreetingServiceImpl.java

package com.example.map.server;

import com.example.map.client.GreetingService;
import com.example.map.shared.FieldVerifier;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;

/**
 * The server side implementation of the RPC service.
 */
@SuppressWarnings("serial")
public class GreetingServiceImpl extends RemoteServiceServlet implements
		GreetingService {

}

GMapSample.html

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype 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="GMapSample.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="gmapsample/gmapsample.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>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <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>

    <h1>Web Application Starter Project</h1>

  </body>
</html>