Ajouter des itinéraires Google Maps sur votre site Web

Même s'il existe de nombreuses applications et services de cartographie permettant de vous rendre d'un point A à un point B, le roi des cartes est sans conteste Google Maps. Je l'utilise sur mon ordinateur, ma tablette et 90% du temps sur mon smartphone. Il contient les meilleures données, le plus grand nombre d'options de navigation et de routage, ainsi que des fonctionnalités intéressantes comme Street View et des informations sur la marche, le vélo et les transports en commun..

Mais que se passe-t-il si vous devez utiliser une carte ou des instructions en dehors du site Web de Google? Supposons que vous ayez votre propre site Web de mariage ou un blog personnel et que les invités puissent visiter votre site, saisir l'adresse d'où ils viendront et obtenir automatiquement les directions pour vous rendre au lieu de l'événement.!

Eh bien, vous pouvez y parvenir de plusieurs façons. Le moyen le plus simple consiste simplement à intégrer la carte sur votre page Web à l'aide du code d'intégration généré par Google Maps. La seconde façon est un peu plus technique, mais plus personnalisable et dynamique. Je mentionnerai les deux méthodes ci-dessous.

Intégrer Google Map

Si vous souhaitez uniquement afficher les indications d'un lieu à un autre, la solution la plus simple consiste à intégrer la carte affichée à l'aide du code d'intégration. Commencez par définir les directions de votre choix dans Google Maps, puis cliquez sur l’icône représentant un engrenage en bas à droite de la page..

Cliquer sur Partager ou intégrer la carte puis cliquez sur le Carte intégrée languette. Ici, vous pouvez choisir une taille pour votre carte, puis copier le code iframe et le déposer sur la page Web de votre choix..

Le seul inconvénient de cette méthode est que l'utilisateur ne voit qu'une carte statique. Dans la deuxième méthode ci-dessous, vous pouvez créer un formulaire dans lequel l'utilisateur peut entrer n'importe quelle adresse de départ et générer une carte de cette adresse à l'adresse de destination de votre choix..

Créer un formulaire Google Maps

Pour illustrer ce que j'entends par la deuxième méthode, entrez une adresse US dans l'encadré ci-dessous pour obtenir un itinéraire entre votre domicile et ma maison:

Cool hein? Vous pouvez facilement créer ce petit formulaire sur n’importe quel site Web, blog ou partout où vous pouvez insérer du code HTML! C’est également intéressant pour les sites Web de petites entreprises, car vous pouvez l’afficher sur votre page de contact et permettre aux gens d’obtenir rapidement un itinéraire, sans avoir à copier votre adresse, à ouvrir une nouvelle fenêtre, puis à saisir leur adresse de départ..

Alors, comment pouvons-nous créer cette boîte à instructions de chargement modifiée? Tout d’abord, nous devons obtenir la syntaxe correcte pour l’URL utilisée par Google pour les instructions. Heureusement, nous pouvons résoudre ce problème en obtenant un itinéraire entre deux endroits, puis en copiant simplement l'URL à partir de la barre d'adresse. Vous pouvez également cliquer sur l’icône représentant une petite roue en bas à droite de la page et choisir Partager ou intégrer la carte.

L'onglet Lien de partage contiendra l'URL, qui est la même URL dans la barre d'adresse de votre navigateur. Je suis allé de l'avant et collé l'URL entière ci-dessous juste pour vous montrer à quoi ça ressemble.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 + Deerfield + Rd, + Allen, + TX + 75013, + USA / @ 33.1125686, -96.7557749,13z / data =! 3m1! 4b1! 4m13! 4m12! 1m5! 1m1! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2m2! 1d-96.762484! 2d33.98445! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892

Beurk! C'est assez long! Il y a beaucoup de choses là-dedans, dont la plupart n'ont aucun sens! Les paramètres d'URL de Google Maps étaient très simples et faciles à utiliser, mais la nouvelle structure d'URL est assez compliquée. Heureusement, vous pouvez toujours utiliser les anciens paramètres et Google les convertira automatiquement dans la nouvelle version. Pour voir ce que je veux dire, consultez le lien ci-dessous.

http://maps.google.com/maps?saddr=start&daddr=end

Allez-y et donner un coup de feu. Mettez une adresse entre guillemets pour les adresses de début et de fin et collez l'URL dans votre navigateur! J'ai remplacé commencer par New York, ma ville natale, et Houston, TX. Voici donc l'URL de mon itinéraire Google Maps:

http://maps.google.com/maps?saddr="new orleans, la "& daddr =" houston, tx "

Ça marche! Comme vous pouvez le constater, Google Maps convertit les liens en quelque chose de beaucoup plus compliqué une fois la carte chargée. Ok, alors maintenant que nous avons une URL saine que nous pouvons transférer dans Google Maps, nous devons créer un formulaire simple avec deux champs, l'un pour l'adresse de départ et l'autre pour l'adresse de destination..

Si vous voulez que les gens entrent simplement leur adresse et obtiennent un itinéraire, alors nous voulons que le deuxième champ soit masqué et déjà défini sur l'adresse de destination..

Entrez votre adresse de départ:

Découvrez le code ci-dessus. La première ligne commence par le formulaire et indique que, lorsque l'utilisateur clique sur le bouton Envoyer, les données doivent être envoyées à maps.google.com/maps. le cible = vide signifie que nous voulons que le résultat s'ouvre dans une nouvelle fenêtre. Ensuite, nous avons une zone de texte pour l'adresse de départ, qui est vide.

La deuxième zone de texte est masquée et la valeur correspond à l'adresse de destination souhaitée. Enfin, il y a un bouton d'envoi avec le titre "Obtenir les directions". Maintenant, quand quelqu'un tape son adresse, il aura ceci:

Vous pouvez personnaliser les itinéraires et mapper encore plus avec quelques paramètres supplémentaires. Par exemple, supposons que vous ne vouliez pas que la vue par défaut soit une carte, mais plutôt une vue. Satellite et spectacle Trafic.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Remarquez le couche = t et t = h champs dans l'URL. couche = t est pour la couche de trafic et t = h signifie carte hybride! t peut également être réglé sur m pour carte normale, k pour satellite et p pour terrain. z est le niveau de zoom et vous pouvez le changer de 1 à 20. Dans l'URL ci-dessus, il est défini sur 7. Fixez-les simplement sur votre URL finale et vous avez maintenant un formulaire Google Maps Obtenir des itinéraires hautement personnalisé sur votre site.!

Avez-vous des problèmes avec cela, postez un commentaire et je vais essayer de vous aider! Prendre plaisir!