GOOGLE MAPS
Nous allons vous présenter ici différents outils utiles pour intégrer Google Maps dans votre page Web.
SOMMAIRE
- Première étape (Demande d'une clef API)
- Deuxième étape (Insertion de la clef dans votre page web)
- Troisième étape (Insérer une carte Google Maps sur votre site)
- Quatrième étape (Mettre des curseurs pour jouer sur le dimensionnement de la carte)
- Cinquième étape (Les commandes possibles avec le clavier et la souris)
- Sixième étape (Les différents types de carte)
- Première étape :
- Pour utiliser GoogleMaps, vous devez déjà créer un compte sur google : Compte Google
- Puis obtenir une clef API pour pouvoir utiliser GoogleMaps sur votre site : Clef API . Se rendre en bas de la page puis :
- Cocher la case " I have read and agree with the terms and conditions"
- Cliquer sur " Generate API Key" pour obtenir votre clé API
- Vous recevrez une page HTML qui comprendra votre code API et l'URL de votre site
- Deuxième étape :
- Dans toutes les pages où vous voudrez mettre une carte Googles maps, vous devrez définir en premier les codes donnés lors de votre inscription.
Ces codes doivent se trouver entre les balises <head> et </head>
- Dans toutes les pages où vous voudrez mettre une carte Googles maps, vous devrez définir en premier les codes donnés lors de votre inscription.
- Troisième étape :
- Tout d'abord, il faut remplacer votre balise <BODY> par
- Pour insérer une carte, il faut déjà créer une zone pour l'afficher. Nous allons le faire dans une balise Div qui aura le nom "map"et qui doit se trouver entre les balises <BODY> et </BODY>
- Ensuite, entre les balises <head> et </head>, il faut mettre :
La fonction "map.setCenter", va centrer la carte sur les coordonnées suivantes : Latitude : 49.12167751690162 et Longitude : 6.714427471160889. Le chiffre 5 étant le grossissement de la carte. Possibilité d'aller de 0 à 17 aujourd'hui.
Voir le résultat ici
- Quatrième étape :
- Il y a plusieurs options pour mettre des curseurs sur une carte
:
- "GSmallMapControl()" qui permet d'avoir les 4 flèches de direction plus un petit zoom
- "GLargeMapControl()" qui permet d'avoir les 4 flèches de direction plus un grand zoom
- "GSmallZoomControl()" qui permet d'avoir un petit zoom seulement
- "GScaleControl()" qui permet de mettre une échelle sur la carte
- "GMapTypeControl()" qui permet d'afficher trois possibilités d'affichage de la carte (Normal, Sattelite ou mixte)
- "GOverviewMapControl()" qui permet d'afficher une mini carte dans le coin inférieur droit
La fonction qui permet d'afficher ces options est : "map.addControl". Voici donc ce que nous allons rajouter à notre exemple :
Je vous laisse manipuler et essayer les différentes possibilités.
Voir le résultat ici
- Il y a plusieurs options pour mettre des curseurs sur une carte
:
- Cinquième étape :
- Voici la fonction qui permet de faire un zoom directement avec la molette de la souris : "enableScrollWheelZoom()"
- La fonction qui permet d'utiliser le pavé numérique est : "GKeyboardHandler()". Vous pouvez tester les flèches pour un déplacement lent, les touches "+" et "-" pour le Zoom et les touches page haut/bas et home/fin pour un déplacement rapide. Voici le code à rajouter aujourd'hui :
Voir le résultat ici
