Insertion de Map

**ifsera** · 30/05/2012, 16h30

Salut,

Je suis avec le sdk 2.4 sous Eclipse, et je cherche à insérer une google map, jusque là sans succès.

J'aimerais jouer avec la v3 de l'api, celle qui ne nécessite pas de key.

Si quelqu'un a un exemple avec jsni, je prends. Merci

J'ai tenté avec gwt google map v3 mais cela semble pas compatible.

**MaximeMularz** · 30/05/2012, 21h09

Hello,

J'avais fait quelques tests :

public class Map {

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
public native JavaScriptObject initMap() /*-{
	var map;
 
	var latlng = new $wnd.google.maps.LatLng(49.56, 3.62);
	var myOptions = {
		zoom : 8,
		center : latlng,
		mapTypeId : $wnd.google.maps.MapTypeId.ROADMAP
	}
	return map = new $wnd.google.maps.Map($doc.getElementById("map"), myOptions);
	}-*/;
}

Dans mon Entrypoint :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
HTML html = new HTML();
html.getElement().setId("map");
html.setSize("600px", "600px");
Maps maps = new Maps();
// Le Panel supportant la map, c'est à dire "html" doit être ajouté au RootPanel avant la méthode initMap()
RootPanel.get().add(html);
JavaScriptObject map = maps.initMap();

Demo visible ici : http://gwt-gae.appspot.com

Maxime

**ifsera** · 31/05/2012, 10h03

Salut,

ton site est sympa

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
			parcVerticalPanel.getElement().setId("map");
				parcVerticalPanel.setSize("600px", "600px");
//			
				Map maps = new Map();
				// Le Panel supportant la map, c'est à dire "html" doit être ajouté au RootPanel avant la méthode initMap()
				RootPanel.get().add(parcVerticalPanel);
				JavaScriptObject map = maps.initMap();

J'ai repris ton code, mais j'ai une exception :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ava.lang.reflect.InvocationTargetException
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
	at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
	at java.lang.Thread.run(Unknown Source)
Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot read property 'maps' of undefined
	at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
	at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
	at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
	at com.test.client.Map.initMap(Map.java)

**MaximeMularz** · 31/05/2012, 10h14

Hello,

Effectivement j'ai oublié l'import dans ta page hôte :

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=iciTaKey&sensor=true">
</script>

La clef est obligatoire pour la v3

Maxime

**ifsera** · 31/05/2012, 10h38

Nickel, ca le fait. Merci

Je vais jouer un peu avec maintenant

Par contre, je croyais qu'on pouvait justement se passer de la clé avec la v3.

Cela me fait chier de lier un projet pour le taf à mon compte google...

Ok, c'est bon, il y a moyen de bidouiller sans clé, au moins pour les tests

**karbos** · 31/05/2012, 17h30

Pourquoi ne pas utiliser gwt maps ?
http://code.google.com/p/gwt-google-...GettingStarted

**ifsera** · 01/06/2012, 08h54

parce que cela ne fonctionne pas avec le sdk gwt 2.4

Je remonte cette exception.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
ava.lang.reflect.InvocationTargetException
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
	at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
	at java.lang.Thread.run(Unknown Source)
Caused by: java.lang.ExceptionInInitializerError
	at com.google.gwt.maps.client.MapOptions.(MapOptions.java:40)
	at fr.google.map.client.TestGoogleMap.onModuleLoad(TestGoogleMap.java:46)
	... 9 more
Caused by: java.lang.RuntimeException: Deferred binding failed for 'com.google.gwt.maps.client.impl.MapOptionsImpl' (did you forget to inherit a required module?)
	at com.google.gwt.dev.shell.GWTBridgeImpl.create(GWTBridgeImpl.java:53)
	at com.google.gwt.core.client.GWT.create(GWT.java:97)
	at com.google.gwt.maps.client.impl.MapOptionsImpl.(MapOptionsImpl.java:31)
	... 11 more
Caused by: java.lang.IncompatibleClassChangeError: Found interface com.google.gwt.core.ext.typeinfo.JClassType, but class was expected
	at com.google.gwt.jsio.rebind.JSWrapperGenerator.generate(JSWrapperGenerator.java:276)
	at com.google.gwt.core.ext.GeneratorExtWrapper.generate(GeneratorExtWrapper.java:48)
	at com.google.gwt.core.ext.GeneratorExtWrapper.generateIncrementally(GeneratorExtWrapper.java:60)
	at com.google.gwt.dev.javac.StandardGeneratorContext.runGeneratorIncrementally(StandardGeneratorContext.java:647)
	at com.google.gwt.dev.cfg.RuleGenerateWith.realize(RuleGenerateWith.java:41)
	at com.google.gwt.dev.shell.StandardRebindOracle$Rebinder.rebind(StandardRebindOracle.java:78)
	at com.google.gwt.dev.shell.StandardRebindOracle.rebind(StandardRebindOracle.java:268)
	at com.google.gwt.dev.shell.ShellModuleSpaceHost.rebind(ShellModuleSpaceHost.java:141)
	at com.google.gwt.dev.shell.ModuleSpace.rebind(ModuleSpace.java:585)
	at com.google.gwt.dev.shell.ModuleSpace.rebindAndCreate(ModuleSpace.java:455)
	at com.google.gwt.dev.shell.GWTBridgeImpl.create(GWTBridgeImpl.java:49)
	... 13 more

Après si t'as une solution, je suis toujours preneur

et le jar : gwt-maps3-0.2b.jar

**galel** · 01/06/2012, 09h06

Dans ta trace tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

did you forget to inherit a required module?

.
As tu bien la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <inherits name='com.google.gwt.maps.Maps' />

dans ton fichier ****.gwt.xml?

**ifsera** · 01/06/2012, 09h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='testgooglemap'>
  <!-- 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.clean.Clean'/>
  <!-- <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'/>     -->
   <inherits name='com.google.gwt.maps.Maps' />
 
 
  <!-- Other module inherits                                      -->
 
  <!-- Specify the app entry point class.                         -->
  <entry-point class='fr.google.map.client.TestGoogleMap'/>
 
  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>
 
</module>

Nan ca y est

**karbos** · 01/06/2012, 11h14

Héhé, c'est pour ça que je posais la question. Je n'utilise pas Maps v3, mais il y avait déjà eu le problème avec les versions précédentes de Maps... depuis GWT2.2, en fait. Une solution est de recompiler la librairie depuis les dernières sources que tu trouveras sur le repository Google (sur mercurial), en utilisant GWT 2.4...
Une autre solution est de télécharger un jar que quelqu'un aura compilé de la sorte

Google à l'air peu intéressé de faire évoluer cette librairie qui a près de 2 ans maintenant. Peut-être que d'autre tiers sortiront quelque chose avant ?

**ifsera** · 01/06/2012, 11h22

S'il y a un jar déjà recompilé, je prends, ou si je trouve une marche à suivre, je le ferai peut-être.

Après, la solution du jsni est pas mal.

Tu utilises quoi du coup comme version, map api et skd gwt ?

**karbos** · 01/06/2012, 11h58

C'était la version 1, je crois... pour l'instant je ne travaille pas sur Maps.
Tiens :http://code.google.com/p/gwt-google-...s/detail?id=30

**ifsera** · 01/06/2012, 13h22

Cool merci.

Pour un simple affichage, ca le fait avec le sdk 2.4.
Je bidouillerai avec un peu plus tard.

Ce qui est marrant, c'est que je l'ai dans ma liste de téléchargement.

Je sais pas ce que j'ai foutu hier,..

**karbos** · 01/06/2012, 13h35

Ok, si tu avances sur le sujet, je reste abonné à la discussion.
Bonne continuation !

**ifsera** · 06/06/2012, 12h19

Alors pour ceux que cela intéresse, je laisse mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
import java.util.ArrayList;
import java.util.Arrays;
 
import com.google.gwt.core.client.JavaScriptObject;
import com.sun.xml.internal.bind.v2.runtime.unmarshaller.XsiNilLoader.Array;
 
public class Map {
 
	/*
	 * initialise la map
	 */
	public native JavaScriptObject initMap() /*-{
		var map;
		var latlng = new $wnd.google.maps.LatLng(50.56, 4.25);
		var myOptions = {
			zoom : 9,
			center : latlng,
			mapTypeId : $wnd.google.maps.MapTypeId.ROADMAP
 
		}
 
		return map = new $wnd.google.maps.Map($doc.getElementById("map"), myOptions);	
	}-*/;
 
	public native JavaScriptObject loadMarker(JavaScriptObject map /*, ArrayList <Parc> parcList*/) /*-{	
		//construit mon array de parcs
		var parcIndex = 0;	
 
		//tableau de parcs
		var parcList = new Array();
 
			parcList[parcIndex++] = new Array ("50.49391", "5.057552"); 
			//...
			//...
			parcList[parcIndex++] = new Array ("50.2562656", "4.422377");
 
		//nombre total de parcs
		var nbTotalDeParcs = parcList.length;	
 
 
	    var homeLatLong;	//coordonnées du point d'arrivee	 
		var infowindow;		//infobulle
		var lIcon = "images/limite_petit.png";	//icone
		var marker;		//marker
		var lHhtml;		//contenu de l'infobulle
		var myLatlng;	//coordonnées des marqueurs
		var from;	//point de départ
 
  		//initialise l'infowindow
  		infowindow = new $wnd.google.maps.InfoWindow({
				    //  content: lHhtml
	    });  
 
 
 
		//place le point d'arrivée en utilisant la géolocalisation
		var address = "rue Auber, Paris"; 	//adress 
		var lIcon = "images/limite_petit.png";	//icone
 
		// Déclaration et instanciation du geocoder 
 
		//PLACE LE MARKER DU POINT D'ARRIVEE
		var geocoder;
		geocoder = new $wnd.google.maps.Geocoder();
 
		 geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status ==  $wnd.google.maps.GeocoderStatus.OK) {
	       // map.setCenter(results[0].geometry.location);
	        marker = new $wnd.google.maps.Marker({
	            map: map,
	            position: results[0].geometry.location,
	              icon : new $wnd.google.maps.MarkerImage(lIcon,
					new $wnd.google.maps.Size(30, 30))
     	    });
 
	      //sauvegarde de la position du point d'arrivée    
          homeLatLong = marker.position;
 
		   } else {
		        alert("Geocode was not successful for the following reason: " + status);
		   }
	      });
 
		//icone en fonction de l'état, test à mettre en place
		var imageNOTDispo = "images/NotClosed.png";
		var imageDispo = "images/Closed.png";
 
	    var panel;		//panel
		//mettre la création du DirectionsRenderer aura pour effet de rendre possible la superposition de plusieurs itinéraires
		var direction = new $wnd.google.maps.DirectionsRenderer({
		    		map   : map,
		    		panel : panel
		});
 
		//ajout des marqueurs
		for (var i = 0; i < nbTotalDeParcs; i++)
		{
 
				//récupère un objet donc un futur marqueur
		 		 var parc = parcList[i];	
				 myLatlng = new $wnd.google.maps.LatLng(  parc[0]  ,  parc[1] );
 
				 //lattitude + longitude de mon point de départ donc d'un parc
				 from = "" +  parc[0] + "," + parc[1];
 
				//contenu de l'infobulle
				 lHhtml = '<div style="float:left;text-align:left;">'
					+ '<font size="1" color="blue">' + parc[2] + '<br> '
					+ parc[3] + ' ' + parc[4] + '<br>' + parc[5] + '</font>'
					+ '</div>';
 
 
				//crée le marqueur
				 marker =  new $wnd.google.maps.Marker({
				    position: myLatlng, 
				    map: map, 
				    title: parc[2] +   "\r\n" + parc[3] +   "\r\n" + parc[5] ,
				    icon : new $wnd.google.maps.MarkerImage(imageDispo,
									new $wnd.google.maps.Size(30, 30))
			    });
 
		   		//EVENEMENT SUR CHAQUE MARQUEUR
 
			    // Stockage infowindow pour open sur click
			    marker._infowindow = infowindow;
 
				//stocke le contenu de l'infowindow sélectionnée
			    marker._lHhtml = lHhtml;
 
				//stockage du from
				 marker._from = from;
 
 
    				// ajoute l'action sur onclick      		
				$wnd.google.maps.event.addListener(marker, 'click', function (){	
					//si une infowindow est ouverte, on la ferme
				    if (infowindow) {
					        infowindow.close();
					      //  direction.suppressMarkers = true;
 
				    }	
 
				     //puis set le contenu de l'infowindow sélectionnée
				    infowindow.setContent(this._lHhtml);  
			        this._infowindow.open( map, this);	
 
 
 
				//CREE L'ITINERAIRE 
				var panel = panel;
 
			    origin      = this._from;		 // Le point départ
  				destination = homeLatLong; 		// Le point d'arrivé - est marqué undefined
 
 
 
			    if(origin && destination){
			        var request = {
			            origin      : origin,
			            destination : destination,
			            travelMode  : $wnd.google.maps.DirectionsTravelMode.DRIVING // Type de transport
			        }
			        var directionsService = new $wnd.google.maps.DirectionsService(); // Service de calcul d'itinéraire
			        directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
			            if(status == $wnd.google.maps.DirectionsStatus.OK){
 
			                direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours		
							direction.setPanel(document.getElementById("directionsPanel"));//panel
 
			            }
			        });
			    	} //http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html#DirectionsRequest
 
				}); 
 
 
		}//FIN DE BOUCLE
 
 
 
	}-*/;
 
 
 
 
}

Je suis passé par 2 méthodes jsni. Le code pourrait sans doute être factorisé. Si quelqu'un arrive à faire tout ça en passant que par gwt-map-api-v3, je prends évidemment.

Petite question, je n'arrive pas à afficher l'itinéraire, mon setPanel est ko.

Je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
			    if(origin && destination){
			        var request = {
			            origin      : origin,
			            destination : destination,
			            travelMode  : $wnd.google.maps.DirectionsTravelMode.DRIVING // Type de transport
			        }
			        var directionsService = new $wnd.google.maps.DirectionsService(); // Service de calcul d'itinéraire
			        directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
			            if(status == $wnd.google.maps.DirectionsStatus.OK){
 
			                direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
 
							direction.setPanel(document.getElementById("directionsPanel"));//panel
 
			            }
			        });
			    	} //http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html#DirectionsRequest
 
				});

et dans la classe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
	FlexTable itineraireFlexTable = new FlexTable();
				cheminVerticalPanel.add(itineraireFlexTable);
				itineraireFlexTable.getElement().setId("directionsPanel");
				itineraireFlexTable.setSize("400px", "400px");

**ifsera** · 11/06/2012, 16h21

un petit up ! pour mon interrogation.
Merci

Comment afficher l'itinéraire en mode texte. Sur le directionsrenderer, le setPanel('maDiv') aurait du suffire. Mais ca le fait pas

Au pire, je ressortirai ce point, vu que j'ai passé le truc en résolu

Insertion de Map

GWT et Vaadin Java

Discussions similaires

Partager

Partager