Od dawna miałem napisać już o połączeniu GWT z Google Maps API ale jakoś nigdy nie było czasu ani chęci. Ostatnio kolega miał parę pytań co do Google Maps no i tak mi się jakoś przypomniało o tym temacie : ) Na początek zrobimy najprościej jak się da po prostu stronka, na której jest mapka wycentrowana na jakimś punkcie. Więc do dzieła.
Najpierw utwórzmy projekt za pomocą wtyczki GWT do eclipse’a. Potem wywalamy z niego nie potrzebne klasy tak aby została nam tylko klasa o nazwie projektu (ta z EntryPoint’em):
Na początek wywalmy z niej całe wnętrze, tak aby zostało coś takiego:
[java]
package pl.kedziorski.gwtmaps.client;
import com.google.gwt.core.client.EntryPoint;
public class GWTMaps implements EntryPoint {
public void onModuleLoad() {
}
}
[/java]
Potem zabieramy się za uprzątnięcie pliku HTML - znajduję się on w katalogu war i też nazywa się tak jak projekt + .html : ) U mnie wygląda to tak:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="GWTMaps.css">
<title>GWT z Google Maps API</title>
<script type="text/javascript" language="javascript" src="gwtmaps/gwtmaps.nocache.js"></script>
</head>
<body>
<iframe src="javascript:”" id="__gwt_historyFrame" tabIndex=’-1′ style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
[/html]
Jeszcze musimy wywalić info z pliku web.xml o servlecie, który usunęliśmy. U mnie po tym zabiegu plik wygląda tak:
[xml]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!– Default page to serve –>
<welcome-file-list>
<welcome-file>GWTMaps.html</welcome-file>
</welcome-file-list>
</web-app>
[/xml]
Ok mamy już przygotowany “czyściutki” projekt. Potrzebujemy teraz liba z Google Maps API. Następnie dołączamy gwt-maps.jar do naszego Build Path. Ale to nie wszystko - żeby korzystać z Google Maps musimy jeszcze dodać odpowiedni wpis do pliku nazwaProjektu.gwt.xml :
[xml]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module rename-to=’gwtmaps’>
<inherits name=’com.google.gwt.user.User’/>
<inherits name=’com.google.gwt.user.theme.standard.Standard’/>
<inherits name=’com.google.gwt.maps.GoogleMaps’/>
<entry-point class=’pl.kedziorski.gwtmaps.client.GWTMaps’/>
<script src="http://maps.google.com/maps?gwt=1&file=api&v=2&key=klucz_naszej_strony"/>
</module>
</module>
[/xml]
Klucz do API możemy stworzyć na tej stronie (możliwe, że już nie ma obowiązku tworzenia API key). Jednak jeśli uruchamiamy stronkę na localhost nie ma potrzeby wpisywania klucza - może zostać tak jak w podanym wyżej listingu.
No ok teraz już możemy zacząć oprogramowywać naszą mapkę. Na początek stwórzmy mapę, która jest automatycznie centrowana na Toruń.
[java]
package pl.kedziorski.gwtmaps.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.geom.LatLng;
import com.google.gwt.user.client.ui.RootPanel;
public class GWTMaps implements EntryPoint {
public void onModuleLoad() {
MapWidget map = new MapWidget(LatLng.newInstance(53.023664, 18.636932),12);
map.setSize("600px", "500px");
RootPanel.get().add(map);
}
}
[/java]
MapWidget to nasza mapka. LatLng to klasa przechowująca długość i szerokość geogreficzną. Współrzędne 53.023664, 18.636932 leżą gdzieś w Toruniu. Konstruktor MapWidget wymaga też podania początkowego zoomu - ja wybrałem 12 bo widać wtedy cały Toruń. SetSize() wiadomo co robi : ) Miałem dopisać jeszcze jak robić trochę inne bajery ale może innym razem : )
Ostatnie komentarze