champs HTML et api google maps

**baron_rouge** · 08/03/2011, 21h39

(espérant posté au bon endroit)
[windev 12]

bonjour,

N'étant pas un champion de la programmation "html" ,je galère un peu depuis quelques jours.
Je cherche (avec le champs html) les solutions pour:
-récupérer les coordonnées x,y d'un point retenu sur la carte google maps
-afficher plusieurs points avec si possible des marqueurs différents
- et pourquoi pas utiliser du multiligne....... ou encore du kml (pour plus tard)

j'ai cherché sur le web ,des solutions mais pas explicite (pour moi)..

- un test avec des fécritligne pour créer un fichier text et ensuite un fichier html pour mon champs html
- un autre test avec la création d'une chaine de commande html et envoi au champs html

bref rien de bien concluant et surtout pas fonctionnel...

........
apparemment il y a une explication sur la LST 72 ,mais ma société me dit non sur l'achat de cette fameuse LST72 (crise quand tu nous tient)

help me

un brin de code serait le bienvenu avec quelques explications

merci beaucoup !!!

**rednight** · 09/03/2011, 09h16

J'ai bossé sur une api google map mais en webdev, je sais pas si ça peut t'aider.
Grosso-modo tout était fait en javascript.
Fait une recherche j'ai du poster quelques bout de code la dessus.

Pour l'implémenter dans windev, j'avais fait un petit bricolage, avec un champ activx qui pointait sur ma page awp webdev.(Ya surement d'autres solutions).

Bon courage d'avance...

**Lo²** · 09/03/2011, 10h44

Salut à toi,

Je plussoie, il faut passer par du javascript.
J'ai fait une recherche pour l'utilisation des services proposés par Google Maps et tu trouveras un post ici avec quelques informations :
http://www.developpez.net/forums/d95...-personnalise/

Par contre, attention, tu arrives vite dans les modules payants de Google suivant l'utilisation que tu en fait.

Je te conseille d'utiliser la doc de google qui est très bien faite et ce site sympa :
http://www.touraineverte.com/

**rednight** · 09/03/2011, 11h12

+1 pour http://www.touraineverte.com/, j'avais commencé par là puis je me suis vite retrouvé à fouiller dans la doc google qui est super complète.

**baron_rouge** · 10/03/2011, 08h41

merci à tous pour vos réponse !!!!

j'avais déjà trouvé les liens cités par vos soins.......

j'ai réussi à faire évoluer mon programme,j'affiche déja une carte ouf!!

mais dans ce cas pour les marqueurs ,rien ne se passe !!

explications de mon programme :
passage de chaine sur un fichier text,puis sur un fichier html et le tout pour le champs html (exemple trouvé sur le web).

voici 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
IdFichier est un entier
Chemin est une chaîne=fRépertoireTemp()
PageWeb est une chaîne="Recherche_Coordonnees"
IdFichier = fCrée(Chemin+PageWeb+".txt")
 
fEcritLigne(IdFichier,"<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"">")
fEcritLigne(IdFichier,"<html>")
fEcritLigne(IdFichier,"<head>")
fEcritLigne(IdFichier,"<script src=""http://maps.google.com/maps?file=api&v=2&key=MA CLE GOOGLE""type=""text/javascript""></script>")		
fEcritLigne(IdFichier,"<style type=""text/css"">img {border-width:0px;}body {margin:0px;padding:0px;}</style>")	
fEcritLigne(IdFichier,"<script type=""text/javascript"">//<![CDATA[if (GBrowserIsCompatible()) {}")	   
fEcritLigne(IdFichier,"function load() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById(""map""));map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());map.enableDoubleClickZoom();map.enableScrollWheelZoom();map.setCenter(new GLatLng(45.00,6.00), 9);")
fEcritLigne(IdFichier,"var Marqueur000 = new GIcon();Marqueur000.image = ""C:\Documents and Settings\jean-marie.muller\Bureau\base impact\button_cancel.png"";Marqueur000.iconSize = new GSize(32,32);Marqueur000.shadowSize = new GSize(32,32);Marqueur000.iconAnchor = new GPoint(6,6);Marqueur000.infoWindowAnchor = new GPoint(11,0);Marqueur000.infoShadowAnchor = new GPoint(11,0);")
fEcritLigne(IdFichier,"var Marqueur001 = new GIcon();Marqueur001.image =  ""C:\Documents and Settings\jean-marie.muller\Bureau\base impact\button_cancel.png"";Marqueur001.iconSize = new GSize(32,32);Marqueur001.shadowSize = new GSize(32,32);Marqueur001.iconAnchor = new GPoint(6,6);Marqueur001.infoWindowAnchor = new GPoint(11,0);Marqueur001.infoShadowAnchor = new GPoint(11,0);")				
fEcritLigne(IdFichier,"function createMarker(point,icon,Texte) {var marker = new GMarker(point,icon);GEvent.addListener(marker, ""click"", function() {this.openInfoWindowHtml(Texte); });return marker;}")				
fEcritLigne(IdFichier,"var point = new GLatLng(45.00,6.00);map.addOverlay(createMarker(point,Marqueur000,""Données <b>HTML</b>""))")		
fEcritLigne(IdFichier,"var point = new GLatLng(45.1,6.1);map.addOverlay(createMarker(point,Marqueur001,""Données HTML""))")		
fEcritLigne(IdFichier,"var point = new GLatLng(45.1,5.9);map.addOverlay(createMarker(point,Marqueur001,""Données <i>HTML</i>""))")		
fEcritLigne(IdFichier,"}}//]]>")		
fEcritLigne(IdFichier,"</script>")
fEcritLigne(IdFichier,"</head>")
fEcritLigne(IdFichier,"<body onload=""load()"" onunload=""GUnload()"">")		
fEcritLigne(IdFichier,"<div id=""map"" style=""width: 550px; height: 450px""></div>")
fEcritLigne(IdFichier,"</body>")
fEcritLigne(IdFichier,"<html>")
 
//----------------------- copie txt vers htm-----------------------------------------------------------------------------------
fCopieFichier(Chemin+PageWeb+".txt",Chemin+PageWeb+".htm")
//Map_commune=fLit(IdFichier)
fFerme(IdFichier)
fSupprime(Chemin+PageWeb+".txt")
mon_html est une chaîne=(Chemin+PageWeb+".htm")
Map_commune =fChargeTexte(mon_html)

donc je pense que la partie java ne doit pas être clean

merci de votre aide

**Lo²** · 10/03/2011, 11h55

Je me suis peut-être enflammé pour le javascript

Si on veut utiliser une map static, on n'a pas besoin de passer par du java script. Il suffit de créer une URL et de l'envoyer dans le champ HTML.
Ci-dessous, un petit code qui place 3 marqueurs :

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
sHTTP est chaîne 
sHTTP = "http://maps.google.com/maps/api/staticmap?"
 
// Paramètres
sParametreHTTP est une chaîne
 
// La zone de saisie prend une adresse (ville et/ou rue...)
SI SAI_Recherche <> "" ALORS 
             // Le paramètre center permet de centrer sur l'info saisie
	sParametreHTTP += ["&"] + "center=" + Remplace(SansAccent(SAI_Recherche), " ", "+")
             // Le paramètre zoom est une valeur numérique
	sParametreHTTP += ["&"] + "zoom=" + SAI_Zoom
FIN
 
// Le paramètre size permet d'afficher une carte plus ou moins grande
sParametreHTTP += ["&"] + "size=" + SAI_Hauteur + "x" + SAI_Largeur
 
// Le paramètre matype a pour valeur : satellite, terrain, roadmap, hybrid
sParametreHTTP += ["&"] + "maptype=" + CB_VueStatic..ValeurAffichée
sParametreHTTP += ["&"] + "sensor=false"
 
SI sParametreHTTP <> "" ALORS sHTTP += "&" + sParametreHTTP
 
// Marqueurs
// Zones de saisie avec adresse (ville et/ou rue...)
sMarqueur est chaîne
POUR i = 1 A 3
	SI {"SAI_Marqueur" + i, indChamp} <> "" ALORS
		sMarqueur += ["|"] + Remplace(SansAccent({"SAI_Marqueur" + i, indChamp}), " ", "+")
	FIN	
FIN
SI sMarqueur <> "" ALORS sHTTP += "&markers=" + sMarqueur
 
// Un interrupteur qui va permet de tracer une ligne droite entre chaque marqueur
SI INT_Chemin _ET_ sMarqueur <> "" ALORS
	sHTTP += "&path=color:0x0000ff|weight:5|" + sMarqueur
FIN
 
// Google API Key (n'est peut-être pas utile, sinon il faut te créer un compte sur Google Maps)
sHTTP += "&key=" + APIGoogleKey
 
HTML1 = sHTTP
ExécuteTraitement(HTML1, trtInit)

Dans la cas d'une map dynamique, on doit passer par du javascript et j'utilise l'ActivX Microsoft Web Browser.

**baron_rouge** · 10/03/2011, 22h22

bonsoir,
merci lo2

aurais tu un bout de code ou un peu d'explication sur l'active x web

la manière de le mettre en service avec une explication simple histoire que j'arrive à faire le lien entre tout ça ....

sinon voici 2 autres liens:

http://blog.pascal-martin.fr/post/Ut...-Maps-sommaire
http://gmap.nurtext.de/examples.html

au plaisir de vous lire

**Lo²** · 11/03/2011, 08h43

J'ai eu la flemme de décortiquer le code que tu avais mis.

Voici une partie du mien et avec les différents liens, tu devrais pouvoir t'en sortir.
Concernant l'utilisation de javascript, à l'époque, je suis allé sur le forum correspondant.

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
sHTTP = "<!DOCTYPE html>" + RC ...
	+"<html>" + RC ...
	+"<head>" + RC ...
	+"<meta name=""viewport"" content=""initial-scale=1.0, user-scalable=no""/>" + RC ...
	+"<meta http-equiv=""content-type"" content=""text/html; charset=UTF-8""/>" + RC ...
	+"<title>Calculer un itinéraire avec l'API Google Maps Javascript V3</title>" + RC ...
	+"<link href=""standard.css"" rel=""stylesheet"" type=""text/css"" />" + RC ...
	+"<script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?sensor=false&amp;key=" + APIGoogleKey + """></script>" + RC ...
	+"<script type=""text/javascript"">" + RC ...
 
/////////////////////////////
// TON CODE JAVASCRIPT
/////////////////////////////
 
	+"</script>" + RC ...
	+"<style type=""text/css"">" + RC ...
	+"<!-- " + RC ...
	+"html{height: 100%}" + RC ...
	+"body{height: 100%; margin: 0px; padding: 0px}" + RC ...
	+"#EmplacementDeMaCarte{float:left; width:59%; height: 100%}" + RC ...
	+"#EmplacementItineraireTexte{float:right; width:39%; height: 100%}" + RC ...
	+"-->" + RC ...
	+"</style>" + RC ...
	+"</head>" + RC ...
	+"<body onload=""initialize()"">" + RC ...
	+"<div id=""EmplacementDeMaCarte""></div>" + RC ...
	+"<div id=""EmplacementItineraireTexte""></div>" + RC ...
	+"</body>" + RC ...
	+"</html>"
 
fCrée(ComplèteRep(fRepExe()) + "Vide.htm")
iID est un entier = fOuvre(ComplèteRep(fRepExe()) + "Vide.htm")
fEcrit(iID, SansAccent(sHTTP))
fFerme(iID)
 
ActiveX1>>Silent=Vrai
ActiveX1>>Navigate(ComplèteRep(fRepExe()) + "Vide.htm")

**baron_rouge** · 13/04/2011, 13h04

bonjour,
un peu de temps entre deux posts ,mais avec une réponse et un peu de code

en détail
-ce code permet :une récupération d'une chaine d'une liste windev et envoi avec api en géocodage et pose d'un marqueur + un cercle
-prise dans une base hyperfile d'une serie de coordonnées avec une mise en forme d'un tableau javascript et affichage sous forme de marqueur
-possible de zoom automatique ou pas..
le tout sur un champs activex

merci à tous

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
IdFichier est un entier
Chemin est une chaîne=fRépertoireTemp()
PageWeb est une chaîne="Recherche_Coordonnees"
IdFichier = fCrée(Chemin+PageWeb+".txt")
sNom_commune est une chaîne=SC_Fiche.COMBO_Nom_commune..ValeurAffichée
sTableau_marqueur est une chaîne=""
 
//préparation de la chaine (tableau) pour les échelles
nNbre est un entier= HNbEnr(Echelle)
SI nNbre<>0 ALORS 	
	i est un entier=1
	POUR i = 1 A nNbre	
		HLit(Echelle,i)
		Montrema est une chaîne="'"
		nom est une chaîne=Echelle.Nom_echelle;nom= Montrema+nom+Montrema
		Xgs est un Variant=Echelle.X_WGS84
		Ygs est un Variant=Echelle.y_WGS84
 
		SI i= nNbre ALORS			
			//avec le nom
			//sTableau_marqueur+="["+Montrema+nom+Montrema+","+Xgs+","+ygs+"]"
			// sans le nom	
			sTableau_marqueur+="["+Xgs+","+Ygs+"]"//+[RC]
		SINON
			//avec les noms		
			//sTableau_marqueur+="["+Montrema+nom+Montrema+","+Xgs+","+ygs+"],"
			//sans le nom
			sTableau_marqueur+="["+Xgs+","+Ygs+"],"//+[RC]
		FIN		
	FIN
	//on modifie pour avoir le format d'un tableau sous javascript	
	sTableau_marqueur="["+sTableau_marqueur+"];"	
FIN
//Info(sTableau_marqueur)
 
 
sHTTP est une chaîne="<!DOCTYPE html>"+RC...
+"<html>"+RC...
+"<head>"+RC...
+"<meta name=""viewport"" content=""initial-scale=1.0, user-scalable=no"" />"+RC...
+"<meta http-equiv=""content-type"" content=""text/html; charset=UTF-8"">"+RC...		
+"<title>Google Maps JavaScript API V3 Exemple : Ajouter un marqueur</title>"+RC...
+"<script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?sensor=false&&region=FR""></script>"+RC...//ajout region
 
//début java script**********************************************************************************************	
+"<script type=""text/javascript"">"+RC...	//zone java script
 
//===============================================================================
//variables "globales"
//===============================================================================
+"var geocoder;"+RC...
+"var carte_jmm;"+RC...
+"var query = """ +sNom_commune+ """ "+RC...//passage du nom de la commune	//+"var query = ""Certilleux"" "+RC...	
+"var latlng"+RC...
+"var monCercle"+RC...
+"var centrecercle"+RC...
+"var latitude"+RC...
+"var longitude"+RC...
+"var Lieu	"+RC...
+"var pointLieu"+RC...
+"var  tableauLieux "+RC...
 
//===============================================================================	
//fonction d'initialisation
//===============================================================================			
+" function initialize() {"+RC...
+" geocoder = new google.maps.Geocoder();"+RC...//utilisation du service geocoder	
+" latlng = new google.maps.LatLng(48.311443 , 5.727096); "+RC...//ou centre
 
//declaration option de la carte
+"var optionsCarte = {"+RC... 
+"zoom: 11,"+RC...	
+"center: latlng ,"+RC...	//avirer		
+"mapTypeId: google.maps.MapTypeId.ROADMAP"+RC...//SATELLITE--HYBRID--TERRAIN--ROADMAP
+"}"+RC...						
 
//chargement de la carte
+"carte_jmm= new google.maps.Map(document.getElementById(""EmplacementDeMaCarte""), optionsCarte);"+RC...		
 
//appel de la fonction recherche par adresse et liste marqueurs				
+"codeAddress();"+RC...
+"marqueurstableau()"+RC...							
+"}"+RC...
 
//===============================================================================
//fonction de recherche de l'adresse par le nom (version google adaptée)
//===============================================================================
+"function codeAddress() {"+RC...
	+"var address = query;"+RC...//recup de l'adresse	
	+"geocoder.geocode( { 'address': address}, function(results, status) {"+RC...//appel au service géocodage	
	+"if (status == google.maps.GeocoderStatus.OK) {"+RC...
 
		//* Récupération de sa latitude et de sa longitude */
			+"latitude = results[0].geometry.location.lat();"+RC...
			+"longitude = results[0].geometry.location.lng();"+RC...
			+"centrecercle = new google.maps.LatLng(latitude,longitude); "+RC...//ou centre
		//definition du cercle
			+"var optionsCercle = {"+RC...				
				+"center: centrecercle,"+RC...//on prends les coordonnées du poibnt de rechehche
				+"strokeColor: ""#FF0000"","+RC...
				+"strokeOpacity: 0.8,"+RC...
				+"strokeWeight: 2,"+RC...
				+"fillColor: ""#FF0000"","+RC...
				+"fillOpacity: 0.15,"+RC...
				+"map: carte_jmm,"+RC...
				+"radius: 3000"+RC...
			+"}"+RC...							
		//inscription du cercle
			+"monCercle = new google.maps.Circle(optionsCercle);"+RC...							
		//centrage de la carte sur les coordonnées trouvées !!
			+"carte_jmm.setCenter(results[0].geometry.location);"+RC...												
		//marqueurs
			+"var marker = new google.maps.Marker({"+RC...	
				+"map: carte_jmm, "+RC...	
				+"position: results[0].geometry.location,"+RC...
				+"title: query"+RC...
			+"});"+RC...	
 
		+"} else {"+RC...	
			+"alert(""la recherche par le nom de la commune à échoué !!!:"" + status);"+RC...	
		+"}"+RC...	
	+"});"+RC...		
+"}"+RC...
//===============================================================================
//fonction installation des marqueurs en tableau
//===============================================================================
+"function marqueurstableau() {"+RC...
 
//mettre en service le tableau du nom de marqueurs
	+"tableauLieux ="+sTableau_marqueur+""+RC...	
 
//installation des marqueurs du tableau
	+"var bounds = new google.maps.LatLngBounds();"+RC...//permet le zoom si besoin	
		+"for (var i = 0; i < tableauLieux.length; i++) {"+RC...		
			+" Lieu = tableauLieux[i];"+RC...	
			+"pointLieu = new google.maps.LatLng(Lieu[0], Lieu[1]);"+RC...
			+"bounds.extend(pointLieu);"+RC...//permet le zoom si besoin			
			//marqueurs
				+"var marqueurLieu = new google.maps.Marker({"+RC...
					+"position: pointLieu,"+RC...
					+"map: carte_jmm"+RC...//pense a remettre la virgule si utilisation titre
					//+"title: Lieu[0]"+RC...		
				+"});"+RC...
 
		+"}"+RC...
//+"carte_jmm.fitBounds(bounds);"+RC...//permet de faire du zoom sur l'ensemble des marqueurs
+"}"+RC...	
 
 
+"</script>"+RC...	
//===============================================================================
//paramétrage de l'affichage
//===============================================================================
 
//description des styles et des marges	
+"<style type=""text/css"">"+RC...	
+"html{height: 100%}"+RC...	
+"body{height: 100%; margin: 0px; padding: 0px}"+RC...	
+"#EmplacementDeMaCarte{height: 100%}"+RC...	
+"</style>"+RC...
 
+"</head>"+RC...//fin du corps du message
 
//corps de la page
+"<body onload=""initialize()"">"+RC...//appel fonction
+	"<div id=""EmplacementDeMaCarte""></div>"+RC...
+"</body>"+RC...	
+"</html>"
 
 
//préparation du fichier html et envoi a active x
nMateuf est un entier=fCrée(ComplèteRep(fRepExe()) + "impact.htm")
SI nMateuf = -1 ALORS 
	Info("pas de création de page html")
	GOTO passe
FIN
iID est un entier = fOuvre(ComplèteRep(fRepExe()) + "impact.htm")
fEcrit(iID, SansAccent(sHTTP))
fFerme(iID)
SC_Fiche.AX_Active_communes_echelles>>Silent=Vrai
SC_Fiche.AX_Active_communes_echelles>>Navigate(ComplèteRep(fRepExe()) + "impact.htm")
 
passe:

champs HTML et api google maps [WD12]

WinDev

Vue hybride

Discussions similaires

Partager

Partager