Accentsconagua

Voici comment utiliser l’API de Google Maps - screencast

Code
Share

Ainsi, votre client vous envoie un e-mail et demande: "Pouvez-vous mettre une de ces cartes flashy sur ma page de contact afin que les utilisateurs puissent réellement voir notre bâtiment de la vue d'un satellite?". Vous avez utilisé Google Maps à plusieurs reprises, mais il n'y a qu'un seul problème: vous ne savez pas comment utiliser l'API. Eh bien, sortez votre cuillère et creusez!

* Cliquez sur la bascule plein écran.




Étape 1: Obtenir une clé API unique

Si vous deviez télécharger le code source fourni avec cet article, vous constateriez que cela ne fonctionne pas sur votre site Web. La raison en est que Google exige que tous les utilisateurs obtiennent une "clé API" unique pour chaque site qui implémente Google Maps..

Jamais peur. C'est 100% gratuit et il faut environ trente secondes pour vous inscrire. Tout d'abord, visitez la page d'inscription de Google et entrez l'URL de votre site Web. Ne vous inquiétez pas pour l'ajout d'un chemin spécifique. L'URL racine couvrira chaque page faisant partie de ce domaine. Acceptez les termes et conditions et cliquez sur "Générer l'API".

C'est tout! La page vers laquelle vous avez été redirigé contient votre clé unique, ainsi qu'un exemple de page, à utiliser comme cours intensif. Votre clé ressemblera à quelque chose comme:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

Vous trouverez également un chemin de script qui ressemblera à:

Le vôtre sera différent du mien car il contiendra votre propre valeur de clé spécifique. Copiez-le et collez-le dans la tête de votre document..

Vous voudrez peut-être mettre en signet le lien vers la documentation de l'API. Vous vous y référerez certainement au fur et à mesure que vos compétences progressent..

Étape 2: Configuration de votre code HTML

Par souci de simplicité, nous allons créer une mise en page simple. Ajoutez les éléments suivants dans l'élément body de votre document.

En situation réelle, vous devez déplacer le style dans un fichier externe (comme je l'ai fait dans la vidéo). Les valeurs de hauteur et de largeur seront utilisées par l'API pour déterminer les dimensions de votre carte. Ne vous inquiétez pas, rien ne sera coupé.

Étape 3: Javascript

Ensuite, ajoutez ce qui suit à votre fichier Javascript. Révisez-le un peu et continuez ensuite.

 $ (function () // lorsque le document est prêt à être manipulé. if (GBrowserIsCompatible ()) // si le navigateur est compatible avec la carte var de Google Map = document.getElementById ("myMap"); // Get div element var m = new GMap2 (map); // nouvelle instance de la classe GMap2 et passage dans notre emplacement div. m.setCenter (new GLatLng (36.158887, -86.782056), 13); // passez en latitude, longitude, et niveau de zoom. else alert ("Votre navigateur ne vaut pas la peine."););

Pour prendre ce code ligne par ligne:

  • Lorsque le document est prêt à être manipulé, exécutez le code à l'intérieur. Il s'agit d'une syntaxe jQuery, mais jQuery n'est pas indispensable. Vous pouvez également simplement ajouter un attribut "onLoad ()" à votre élément body, bien que cela soit compliqué..
  • Si le navigateur à partir duquel l'utilisateur accède à la carte n'est pas compatible avec l'API, affichez une alerte (voir ci-dessous). Sinon, lancez le code dans.
  • Créez une variable appelée "map" et dites-lui de trouver le div qui contiendra la carte.
  • Ensuite, créez une variable appelée "m" et réglez-la sur une nouvelle instance de la classe "GMap2". Dans la parenthèse, passez la variable "map" que vous venez de créer
  • Enfin, définissez un point central pour que la carte sache quoi afficher. Pour ce faire, nous créons une nouvelle instance de la classe "GLatLng" et transmettons les valeurs de latitude et de longitude. Vous pouvez aller ici pour saisir les valeurs appropriées. Dans mon cas, j'ai défini les coordonnées de ma ville d'origine. Après cela, vous pouvez éventuellement entrer un niveau de zoom - que j'ai réglé sur le standard "13".

Ce code à lui seul vous donnera une carte de base qui pourrait parfaitement convenir à vos besoins. Toutefois, si vous souhaitez également implémenter les fonctionnalités de "zoom" et de "mode carte", lisez la suite..

Étape 4: Affiner notre carte

Il existe littéralement des dizaines de fonctionnalités que vous pouvez ajouter à votre carte. Nous allons en passer quelques unes. Tout d'abord, nous allons implémenter une barre de zoom qui permettra aux utilisateurs d'effectuer un zoom avant ou arrière incrémentiel.

 m.addControl (new GLargeMapControl ())

Ici, nous prenons notre carte et ajoutons un nouveau contrôle appelé "GLargeMapControl".

Ensuite, ajoutons une fonctionnalité qui permettra aux utilisateurs de choisir le mode de carte qu’ils souhaitent: Normal, Vue satellite ou hybride..

 var c = new GMapTypeControl (); // changement de mode de carte m.addControl (c);
  • Créer une variable appelée "c" et la rendre égale à une nouvelle instance de la classe "GMapTypeControl".
  • Ajouter un nouveau contrôle et passer "c".

Si vous actualisez votre navigateur, vous verrez que l'utilisateur a maintenant la possibilité de choisir son mode de visualisation. Mais que faire si vous voulez définir le mode par défaut? Dans de tels cas, vous utiliseriez "setMapType".

 m.setMapType (G_SATELLITE_MAP);

Lorsque vous définissez le mode par défaut, vous avez trois choix.

  • G_SATELLITE_MAP
  • G_NORMAL_MAP
  • G_HYBRID_MAP

Vous avez fini!

Ce n'était pas trop difficile, n'est-ce pas? Vous aurez besoin de mémoriser quelques noms de classes spécifiques ou de les noter pour référence ultérieure. Mais à part cela, il est très simple d'implémenter une carte aussi avancée dans vos sites Web..

Pour vous, concepteurs de modèles, pourquoi ne pas l'intégrer à l'un des thèmes que vous vendez sur ThemeForest?

Il y a quelques jours, nous avons publié un tutoriel qui vous montre comment combiner plusieurs API, y compris Google Maps. Mais beaucoup d'entre vous n'en savaient pas assez pour commencer. J'espère que cela aidera. Une fois que vous avez compris cette API, pourquoi ne pas vous épargner des maux de tête et faire appel à une classe PHP appelée Phoogle? Je pense qu'il est préférable d'apprendre le bon chemin d'abord, mais maintenant que vous avez… coupé quelques coins! À la semaine prochaine.

Ressource additionnelle

  • Comment créer un mashup en combinant 3 API différentes

    Ce tutoriel vous montrera comment créer un mashup de trois API différentes, y compris l'intégration à Google Maps..

    Visitez l'article

    • Abonnez-vous au flux RSS et au flux vidéo pour obtenir plus d'articles et d'articles sur le développement Web au quotidien.


Code
×