API Google map : Etape 2 – Recherche et zoom

8 février 2010 par Jordan Matejicek | Catégorie: Outils Google |

Nous avons vu précédemment comment afficher une carte du type Google Map sur son site. Nous allons voir aujourd’hui comment interagir simplement avec l’API, en commençant par un simple zoom sur une adresse donnée.

1. Création du champ de recherche

Ouvrez votre page "geolocalisation.php" et collez y le code suivant :

// Formulaire d'affichage "zoom sur carte" d'une adresse
<form action="#" onsubmit="javascript:showAddress(this.address.value); return false">
<h2>Voir adresse</h2>
<table width="700" border="0" cellspacing="0">
 <tr>
 <td width="200" align="left">Adresse : </td>
 <td width="400" align="left"><input type="text" size="60" name="address" value="" /></td>
 <td width="100" align="right"><input type="submit" value="Voir" /></td>
 </tr>
</table>
</form>

Explications :

<form action="#" onsubmit="javascript:showAddress(this.address.value); return false">

On ouvre notre formulaire avec aucune action afin de ne pas recharger la page du navigateur pour rien. Pour appeler notre fonction javascript on fait un "onsubmit=showAddress()" avec en paramètre "this.adress.value", ce qui correspond a la valeur du champ "address".

<h2>Voir adresse</h2>
<table width="700" border="0" cellspacing="0">
 <tr>
 <td width="200" align="left">Adresse : </td>
 <td width="400" align="left"><input type="text" size="60" name="address" value="" /></td>
 <td width="100" align="right"><input type="submit" value="Voir" /></td>
 </tr>
</table>
</form>

Ici simple mise en forme du champ de recherche, simplement ne pas oublier de mettre name="address" a notre text-input.

C’est terminé pour cette page, passons maintenant à "geolocalisation_javascript.php".

2. Fonction JS de recherche

On va créer la fonction qui permettra à l’API de zoomer sur l’adresse demandée. Nous appellerons cette fonction "showAddress()". Avant de commencer, sachez que ma fonction est inspirée de la doc de L’API Google Maps, vous y trouverez facilement d’autres exemples.

Ouvrez la page "geolocalisation_javascript.php" et collez y le code suivant. Attention, n’oubliez pas de placer tout ce code entre les balises "<script type="text/javascript">" et "</script>".

function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 11);
            }
          }
        );
      }
    }

Explications :

function showAddress(address) {
 if (geocoder) {

On créer donc notre fonction "showAddress()" avec un paramètre appelé ici "address", puis on vérifie si l’API est bien chargée via la variable "geocoder".

geocoder.getLatLng(
 address,
 function(point) {
 if (!point) {
 alert(address + " not found");
 } else {
 map.setCenter(point, 11);
 }
 }
 );
 }
 }

On demande simplement à l’api via la methode "geocoder.getLatLng" de récuperer la longitude et la latitude de notre adresse. Si l’adresse n’existe pas, on ouvre une fenêtre d’erreur en JS ( libre à vous de faire ca plus proprement ) afin d’afficher à l’utilisateur que son adresse n’est pas bonne. Si l’adresse existe, on zoom sur la carte via "map.setCenter(point, 11);", le premier argument étant notre position recherchée et le 2eme le niveau de zoom appliqué.

C’est terminé pour cette étape 2 ! Essayez donc d’entrer une adresse dans le champ de recherche, la carte devrait automatiquement ce centrer dessus.

N’oubliez pas qu’un complément de documentation est disponible dans la doc officielle.

Dans la 3eme étape, nous verrons comment stocker les données nécessaires à l’affichage dans une base de données de type MySQL.

A bientôt !