Utilisation de Google Maps

Créer votre première application Google Maps

La première application qui va être présentée ci-dessous va permettre de localiser un point géographique sur Google Maps à l’aide d’une coordonnée sous la forme latitude / longitude. La navigation sera ensuite possible via certains composants permettant de réaliser les actions suivantes :

• Zoom / Dé zoom
• Déplacement à l’aide de boutons
• Déplacement à l’aide de la souris (draggable)

La première ligne dans le code source HTML est la suivante :

<script src="http://maps.google.com/maps?file=api&v=2.x&key=VOTRE_CLEF"
        type="text/javascript"></script>

<div id="map" style="width: 400px; height: 300px"></div>

La division utilisée ici, va par la suite contenir la carte routière ou satellitaire. Il est possible, comme dans ce cas, de limiter les dimensions de la carte en limitant celles de la division. 

<script type="text/javascript">
   
//<![CDATA[
    /* Variable qui va correspondre à l'affichage de la carte dans la "div" */
    var map = new GMap2(document.getElementById("map"));
    /* Centre la carte aux coordonnées indiquées et réalise un zoom de niveau 14 */
    map.setCenter(new GLatLng(49.41483, 2.817895), 14);
    
    /* Cette ligne permet de bloquer le déplacement sur la carte à l'aide de la souris
    map.disableDragging(); */
    
    map.addControl(new GSmallZoomControl());
//]]>
 
</script>

Le niveau de zoom est ici de 14, il faut savoir que celui-ci accepte pour valeur les nombres entiers compris entre 1 et 17 inclus et que plus la valeur indiquée est grande et plus le niveau de zoom est élevé.

Au niveau des dernières lignes de cet exemple, il est possible de remplacer GLargeMapControl par les valeurs ci-dessous afin d’afficher différents types de contrôles :

• GMapTypeControl : Permet de passer de la vue routière à la vue satellitaire et réciproquement. Il est aussi possible de mixer les deux modes.
• GLargeMapControl : Ajoute les contrôles permettant le zoom et le déplacement sur la carte.
• GSmallMapControl : Identique à GLargeMapControl mais la barre de zoom est remplacée par deux boutons permettant de zoomer et de dézoomer.
• GSmallZoomControl : Présente uniquement les deux boutons permettant de zoomer et de dézoomer.

Il est aussi possible d’ajouter plusieurs contrôles pour une même carte ; ceux-ci se complètent comme dans l’exemple ci-dessous :

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());