Hoewel er zoveel kaartapps en -services zijn om u van punt A naar punt B te brengen, is Google Maps de definitieve koning onder de kaarten . Ik gebruik het op mijn computer, tablet en 90% van de tijd op mijn smartphone. Het heeft de beste gegevens, de meeste navigatie- en routeopties en coole functies zoals Street View en informatie over wandelen, fietsen en openbaar vervoer.

Maar wat als u een kaart of routebeschrijving buiten de website van Google moet gebruiken? Stel^(Suppose) , u heeft uw eigen trouwwebsite of een persoonlijke blog en gasten kunnen uw site bezoeken, het adres intypen waar ze vandaan komen en automatisch een routebeschrijving naar de evenementlocatie krijgen!

Welnu, er zijn een aantal manieren waarop u dit kunt bereiken. De eenvoudigste manier is om de kaart eenvoudig in uw webpagina in te sluiten met behulp van de insluitcode die is gegenereerd door Google Maps . De tweede manier is wat technischer, maar meer aanpasbaar en dynamischer. Ik noem beide methoden hieronder.

Google Map insluiten

Als u alleen de routebeschrijving van de ene locatie naar de andere wilt weergeven, is het het gemakkelijkst om de kaart die u bekijkt in te sluiten met behulp van de insluitcode. Ga eerst^(First) door en stel de gewenste richtingen in Google Maps in en klik vervolgens op het tandwielpictogram rechtsonder op de pagina.

Klik op Kaart delen of insluiten^{( Share or embed map)} en klik vervolgens op het tabblad Kaart insluiten . ^{(Embed map)}Hier kunt u een formaat voor uw kaart kiezen en vervolgens de iframe-code kopiëren en op elke gewenste webpagina neerzetten.

Het enige nadeel van deze methode is dat de gebruiker alleen een statische kaart ziet. In de tweede methode hieronder, kunt u een formulier maken waarbij de gebruiker elk startadres kan invoeren en een kaart van dat adres naar een bestemmingsadres naar keuze zal genereren.

Google Maps-formulier maken

Om te illustreren wat ik bedoel met de tweede methode, typt u een Amerikaans adres in het onderstaande vak om een ​​routebeschrijving van uw locatie naar mijn huis te krijgen:

Cool hè? Je kunt dit kleine formulier eenvoudig maken op elke website, blog of waar je ook maar wat HTML -code kunt invoeren! Dit is ook geweldig voor websites voor kleine bedrijven, omdat u het op uw contactpagina kunt gooien en mensen snel een routebeschrijving kunnen krijgen, in plaats van uw adres te kopiëren, een nieuw venster te openen en vervolgens hun startadres in te voeren.

Dus hoe gaan we om met het maken van dit gewijzigde venster met routebeschrijvingen? Eerst^(Well) moeten we de juiste syntaxis krijgen voor de URL die Google gebruikt voor een routebeschrijving. Gelukkig kunnen we dat achterhalen door een routebeschrijving tussen twee plaatsen te krijgen en vervolgens de URL uit de adresbalk te kopiëren. U kunt ook op het kleine tandwielpictogram helemaal rechtsonder op de pagina klikken en Kaart delen of insluiten^{(Share or embed map)} kiezen .

Het tabblad Link delen^(Share) bevat de URL , wat dezelfde URL is in de adresbalk van uw browser. Ik ben doorgegaan en heb de volledige URL hieronder geplakt om je te laten zien hoe het eruit ziet.

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

Jakkes! Dat is best lang! Er staan ​​veel dingen in, waarvan de meeste nergens op slaan! De URL-parameters van Google Maps^{(Google Maps URL)} waren vroeger heel eenvoudig en gemakkelijk, maar de nieuwe URL- structuur is behoorlijk ingewikkeld. Gelukkig kun je nog steeds de oude parameters gebruiken en zal Google ze automatisch naar de nieuwe versie converteren. Bekijk de onderstaande link om te zien wat ik bedoel.

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

Ga je gang en geef het een kans. Zet een adres tussen aanhalingstekens voor het begin- en eindadres en plak de URL in je browser! Ik heb het begin vervangen door mijn thuisstad New Orleans en eindigen met Houston , TX, dus dit is hoe mijn Google Maps - routebeschrijvings - URL eruit ziet:

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

Het werkt! Zoals je kunt zien, converteert Google Maps de links naar iets veel gecompliceerder zodra de kaart volledig is geladen. Oké, dus nu we een normale URL hebben die we kunnen doorgeven aan Google Maps , moeten we een eenvoudig formulier maken met twee velden, één voor het startadres en één voor het bestemmingsadres.

Als u wilt dat mensen gewoon hun adres invoeren en een routebeschrijving naar uw plaats krijgen, willen we dat het tweede veld wordt verborgen en al is ingesteld op het bestemmingsadres.

<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>

Bekijk de code hierboven. De eerste regel begint met het formulier en zegt dat wanneer op de verzendknop wordt geklikt, de gegevens naar maps.google.com/maps moeten worden verzonden. De target=blank betekent dat we willen dat het resultaat in een nieuw venster wordt geopend. Dan hebben we een tekstvak voor het startadres, dat leeg is.

Het tweede tekstvak is verborgen en de waarde is het bestemmingsadres dat we wensen. Ten slotte is er een verzendknop met de titel "Routebeschrijving". Wanneer iemand zijn adres intypt, krijgt hij dit:

U kunt de routebeschrijving en kaart nog meer aanpassen met een paar extra parameters. Stel dat u bijvoorbeeld niet wilt dat de standaardweergave kaarten is, maar in plaats daarvan Satelliet^(Satellite) is en Verkeer weergeeft^(Traffic) .

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

Let op de velden layer=t en t=hURL . layer=t is voor de verkeerslaag en t=h betekent hybride kaart! t kan ook worden ingesteld op m voor normale kaart, k voor satelliet en  p voor terrein. z is het zoomniveau en u kunt dit wijzigen van 1 tot 20. In de bovenstaande URL is deze ingesteld op 7. Voeg die gewoon^(Just) toe aan uw uiteindelijke URL en u heeft nu een zeer aangepast Google Maps^{(Google Maps Get Directions)} -formulier voor routebeschrijving op uw site !

Heb je hier problemen mee, plaats dan een reactie en ik zal proberen te helpen! Genieten van!

Add Google Maps Driving Directions to Your Website

Εven thоugh there are so many mаpping apps and services out there to get you from point A tо point B, the definitive king of maps is Google Maps. I use it on my computer, tablet and 90% of the time on mу smartphone. Іt’s got the beѕt data, the most navigation and routing options and cool features like Street View and walking, biking and mаѕs 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 praat niet of geeft geen gesproken aanwijzingen? 12 manieren om te repareren

• 9 verborgen functies in Google Maps die u moet uitchecken

• Hoe u uw Google Maps-zoekgeschiedenis kunt bekijken

• Meerdere tussenstops gebruiken in Google Maps

• Hoe u Google-formulieren op uw website kunt insluiten

• Wat zijn Google-blootstellingsmeldingen voor COVID-bescherming?

• De incognitomodus van Google Maps gebruiken op een Android-apparaat

• Hoe te filteren in Google Spreadsheets

• Google-zoekbalkwidget ontbreekt? Hoe het te herstellen op Android

• Een e-mail in Gmail ongedaan maken

• Wat is de Software Reporter Tool in Chrome en hoe kan ik deze uitschakelen?

• Hoe werkt het YouTube-algoritme?

• Google Analytics-methoden voor gebruikersonderzoek om websiteverkeer te stimuleren

• Een visitekaartje maken in Google Drive

• Hoe Google Taken te gebruiken - Handleiding Aan de slag

• Hoe kom je in Inbox Zero in Gmail

• Privé-e-mails verzenden in Gmail

• Wat is verbeterde bescherming in Google Chrome en hoe u dit kunt inschakelen?

• Locatiegeschiedenis van Google Maps: 5 nuttige dingen die u ermee kunt doen

• Locatiegeschiedenis van Google Maps bekijken