Comment ajouter une carte Google à une page Web avec l’API



par

Pour insérer une carte Google avec un marqueur d'emplacement dans votre page Web, vous devrez acquérir une clé logicielle spéciale auprès de Google, puis ajouter le JavaScript approprié dans la page. Bien que le processus soit simple, il permet d'avoir au moins une connaissance de base superficielle du HTML et du JavaScript.


Obtenir une clé API Google Maps

Pour protéger ses serveurs contre les bombardements 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).

Pour enregistrer votre clé API:

  1. Accédez à la 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. Installation: Flottante - CLIQUEZ Continuer pour activer l'API et tous les services associés.

  3. Sur le Lettres de créance page, obtenez une Clé API. Si nécessaire, définissez les restrictions appropriées sur la clé.

  4. Sécurisez votre clé API en utilisant les meilleures pratiques recommandées 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:

<div id = "map"> </div>
<script>
// Initialise et ajoute la carte
function initMap () {
// L'emplacement du drapeau
indicateur var = {lat: XXX, lng: YYY};
// La carte, centrée sur le drapeau
var map = nouveau google.maps.Map (
document.getElementById ('map'), {zoom: 4, center: flag});
// Le marqueur, positionné sur le drapeau
var marker = new google.maps.Marker ({position: flag, map: map});
}
</ Script>
<script async defer
src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">


Laisser un commentaire