Même s'il existe de nombreuses applications et services^{(apps and services)} de cartographie pour vous emmener d'un point A à un point B, le roi définitif des cartes est Google Maps . Je l'utilise sur mon ordinateur, ma tablette et 90% du temps sur mon smartphone. Il dispose des meilleures données, du plus grand nombre d'options de navigation et d'itinéraire, ainsi que de fonctionnalités intéressantes telles que Street View et des informations sur la marche^{(Street View and walking)} , le vélo et les transports en commun^{(biking and mass transit info)} .

Mais que se passe-t-il si vous avez besoin d'utiliser une carte ou des itinéraires^{(map or directions)} en dehors du site Web de Google ? Supposons que^(Suppose) vous ayez votre propre site Web de mariage^{(wedding website)} ou un blog personnel et que les invités^{(blog and guests)}  puissent visiter votre site, saisir l'adresse d'où ils viendront et obtenir automatiquement les directions vers le lieu de l'événement^{(event location)} !

Eh bien, il existe plusieurs façons d'y parvenir. 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 deuxième 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 directions d'un endroit à un autre, la chose la plus simple à faire est d'intégrer la carte que vous visualisez à l'aide du code d'intégration. Tout^(First) d'abord , allez-y et configurez les directions souhaitées dans Google Maps , puis cliquez sur l'icône d'engrenage en bas à droite de la page.

Cliquez sur Partager ou intégrer la carte^{( Share or embed map)} , puis cliquez sur l' onglet Intégrer la carte . ^{(Embed map)}Ici, vous pouvez choisir une taille pour votre carte, puis copier le code iframe et le déposer^{(iframe code and drop)} 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 saisir n'importe quelle adresse de départ et il générera une carte de cette adresse à une adresse de destination^{(destination address)} de votre choix.

Créer un formulaire Google Maps

Pour illustrer ce que je veux dire par la deuxième méthode, allez-y et tapez une adresse aux États^{(US address)} -Unis dans la case ci-dessous pour obtenir les directions de votre emplacement à ma maison :

Cool hein^{(Cool huh)} ? Vous pouvez facilement créer ce petit formulaire sur n'importe quel site Web, blog ou n'importe où vous pouvez mettre du code HTML^{(HTML code)} ! C'est également idéal pour les sites Web de petites entreprises^{(business web)} , car vous pouvez l'afficher sur votre page de contact et les gens^{(contact page and people)} peuvent obtenir des directions rapidement, plutôt que d'avoir à copier votre adresse, ouvrir une nouvelle fenêtre, puis taper leur adresse de départ^{(starting address)} .

Alors, comment allons-nous créer cette boîte d'itinéraire modifiée ? Eh bien^(Well) , d'abord, nous devrons obtenir la syntaxe correcte pour l' URL que Google utilise pour les directions. Heureusement, nous pouvons comprendre cela en obtenant des directions entre deux endroits, puis en copiant simplement l' URL à partir de la barre d'adresse^{(address bar)} . Vous pouvez également cliquer sur la petite icône d'engrenage tout en bas à droite de la page et choisir Partager ou intégrer la carte^{(Share or embed map)} .

L' onglet Partager le lien^{(Share link)} contiendra l' URL , qui est la même URL dans la barre d'adresse de votre navigateur^{(browser address bar)} . Je suis allé de l'avant et j'ai collé l'intégralité de l' URL ci-dessous^{(URL below)} juste pour vous montrer à quoi cela 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.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Aïe ! 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^{(Google Maps URL)} étaient auparavant très simples et simples, mais la nouvelle structure d'URL^{(URL structure)} 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 l'adresse de début et de fin et collez^{(address and paste)} l' URL dans votre navigateur ! J'ai remplacé le début par ma ville natale de ^{(home city)} la Nouvelle-Orléans^{(New Orleans)} et la fin par Houston , TX, donc voici à quoi ressemble 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 voir, cependant, Google Maps convertit les liens en quelque chose de beaucoup plus compliqué une fois la carte entièrement chargée. Ok, maintenant que nous avons une URL saine que nous pouvons transmettre à Google Maps , nous devons créer un formulaire simple avec deux champs, un pour l' adresse de départ^{(starting address)} et un pour l' adresse de destination^{(destination address)} .

Si vous voulez que les gens saisissent simplement leur adresse et obtiennent l'itinéraire jusqu'à chez vous, nous voudrons que le deuxième champ soit masqué et déjà défini sur l' adresse de destination^{(destination address)} .

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

Consultez le code ci-dessus. La première ligne commence par le formulaire et indique que lorsque le bouton^{(submit button)} d'envoi est cliqué, les données doivent être envoyées à maps.google.com/maps. La target=blank signifie que nous voulons que le résultat s'ouvre dans une nouvelle fenêtre. Ensuite, nous avons une zone de texte^{(text box)} pour l ' adresse de départ^{(starting address)} , qui est vide.

La deuxième zone de texte^{(text box)} est masquée et la valeur est l' adresse de destination^{(destination address)} souhaitée. Enfin, il y a un bouton de soumission avec le titre "Get Directions". Maintenant, quand quelqu'un tape son adresse, il obtient ceci :

Vous pouvez personnaliser encore plus les directions et la carte avec quelques paramètres supplémentaires. Par exemple, supposons que vous ne souhaitiez pas que la vue par défaut^{(default view)} soit Cartes, mais que vous souhaitiez plutôt qu'elle soit Satellite et affiche Trafic^(Traffic) .

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

Notez les champs layer=t et t=hURL . layer=t est pour la traffic layer and t=h means carte hybride ! t peut également être défini sur m pour la carte normale, k pour le satellite et  p pour le terrain. z est le niveau de zoom^{(zoom level)} et vous pouvez le modifier de 1 à 20. Dans l' URL ci-dessus , il est défini sur 7. Ajoutez-les simplement^(Just) à votre URL finale et vous avez maintenant un formulaire Google Maps Get Directions^{(Google Maps Get Directions form)} hautement personnalisé sur votre site. !

Si vous avez des problèmes avec cela, postez un commentaire et j'essaierai de vous aider! Prendre plaisir!

Add Google Maps Driving Directions to Your Website

Even though there arе so many mapping apps and servicеs out there to get you from point A to pоint B, the definitive king of maps is Google Maps. I use it on my computer, tablet and 90% of the time on my smartphone. It’s got the best data, the most navigatiоn and roυting oрtions and cool featurеs like Street View and wаlking, biking and mass transit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

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.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

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

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

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

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

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

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Google Maps ne parle pas ou ne donne pas d'itinéraire vocal ? 12 façons de réparer

• 9 Hidden Caractéristiques de Google Maps Vous devriez vérifier

• Comment voir votre Google Maps Search History

• Comment utiliser plusieurs Stops dans Google Maps

• Comment 08206224 sur Your Website

• Comment utiliser les listes Google Sheets Drop Down

• Google My Activity: Pourquoi devriez-vous m'occuper

• Pouvez-vous supprimer tous les emails de Gmail à la fois?

• Comment faire un Business Card dans Google Drive

• Comment utiliser Google Calendar: 10 Pro Tips

• Google Search Bar Widget Missing? Comment le restaurer sur Android

• Comment intégrer Google Calendar sur votre site Web

• Comment afficher l'historique de localisation de Google Maps

• Comment faire un Google Form: A Complete Guide

• Comment non-reposer un Email dans Gmail

• Comment supprimer YouTube History and Search Activity

• Quel est le Google App & How pour l'utiliser

• Comment utiliser Google Tasks - Guide de démarrage

• Comment déposer une épingle dans Google Maps sur ordinateur et mobile

• 3 façons de Create Borders dans Google Docs