Även om det finns så många kartappar och -tjänster där ute för att ta dig från punkt A till punkt B, är den definitiva kungen av kartor Google Maps . Jag använder den på min dator, surfplatta och 90 % av tiden på min smartphone. Den har den bästa datan, de flesta navigerings- och ruttalternativen och coola funktioner som Street View och information om promenader, cykling och kollektivtrafik.

Men vad händer om du behöver använda en karta eller vägbeskrivningar utanför Googles webbplats? Anta att^(Suppose) du har din egen bröllopswebbplats eller en personlig blogg och gäster kan besöka din sida, ange adressen de kommer ifrån och automatiskt få vägbeskrivningar till evenemangsplatsen!

Tja, det finns ett par sätt du kan gå för att åstadkomma detta. Det enklaste sättet är att helt enkelt bädda in kartan på din webbsida med hjälp av inbäddningskoden som genereras av Google Maps . Det andra sättet är lite mer tekniskt, men mer anpassningsbart och dynamiskt. Jag kommer att nämna båda metoderna nedan.

Bädda in Google Map

Om du bara vill visa vägbeskrivningar från en plats till en annan är det enklaste du kan göra att bädda in vilken karta du än tittar på med hjälp av inbäddningskoden. Gå först^(First) vidare och ställ in vilken vägbeskrivning du vill ha i Google Maps och klicka sedan på kugghjulsikonen längst ner till höger på sidan.

Klicka på Dela eller bädda in karta^{( Share or embed map)} och klicka sedan på fliken Bädda in karta^{(Embed map)} . Här kan du välja en storlek för din karta och sedan kopiera iframe-koden och släppa den på vilken webbsida du vill.

Den enda nackdelen med denna metod är att användaren bara ser en statisk karta. I den andra metoden nedan kan du skapa ett formulär där användaren kan skriva in valfri startadress och den kommer att generera en karta från den adressen till en destinationsadress som du väljer.

Skapa Google Maps-formulär

För att illustrera vad jag menar med den andra metoden, fortsätt och skriv en amerikansk adress i rutan nedan för att få vägbeskrivningar från din plats till mitt hus:

Cool va? Du kan enkelt skapa det här lilla formuläret på vilken webbplats, blogg eller var som helst du kan lägga in HTML -kod! Detta är också bra för småföretagswebbplatser eftersom du kan lägga upp det på din kontaktsida och folk kan få vägbeskrivningar snabbt, istället för att behöva kopiera din adress, öppna ett nytt fönster och sedan skriva in sin startadress.

Så hur går vi tillväga för att skapa den här ändrade rutan för vägbeskrivningar? Först^(Well) måste vi få rätt syntax för webbadressen^(URL) som Google använder för vägbeskrivningar. Lyckligtvis kan vi ta reda på det genom att få vägbeskrivningar mellan två platser och sedan bara kopiera URL :en från adressfältet. Du kan också klicka på den lilla kugghjulsikonen längst ner till höger på sidan och välja Dela eller bädda in karta^{(Share or embed map)} .

Fliken Dela^(Share) länk kommer att innehålla URL :en , som är samma URL i webbläsarens adressfält. Jag har gått vidare och klistrat in hela webbadressen^(URL) nedan bara för att visa dig hur den ser ut.

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

Hoppsan! Det är ganska långt! Det finns mycket grejer där inne, varav det mesta inte är meningsfullt! Google Maps URL- parametrar brukade vara väldigt enkla och enkla, men den nya URL- strukturen är ganska komplicerad. Tack och lov kan du fortfarande använda de gamla parametrarna och Google kommer att konvertera dem till den nya versionen automatiskt. För att se vad jag menar, kolla in länken nedan.

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

Varsågod och ge det ett försök. Sätt in en adress inom citattecken för start- och slutadressen och klistra in URL : en i din webbläsare! Jag ersatte start med min hemstad New Orleans och slutar med Houston , TX, så så här ser min webbadress^(URL) för vägbeskrivningar i Google Maps ut:

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

Det fungerar! Som du kan se konverterar Google Maps dock länkarna till något mycket mer komplicerat när kartan laddas helt. Ok, så nu när vi har en förnuftig URL som vi kan skicka till Google Maps måste vi skapa ett enkelt formulär med två fält, ett för startadressen och ett för destinationsadressen.

Om du vill att folk bara ska skriva in sin adress och få vägbeskrivningar till din plats, då vill vi att det andra fältet ska vara dolt och redan inställt på destinationsadressen.

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

Kolla in koden ovan. Den första raden börjar formuläret och säger att när du klickar på knappen Skicka, ska data skickas till maps.google.com/maps. Target target=blank betyder att vi vill att resultatet ska öppnas i ett nytt fönster. Sedan har vi en textruta för startadressen, som är tom.

Den andra textrutan är dold och värdet är destinationsadressen som vi önskar. Slutligen finns det en skicka-knapp med titeln "Hämta vägbeskrivningar". Nu när någon skriver in sin adress får de detta:

Du kan anpassa vägbeskrivningarna och kartlägga ännu mer med några extra parametrar. Låt oss till exempel säga att du inte vill att standardvyn ska vara kartor, utan istället vill att den ska vara Satellit^(Satellite) och visa Trafik^(Traffic) .

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

Lägg märke till fälten layer=t och t=h i URL :en . layer=t är för trafiklagret och t=h betyder hybridkarta! t kan också ställas in på m för normal karta, k för satellit och  p för terräng. z är zoomnivån och du kan ändra den från 1 till 20. I webbadressen^(URL) ovan är den inställd på 7. Lägg^(Just) dem bara till din slutliga webbadress^(URL) och du har nu ett mycket anpassat Google Maps Få vägbeskrivningsformulär^{(Google Maps Get Directions)} på din webbplats !

Har du några problem med detta, skriv en kommentar så ska jag försöka hjälpa dig! Njut av!

Add Google Maps Driving Directions to Your Website

Even though there are so many mapping apps and services out there to get you from point A to point B, the defіnitive king of maps is Google Maps. I use it on my computer, tаblet and 90% of the time on my smartphone. It’s got the best data, the mоst navigation and routing options and cool fеatures like Strееt View and walking, 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 talar inte eller ger röstanvisningar? 12 sätt att fixa

• 9 dolda funktioner i Google Maps du bör kolla in

• Så här visar du din Google Maps sökhistorik

• Hur man använder flera stopp i Google Maps

• Hur man bäddar in Google Forms på din webbplats

• Hur fungerar YouTube-algoritmen?

• Vad är lokala guider för Google Maps?

• Kan du radera alla e-postmeddelanden från Gmail på en gång?

• Hur man släpper en nål i Google Maps på dator och mobil

• Google Maps platshistorik: 5 användbara saker du kan göra med den

• Hur man laddar ner kartor på Google Maps för offlinevisning

• Saknas Googles sökfältswidget? Hur man återställer det på Android

• Hur man använder Google Sheets rullgardinslistor

• Användarforskningsmetoder i Google Analytics för att öka webbplatstrafiken

• Hur man kommer till Inbox Zero i Gmail

• Vad är ett Google "Ovanlig trafik"-fel och hur man åtgärdar det

• Lägg till och lös kommentarer i Google Dokument

• 3 sätt att skapa gränser i Google Dokument

• Hur man gör ett visitkort i Google Drive

• Vad är förbättrat skydd i Google Chrome och hur man aktiverar det