Quelle API dans mon cas ?

**pc75** · 04/12/2013, 15h33

Bonjour,

Je dois afficher une carte avec l'api google maps et j'ai vu, notamment dans l'article sur l'introduction à l'API (http://thecodingmachine.developpez.c...i-google-maps/) l'utilisation de ce lien :

Mon problème est que je ne connais que l'adresse postale. J'ai récupéré ce code qui fonctionne à partir d'une adresse, mais le lien de l'API est, comment dire...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAssNHsvRmdjbfaHQLGJe4IBRUsz-pYg_Ma22JMdFSMvaUp2krUhQPGyzeHUvioNuo_7zqLxrqnekFOQ" type="text/javascript"></script>
 
</head>
<body>
	<div id="div_search" style="text-align: center; font-family: arial;width: 630px; height: 25px; padding: 5px; ">
	<input type="text" style="width: 250px; border: 1px solid #b4b4b4; " id="search_addr" value="Brest France" /> &nbsp;  
	<input type="button" style="width: 200px; border: 1px solid #b4b4b4; background: #eeeeee;" onclick="coordonneesGPS();" value="récupérer les coordonnées"/>
	</div>
	<div id="mapG3" style="width: 630px; height: 325px;  border: 1px solid #b4b4b4;"></div> 
	<div id="answer" style="text-align: center; padding-top: 25px; font-family: arial;width: 630px; height: 20px;"></div>
		<script type="text/javascript">
			var infobulle;
			var myMarker;
			function coordonneesGPS(){		
				address = document.getElementById('search_addr').value;
				geocoder = new GClientGeocoder();
				z = 15;
				geocoder.getLatLng(
					address,
					function(point) {								
						if (!point) {
							alert("- "+address+" n'existe pas");
						}
						else {									
							var a =  point.lat();						 
							var b =  point.lng();
							document.getElementById('answer').innerHTML = '<b>Votre Recherche</b> : '+address+' - <b>Latitude</b> : '+a+' - <b>Longitude</b> : '+b;
							searchCoord(address,a,b,z);								
					}});					
			}  
			function searchCoord(address,a,b,z){
				map = new GMap2(document.getElementById('mapG3'));	
				map.addControl(new GLargeMapControl3D()); 
				map.addControl(new GMenuMapTypeControl());
				//map.setMapType(G_HYBRID_MAP);
				map.checkResize();				            
 
				map.setCenter(new GLatLng(a,b), z);				                
				if(address!=''){
					var geocoder = new GClientGeocoder();
					geocoder.getLatLng(address, function(point){ map.setCenter(point,z); });
				}
				myMarker = createMarker(new GLatLng(a,b)); // Ajout du marqueur
				map.addOverlay(myMarker);        
			}	
			function createMarker(point){
				var marker = new GMarker(point);
				GEvent.addListener(marker, "click", function(latlng) {
					var lat = latlng.lat();
					var lng = latlng.lng();
					var  DegMinSec = convert_DMS(lat,lng);
					marker.openInfoWindowHtml(DegMinSec);
				});
				return marker;
			}         
 
			function convert_DMS(lat,lng){
				var c_lat = getDMS(lat);
				var c_lng = getDMS(lng);			
				var coordonnees = '<b>Lat</b> : '+c_lat+' <br /><b>Lng</b> : '+c_lng;
				return coordonnees;
			}
 
			function getDMS(coord){
				// On rcupre les degrs
				var i1 = Math.floor(coord);
				var r1 = coord - i1;
				// On rcupre les minutes
				var r2 = r1 * 60;
				var i2 = Math.floor(r2);
				// On rcupre les secondes
				var r3 = r2 - i2;
				var i3 = r3 * 60;
				i3 = Math.floor(i3*100) / 100;
 
				return i1+' &deg; '+i2+' min '+i3+' sec';		
			}
 
 
			coordonneesGPS();
		</script>
</body>
</html>

Je souhaiterai avoir votre avis :

- Le code que j'utilise est-il correct et pérenne ?
-Le lien de l'API proposé dans l'article sur l'introduction permet-il d'obtenir une carte à partir d'une adresse postale ?

Merci par avance.

**NoSmoking** · 04/12/2013, 22h23

Bonjour,
concernant le lien pour la récupération de l'API il a été modifié et il faut désormais utiliser

Code html :

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

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

Le code que tu fournis est obsolète, voir Google Maps JavaScript API V2, 6 mois de sursis qui date de plus de 6 mois

En conclusion

- Le code que j'utilise est-il correct et pérenne ?

NON

-Le lien de l'API proposé dans l'article sur l'introduction permet-il d'obtenir une carte à partir d'une adresse postale ?

indépendamment du fait que Google à changé l'adresse de chargement entre temps, tu pourras tout à fait à partir du code postal, à condition de préciser le pays, récupérer la localisation.

**pc75** · 05/12/2013, 08h37

Merci,

Bon, il va falloir que je m'y colle, mais javascript et moi, ce n'est pas le grand amour.

Je n'ai pas trouvé (sur DVP et Google) de tuto ou d'exemple qui correspondent à mon besoin.

Quelqu'un aurait un ou deux liens qui pourraient me mettre sur la voir ?

Merci.

**pc75** · 05/12/2013, 12h03

Re,

Après plusieurs recherches, j'ai trouvé un code qui semble me convenir :

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
 
<HTML>
<HEAD>
 
<style type="text/css">
  #map-canvas {
    height : 600px;
    width : 600px;
    margin : auto;
    border : 1px solid #888;
  }
</style>
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
</script>
 
<script type="text/javascript">
var geocoder;
var map;
// initialisation de la carte Google Map de départ
function initialiserCarte() {
  geocoder = new google.maps.Geocoder();
  // latitude et longitude du vieux Port de Marseille pour centrer la carte de départ
  var latlng = new google.maps.LatLng(43.295309,5.374457);
  var mapOptions = {
    zoom      : 15,
    center    : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  // map-canvas est le conteneur HTML de la carte Google Map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
 
function TrouverAdresse() {
  // Récupération de l'adresse tapée dans le formulaire
  var adresse = document.getElementById('adresse').value;
  geocoder.geocode( { 'address': adresse}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      // Récupération des coordonnées GPS du lieu tapé dans le formulaire
      var strposition = results[0].geometry.location+"";
      strposition=strposition.replace('(', '');
      strposition=strposition.replace(')', '');
 
      // Affichage des coordonnées dans le <span>
      document.getElementById('text_latlng').innerHTML='Coordonnées : '+strposition;
      // Création du marqueur du lieu (épingle)
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Adresse introuvable: ' + status);
    }
 
	var infowindow = new google.maps.InfoWindow({
	    content: adresse
	});
	infowindow.open(map,marker);
 
  });
}
 
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>
</HEAD>
<BODY>
 
<form>
  <input type="text" id="adresse" value="1 rue de rivoli 75004 paris" size="50"/>
  <input type="button"  value="Localiser sur Google Map" onclick="TrouverAdresse();"/>
</form>
<span id="text_latlng"></span>
<div id="map-canvas"></div>
 
</BODY>
</HTML>

Y-a-t-il des choses à améliorer selon vous ?
Autre question (je découvre), il n'est pas possible d'ouvrir la carte directement sur la zone voulue, sans passer par une position intermédiaire (Marseille dans mon exemple) ?

Merci.

**NoSmoking** · 05/12/2013, 18h42

Y-a-t-il des choses à améliorer selon vous ?

d'une manière générale OUI.

Pour le HTML
- manque un DOCTYPE en entête de fichier, par exemple <!DOCTYPE html>, une bonne habitude à prendre tout de suite
- manque une balise <meta charset="UTF-8"> pour éviter les surprises par la suite
- prendre l'habitude de mettre le nom des balises en minuscule est également une bonne habitude

Concernant la structure du document
- je ne vois pas l'intérêt d'utiliser une FORM et ce attendu qu'il n'y à pas de soumission de formulaire.
- l'INPUT type="button" pourrait être avantageusement remplacé par un vrai BUTTON bien plus judicieux ici à mon sens.

Passons au code javascript, je pense que c'est de cela que tu voulais parler

- il y a des choses qui ne servent à rien mais je présume que cet exemple est un exemple d'illustration, donc rien à dire.

il n'est pas possible d'ouvrir la carte directement sur la zone voulue, sans passer par une position intermédiaire (Marseille dans mon exemple)

tu fais ce que tu veux, il te suffit de mettre les bonnes options au bon endroit.

Regarde dans la FAQ il doit bien y avoir quelques exemples pertinents

**pc75** · 06/12/2013, 12h31

Re,

OK, merci pour tout.

**NoSmoking** · 06/12/2013, 23h18

Comme tu travailles avec des codes/adresses postaux je ne saurais trop te conseiller d'indiquer la région afin de ne pas te retrouver aux confins du Chili

Code :

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

1
2
3
4
geocoder.geocode( {
    'address': addresse,
    'region' :'fr'
  },

**pc75** · 09/12/2013, 09h38

Merci encore !

Quelle API dans mon cas ? [Google Maps]

APIs Google

Discussions similaires

Partager

Partager