Comment ajouter une carte Google à une page Web avec API

Ce qu'il faut savoir

  • Allez au Console Google Cloud Platform et créez ou sélectionnez un projet, puis cliquez sur Continuer. Sur le Crédits page, obtenez un Clé API.
  • Insérez le code JavaScript (illustré ci-dessous) dans la section BODY du document HTML.
  • Dans l'en-tête du document HTML, spécifiez les contraintes CSS pour la carte, notamment le dimensionnement, les couleurs et le placement des pages.

Cet article explique comment insérer une carte Google avec un marqueur d'emplacement dans votre page Web. Ce processus comprend l'obtention d'une clé logicielle spéciale de Google, puis l'ajout du code JavaScript pertinent à la page.

Obtenir une clé API Google Maps

Pour protéger ses serveurs contre le bombardement de demandes de cartes et de recherches de localisation, Google limite l'accès à sa base de données Maps. Vous devez vous inscrire auprès de Google en tant que développeur pour obtenir une clé unique permettant d'utiliser l'interface de programmation d'application pour demander des données aux serveurs Maps. La clé API est gratuite, sauf si vous avez besoin d'un accès intensif aux serveurs de Google (par exemple, pour développer une application Web).

instagram viewer

Pour enregistrer votre clé API:

  1. Allez au Console Google Cloud Platform et, après vous être connecté avec votre compte Google, créez un nouveau projet ou sélectionnez-en un existant.

  2. Cliquez sur Continuer pour activer l'API et tous les services associés.

  3. Sur le Crédits page, obtenez un Clé API. Si nécessaire, définissez des restrictions pertinentes sur la clé.

  4. Sécurisez votre clé API en utilisant les meilleures pratiques recommandé par Google.

Si vous pensez que vous aurez besoin d'afficher la carte plus souvent que ne le permet votre quota gratuit, configurez un accord de facturation avec Google. Il est peu probable que la plupart des sites Web, en particulier les blogs à faible trafic ou les sites de niche, consomment une grande partie de l'allocation de quota.

Insérez le JavaScript dans votre page Web

Insérez le code suivant dans votre page Web, dans la section BODY du document HTML:

// Initialiser et ajouter la fonction map initMap() {
// L'emplacement du drapeau var flag = {lat: XXX, lng: YYY};
// La carte, centrée sur le drapeau var map = new google.maps. Map( document.getElementById('map'), {zoom: 4, center: flag});
// Le marqueur, positionné au drapeau var marker = new google.maps. Marqueur({position: drapeau, carte: carte}); } src=" https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap">

Dans ce code, modifiez les éléments suivants:

  • Remplacer drapeau avec un nom qui fait référence à l'emplacement que vous épinglez. Restez simple et court (comme domicile ou alors Bureau ou alors Paris ou alors détroit). Vous pouvez exécuter ce code en laissant drapeau tel quel, mais la modification du nom permet la réutilisation de ce code sur la même page, pour intégrer plusieurs cartes différentes.
  • Remplacer XXX et AAAA avec la latitude et la longitude, en décimales, de l'emplacement du marqueur de la carte. Vous devez remplacer ces valeurs pour que la carte s'affiche correctement. Un moyen facile de trouver la latitude et la longitude est d'ouvrir Google Maps et de cliquer avec le bouton droit sur l'emplacement précis que vous souhaitez signaler. Dans le menu contextuel, sélectionnez Qu'est ce qu'il y a ici? pour afficher la latitude et la longitude.
  • Remplacer YOUR_API_KEY avec la clé API que vous avez obtenue de Google. Ne mettez pas d'espace entre le signe égal et l'esperluette. Sans la clé, la requête échouera et la carte ne s'affichera pas correctement.

Pratiques optimales

Dans l'en-tête de votre document HTML, spécifiez les contraintes CSS pour la carte, notamment le dimensionnement, les couleurs et le placement des pages.

Le script de carte de Google contient des attributs tels que Zoom et centre qui sont ouverts à la modification de l'utilisateur final. Cette technique plus avancée est prise en charge par la documentation destinée aux développeurs de Google.

Une API Google Maps est un atout précieux. Les instructions de bonnes pratiques de Google offrent d'excellents conseils pour protéger la clé contre toute utilisation abusive par d'autres. Une bonne sécurité est particulièrement pertinente si vous avez mis en place un système de paiement pour l'accès à l'API, car vous pourriez faire face à une facture élevée si vos identifiants sont volés. En particulier, l'exemple que nous avons montré ici Est-ce que intégrer la clé API directement dans le code—nous l'avons fait dans le but de démontrer la procédure. Dans un environnement de production, cependant, il est préférable de spécifier des variables d'environnement pour la clé au lieu d'insérer la clé directement.