Vaikka siellä on niin monia karttasovelluksia ja -palveluita, joiden avulla pääset pisteestä A pisteeseen B, karttojen lopullinen kuningas on Google Maps . Käytän sitä tietokoneellani, tabletillani ja 90 % ajasta älypuhelimellani. Siinä on parhaat tiedot, eniten navigointi- ja reititysvaihtoehtoja ja hienoja ominaisuuksia, kuten Street View ja kävely-, pyöräily- ja joukkoliikennetiedot.

Mutta entä jos sinun on käytettävä karttaa tai reittiohjeita Googlen verkkosivuston ulkopuolella? Oletetaan^(Suppose) , että sinulla on oma hääsivustosi tai henkilökohtainen blogi ja vieraat voivat vierailla sivustollasi, kirjoittaa osoitteen, josta he tulevat, ja saada automaattisesti reittiohjeet tapahtumapaikkaan!

No, on pari tapaa, joilla voit saavuttaa tämän. Helpoin tapa on upottaa kartta verkkosivullesi käyttämällä Google Mapsin^{(Google Maps)} luomaa upotuskoodia . Toinen tapa on hieman teknisempi, mutta muokattavampi ja dynaamisempi. Mainitsen molemmat menetelmät alla.

Upota Google Map

Jos haluat näyttää reittiohjeet vain paikasta toiseen, helpoin tapa on upottaa katsomasi kartta upotuskoodin avulla. Siirry ensin^(First) ja määritä haluamasi reittiohjeet Google Mapsissa^{(Google Maps)} ja napsauta sitten sivun oikeassa alakulmassa olevaa rataskuvaketta.

Napsauta Jaa tai upota kartta^{( Share or embed map)} ja napsauta sitten Upota kartta^{(Embed map)} -välilehteä. Täällä voit valita kartallesi koon ja kopioida iframe-koodin ja pudottaa sen mille tahansa haluamallesi verkkosivulle.

Tämän menetelmän ainoa haittapuoli on, että käyttäjä näkee vain staattisen kartan. Alla olevassa toisessa menetelmässä voit luoda lomakkeen, johon käyttäjä voi kirjoittaa minkä tahansa aloitusosoitteen ja se luo kartan kyseisestä osoitteesta valitsemaasi kohdeosoitteeseen.

Luo Google Maps -lomake

Havainnollistaaksesi, mitä tarkoitan toisella menetelmällä, mene eteenpäin ja kirjoita Yhdysvaltain osoite alla olevaan ruutuun saadaksesi reittiohjeet sijainnistasi talooni:

Siistiä^(Cool) vai? Voit helposti luoda tämän pienen lomakkeen mille tahansa verkkosivustolle, blogiin tai missä tahansa, johon voit lisätä HTML - koodia! Tämä sopii mainiosti myös pienyritysten web-sivustoille, koska voit lisätä sen yhteystietosivullesi ja ihmiset voivat saada reittiohjeet nopeasti sen sijaan, että heidän pitäisi kopioida osoitteesi, avata uusi ikkuna ja kirjoittaa aloitusosoitteensa.

Miten sitten luodaan tämä muokattu reittiohjelaatikko? Ensin^(Well) meidän on hankittava oikea syntaksi URL -osoitteelle , jota Google käyttää reittiohjeissa. Onneksi voimme selvittää sen hankkimalla reittiohjeet kahden paikan välillä ja kopioimalla sitten URL -osoitteen osoitepalkista. Voit myös napsauttaa pientä rataskuvaketta sivun oikeassa alakulmassa ja valita Jaa tai upota kartta^{(Share or embed map)} .

Jaa^(Share) linkki -välilehti sisältää URL - osoitteen , joka on sama URL -osoite selaimesi osoitepalkissa. Olen mennyt eteenpäin ja liittänyt koko URL -osoitteen alle näyttääkseni, miltä se näyttää.

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

Jep! Se on aika pitkä! Siellä on paljon tavaraa, joista suurimmassa osassa ei ole mitään järkeä! Google Mapsin URL^{(Google Maps URL)} -parametrit olivat ennen hyvin yksinkertaisia ​​ja helppoja, mutta uusi URL - rakenne on melko monimutkainen. Onneksi voit edelleen käyttää vanhoja parametreja ja Google muuntaa ne uudeksi versioksi automaattisesti. Katso alla oleva linkki nähdäksesi mitä tarkoitan.

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

Mene eteenpäin ja yritä. Kirjoita aloitus- ja loppuosoitteen osoite lainausmerkeissä ja liitä URL -osoite selaimeesi! Korvasin aloituksen kotikaupungillani New Orleansilla^{(New Orleans)} ja lopetin Houstoniin^(Houston) , TX, joten Google Mapsin^{(Google Maps)} reittiohjeiden URL -osoite näyttää tältä:

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

Se toimii! Kuten näette, Google Maps muuntaa linkit monimutkaisemmiksi, kun kartta latautuu kokonaan. Ok, nyt kun meillä on järkevä URL -osoite , jonka voimme välittää Google Mapsiin^{(Google Maps)} , meidän on luotava yksinkertainen lomake, jossa on kaksi kenttää, toinen aloitusosoitteelle ja toinen kohdeosoitteelle.

Jos haluat ihmisten vain kirjoittavan osoitteensa ja saavan reittiohjeet paikkaasi, haluamme, että toinen kenttä on piilotettu ja asetettu jo kohdeosoitteeksi.

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

Katso yllä oleva koodi. Ensimmäinen rivi alkaa lomakkeella ja sanoo, että kun lähetä-painiketta napsautetaan, tiedot tulee lähettää osoitteeseen maps.google.com/maps. Kohde target=blank tarkoittaa, että haluamme tuloksen avautuvan uuteen ikkunaan. Sitten meillä on tekstiruutu aloitusosoitteelle, joka on tyhjä.

Toinen tekstiruutu on piilotettu ja arvo on haluamamme kohdeosoite. Lopuksi on lähetyspainike, jonka otsikko on "Hae reittiohjeet". Nyt kun joku kirjoittaa osoitteensa, hän saa tämän:

Voit mukauttaa reittiohjeita ja kartoittaa vielä enemmän muutamilla lisäparametreilla. Oletetaan esimerkiksi, että et halua oletusnäkymän olevan karttoja, vaan haluat sen olevan satelliitti^(Satellite) ja näyttää Liikenne^(Traffic) .

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

Huomaa URL -osoitteen ^(URL)layer=t ja t=h -kentät . kerros=t on liikennekerrosta ja t=h tarkoittaa hybridikarttaa! t voidaan myös asettaa m :ksi normaalille kartalle, k satelliitille ja  p :lle maastolle. z on zoomaustaso, ja voit muuttaa sen arvosta 1 arvoon 20. Yllä olevassa URL -osoitteessa se on asetettu arvoon 7. Liimaa^(Just) ne lopulliseen URL -osoitteeseesi, niin sivustossasi on nyt pitkälle muokattu Google Maps -hakulomake^{(Google Maps Get Directions)} . !

Jos sinulla on ongelmia tämän kanssa, lähetä kommentti, niin yritän auttaa! Nauttia!

Add Google Maps Driving Directions to Your Website

Even though there are so many mapping аpps and services oυt there to get you from point A tо point B, the definitive king of maps is Google Maps. I usе it on my compυter, tablet and 90% of the time on my smartphone. It’ѕ got the best dаta, the most navigation and routing options and cool features like Streеt View and walking, biking and mаss 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 ei puhu tai anna ääniohjeita? 12 tapaa korjata

• 9 Google Mapsin piilotettua ominaisuutta, jotka kannattaa tarkistaa

• Kuinka tarkastella Google Maps -hakuhistoriaasi

• Kuinka käyttää useita pysähdyksiä Google Mapsissa

• Kuinka upottaa Google Forms sivustollesi

• Mikä on tehostettu suojaus Google Chromessa ja kuinka se otetaan käyttöön

• 7 parasta Gmail-lisäosaa

• Kuinka tehdä käyntikortti Google Drivessa

• Mikä on Local Guides for Google Maps?

• Kuinka viedä ja tuoda Chrome-kirjanmerkkejä

• Puuttuuko Google-hakupalkin widget? Kuinka palauttaa se Androidissa

• Mikä Google-sovellus on ja kuinka sitä käytetään

• Google-lomakkeen tekeminen: Täydellinen opas

• Yksityisten sähköpostien lähettäminen Gmailissa

• PIN-merkin pudottaminen Google Mapsiin pöytäkoneella ja mobiililaitteella

• YouTube-historian ja hakutoiminnan poistaminen

• Kuinka päästä Inbox Zeroan Gmailissa

• Google My Activity: Miksi sinun pitäisi välittää

• YouTube Premium -tilauksen peruuttaminen tai keskeyttäminen

• Mikä on Googlen "epätavallinen liikenne" -virhe ja kuinka korjata se