Voir aussi : comment récupérer les coordonnées GPS d’une adresse.

Voici un outil développé avec l’api Google Map. Cet outil permet de récupérer les coordonnées géographiques d’un point à partir de son adresse en l’utilisant l’api Google.

Il existe d’autres moyens de récupérer ces coordonnées , notamment en développant un script qui appelle l’api Google Map. Cette méthode peut s’avérer très efficace surtout lorsque l’on a besoin de récupérer beaucoup de coordonnées.

La réponse retournée par Google est au format CSV. Chaque coordonnée renvoyée est précédée d’un code permettant de savoir si l’api est parvenue à géolocaliser l’adresse en question (exemple: 200 = ok, 602 = erreur, …). Associée à un script PHP et à une connexion à une BDD, on peut alors automatiser cette tâche de récupération de coordonnées géographiques.

L’outil proposé ici permet de récupérer les coordonnées d’une adresse, d’une ville, d’un département, …

Après avoir récupéré une clé d’authentification et avoir fait notre premier appel à l’api google map, nous allons maintenant ajouter deux éléments sur la carte, à savoir:

• Les panneaux de contrôles (zoom et types de vues)
• Un marker personnalisé centré sur Brest avec son infobulle

Le code javascript demeure très similaire au précédent. Nous allons juste ajouter les panneaux de contrôles avec 2 lignes de code et une fonction qui se chargera de créer un marker.

A noter qu’en règle générale, on ajoute une condition qui englobe le code javascript. Cette condition, non intégrée ici, s’occupe de vérifier si le navigateur est capable d’afficher une carte Google Map.

Elle s’écrit de la manière suivante : if (GBrowserIsCompatible())

Ajout d’un marker sur la map

Dans ce code exmple, les expressions qui apparaissent en orange représentent des méthodes ou des classes de l’api Google Map.

<div id="mapG2" style="width: 630px; height: 350px;"></div>
<script type="text/javascript">

var gicons = [];
var infobulle;
var markerMember;

function demo2() {
  var address = 'Brest France';
  geocoder = new GClientGeocoder();
  z = 10;
  geocoder.getLatLng( address, function(point) {
    if (!point) {
      alert("- "+address+" n'existe pas");
    }
    else {
      var a =  point.lat();
      var b =  point.lng();
      initialize2(address,a,b,z);
    }
  });
}

function initialize2(address,a,b,z) {
  map = new GMap2(document.getElementById('mapG2'));
  map.addControl(new GLargeMapControl3D());
  map.addControl(new GMenuMapTypeControl());
  map.checkResize();
  gicons[0] = new GIcon(G_DEFAULT_ICON, "https://www.weboblog.fr/flag_blue.png");
  gicons[0].iconSize = new GSize(16,16);
  gicons[0].shadow="";
  gicons[0].iconAnchor = new GPoint(9,16);
  gicons[0].infoWindowAnchor = new GPoint(9,9);

  map.setCenter(new GLatLng(a,b), z);
  if(address!=''){
    var geocoder = new GClientGeocoder();
    geocoder.getLatLng(address, function(point){ map.setCenter(point,z); });
}
infobulle  = '<table width="200px" border="0"  height="60px"><tr>';
infobulle += '<td width="70px" align="left" valign="top">';
infobulle += '<img src="https://www.weboblog.fr/package_network.png" /></td>';
infobulle += '<td align="left" valign="top">';
infobulle += '<p style=" font-family:Tahoma; font-size:10px; color: #8080ff;">';
infobulle += '<b><u>Point de recherche</u> :</b><br /> '+address+'<br />';
infobulle += '<b>Latitude</b>: '+a+'<br />';
infobulle += '<b>Longitude</b>: '+b+'</p></td></tr></table>';
markerMember = createMarker(new GLatLng(a,b),infobulle,gicons[0]); // Ajout du marqueur
map.addOverlay(markerMember);
}	

function createMarker(point,html,icon){
  var marker = new GMarker(point,icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
} 

demo2();

</script>

On obtient alors cette carte avec les zoom et le choix du type de vues disponibles. En cliquant sur le marker, l’infobulle apparaît. Il est possible de déclencher l’ouverture de l’infobulle en fonction d’autres événements javascript (onmouseover, ondragdrop, …).

Le contenu de l’infobulle est libre, il s’agit de simple code html.