Obtenir une clé d'API Google Maps pour votre site
Le meilleur moyen d'ajouter une carte Google à votre site Web consiste à utiliser l'API Google Maps. Et Google vous recommande de vous procurer une clé API pour pouvoir utiliser les cartes.
Vous n'êtes pas obligé d'obtenir une clé d'API pour utiliser l'API Google Maps v3, mais cette fonction est très utile car elle vous permet de surveiller votre utilisation et de payer un accès supplémentaire. L'API Google Maps v3 dispose d'un quota d'une requête par seconde par utilisateur pour un maximum de 25 000 requêtes par jour. Si vos pages dépassent ces limites, vous devrez activer la facturation pour en obtenir plus.
Comment obtenir une clé API Google Maps
- Connectez-vous à Google en utilisant votre compte Google.
- Aller à la console des développeurs
- Faites défiler la liste et recherchez l'API Google Maps v3, puis cliquez sur le bouton «OFF» pour l'activer.
- Lisez et acceptez les conditions.
- Accédez à la console des API et sélectionnez «Accès aux API» dans le menu de gauche.
- Dans la section «Accès simple à l'API», cliquez sur le bouton «Créer une nouvelle clé de serveur …».
- Entrez l'adresse IP de votre serveur Web. Ceci est l'adresse IP d'où proviendront vos demandes de carte. Si vous ne connaissez pas votre adresse IP, vous pouvez la rechercher.
- Copiez le texte sur la ligne «API key:» (sans inclure ce titre). Ceci est votre clé API pour vos cartes.
Convertir votre adresse en coordonnées
Pour utiliser Google Maps sur vos pages Web, vous devez connaître la latitude et la longitude du lieu. Vous pouvez les obtenir à partir d'un GPS ou vous pouvez utiliser un outil en ligne tel que Geocoder.us pour vous l'indiquer.
- Allez sur Geocoder.us et tapez votre adresse dans le champ de recherche.
- Copiez le premier chiffre de la latitude (sans lettre au début) et collez-le dans un fichier texte. Vous n'avez pas besoin de l'indicateur de degré (º).
- Copiez le premier chiffre de la longitude (là encore sans lettre) et collez-le dans votre fichier texte.
Votre latitude et longitude ressembleront à ceci:
40.756076-73.990838
Geocoder.us ne fonctionne que pour les adresses américaines. Si vous souhaitez obtenir les coordonnées dans un autre pays, vous devez rechercher un outil similaire dans votre région.
03 de 05Ajout de la carte à votre page Web
Tout d’abord, ajoutez le script de map au
de votre document
Ouvrez votre page Web et ajoutez ce qui suit au TÊTE de votre document.
Remplacez la partie en surbrillance par les chiffres de latitude et de longitude que vous avez notés à l’étape deux.
Deuxièmement, ajoutez l'élément de carte à votre page
Une fois que vous avez tous les éléments de script ajoutés à la TÊTE de votre document, vous devez positionner votre carte sur la page. Vous faites cela en ajoutant un DIV élément avec le id = "carte-toile" attribut. Je vous recommande également de styler cette div avec la largeur et la hauteur qui conviendront à votre page:
Enfin, télécharger et tester
La dernière chose à faire est de télécharger votre page et de tester l'affichage de votre carte. Voici un exemple de carte Google sur la page. Remarque: en raison du fonctionnement du système de gestion de contenu About.com, vous devrez cliquer sur un lien pour faire apparaître la carte. Ce ne sera pas le cas sur votre page.
Si votre carte ne s'affiche pas, essayez de l'initialiser avec un CORPS attribut:
onload = "initialize ()" >
Les autres éléments à vérifier si votre carte ne se charge pas sont les suivants:
- Rechercher des fautes de frappe dans votre JavaScript, y compris le cas. JavaScript est sensible à la casse.
- Assurez-vous que vous avez le
Zoometcentreensemble d'options. - Assurez-vous que votre
DIVL'élément est sur la page avec l'ID correct. - Assurez-vous que votre
DIVl'élément a une hauteur.
Ajouter un marqueur à votre carte
Mais à quoi sert une carte de votre emplacement s’il n’ya pas de marqueur qui indique aux gens où ils doivent aller?
Pour ajouter un marqueur rouge Google Maps standard, ajoutez ce qui suit à votre script sous le var map = … ligne:
var myLatlng = new google.maps.LatLng ( latitude Longitude );var marker = new google.maps.Marker ({position: myLatlng,carte: carte,Titre:" Ancien siège social de About.com '});
Modifiez le texte mis en surbrillance en fonction de votre latitude et de votre longitude, ainsi que le titre à afficher lorsque des personnes survolent le marqueur.
Vous pouvez ajouter autant de marqueurs que vous le souhaitez sur la page. Ajoutez simplement de nouvelles variables avec de nouvelles coordonnées et de nouveaux titres, mais si la carte est trop petite pour afficher tous les marqueurs, elles ne s'afficheront que si le lecteur effectue un zoom arrière.
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({position: latlng 2 ,carte: carte,Titre:" ordinateur Apple '});
Voici un exemple de carte Google avec un marqueur. Notez qu'en raison du fonctionnement du système de gestion de contenu About.com, vous devez cliquer sur un lien pour faire apparaître la carte. Ce ne sera pas le cas sur votre page.
05 de 05Ajouter une seconde (ou plus) carte à votre page
Si vous avez consulté mon exemple de page Google Maps, vous remarquerez que plusieurs cartes sont affichées sur cette page. C'est très facile à faire. Voici comment.
- Obtenez la latitude et la longitude de toutes les cartes que vous souhaitez afficher, comme indiqué à l'étape 2 de ce didacticiel.
- Insérez la première carte, comme nous l’avons appris à l’étape 3 de ce didacticiel. Si vous souhaitez que la carte comporte un marqueur, ajoutez-le comme à l'étape 4.
- Pour la deuxième carte, vous devrez ajouter 3 nouvelles lignes à votre script initialize ():
var latlng2 = new google.maps.LatLng ( seconde coordonnées );var myOptions2 = {zoom: 18, centre: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Si vous souhaitez également un marqueur sur la nouvelle carte, ajoutez un deuxième marqueur pointant vers la deuxième coordonnée et la deuxième carte:
var myMarker2 = new google.maps.Marker ({position: latlng2 , carte: map2 , Titre:" Titre de votre marqueur ' }); - Ajoutez ensuite le second où vous voulez la deuxième carte. Et assurez-vous de lui donner un
id = "map_canvas_2"ID. - Lorsque votre page se charge, deux cartes s'afficheront
Voici le code d'une page contenant deux cartes Google:
