Føj Google Maps kørselsvejledning til dit websted

Selvom der er så mange kortapps og -tjenester derude for at få dig fra punkt A til punkt B, er den endelige konge af kort Google Maps . Jeg bruger det på min computer, tablet og 90% af tiden på min smartphone. Den har de bedste data, de fleste navigations- og rutemuligheder og fede funktioner som Street View og info om gang, cykling og offentlig transport.

Men hvad nu hvis du skal bruge et kort eller en rutevejledning uden for Googles hjemmeside? Antag(Suppose) , at du har dit eget bryllupswebsted eller en personlig blog, og gæsterne kan besøge dit websted, indtaste den adresse, de kommer fra, og automatisk få rutevejledning til begivenhedens placering!

Nå, der er et par måder, du kan gå om at opnå dette på. Den nemmeste måde er blot at indlejre kortet på din webside ved hjælp af indlejringskoden genereret af Google Maps . Den anden måde er en smule mere teknisk, men mere tilpasselig og dynamisk. Jeg vil nævne begge metoder nedenfor.

Integrer Google Map

Hvis du kun ønsker at vise rutevejledninger fra et sted til et andet, er den nemmeste ting at gøre at integrere det kort, du ser, ved hjælp af indlejringskoden. Først(First) skal du gå videre og konfigurere de rutevejledninger, du ønsker i Google Maps , og derefter klikke på tandhjulsikonet nederst til højre på siden.

del eller indlejr kort

Klik på Del eller indlejr kort( Share or embed map) , og klik derefter på fanen Integrer kort(Embed map) . Her kan du vælge en størrelse til dit kort og derefter kopiere iframe-koden og slippe den på en hvilken som helst webside, du kan lide.

indlejre kort

Den eneste ulempe ved denne metode er, at brugeren bare ser et statisk kort. I den anden metode nedenfor kan du oprette en formular, hvorved brugeren kan indtaste en hvilken som helst startadresse, og den vil generere et kort fra den adresse til en destinationsadresse efter eget valg.

Opret Google Maps-formular

For at illustrere, hvad jeg mener med den anden metode, skal du gå videre og skrive en amerikansk adresse i boksen nedenfor for at få rutevejledning fra din placering til mit hus:

Fedt(Cool) hvad? Du kan nemt oprette denne lille formular på en hvilken som helst hjemmeside, blog eller hvor som helst du kan indsætte HTML -kode! Dette er også fantastisk til websteder for små virksomheder, da du kan smide det op på din kontaktside, og folk kan få rutevejledning hurtigt, i stedet for at skulle kopiere din adresse, åbne et nyt vindue og derefter indtaste deres startadresse.

Så hvordan går vi om at oprette denne ændrede boks med vejledninger? Nå(Well) , først skal vi have den korrekte syntaks for den URL , som Google bruger til rutevejledning. Heldigvis kan vi finde ud af det ved at få rutevejledning mellem to steder og så bare kopiere URL'en(URL) fra adresselinjen. Du kan også klikke på det lille tandhjulsikon helt nederst til højre på siden og vælge Del eller integrere kort(Share or embed map) .

del eller indlejr kort

Fanen Del(Share) link vil indeholde URL'en(URL) , som er den samme URL i din browsers adresselinje. Jeg er gået videre og indsat hele URL'en(URL) nedenfor bare for at vise dig, hvordan den ser ud.

del linkkort

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! Det er ret langt! Der er en masse ting derinde, hvoraf de fleste ikke giver nogen mening! Google Maps URL- parametre plejede at være meget ligetil og nemme, men den nye URL- struktur er ret kompliceret. Heldigvis kan du stadig bruge de gamle parametre, og Google vil automatisk konvertere dem til den nye version. For at se hvad jeg mener, tjek linket nedenfor.

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

Gå videre og giv det et skud. Indsæt en adresse i anførselstegn for start- og slutadressen og indsæt URL'en(URL) i din browser! Jeg erstattede start med min hjemby New Orleans og slutter med Houston , TX, så dette er, hvordan min Google Maps rutevejledning URL ser ud:

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

Det virker! Som du kan se, konverterer Google Maps dog linkene til noget langt mere kompliceret, når kortet er fuldt indlæst. Ok, så nu, hvor vi har en fornuftig URL , som vi kan overføre til Google Maps , skal vi oprette en simpel formular med to felter, et for startadressen og et for destinationsadressen.

Hvis du ønsker, at folk bare skal indtaste deres adresse og få en rutevejledning til dit sted, vil vi gerne have, at det andet felt er skjult og allerede indstillet til 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>

Tjek koden ovenfor. Den første linje starter formularen og siger, at når du klikker på indsend-knappen, skal dataene sendes til maps.google.com/maps. Mål target=blank betyder, at vi ønsker, at resultatet skal åbne i et nyt vindue. Så har vi en tekstboks til startadressen, som er tom.

Det andet tekstfelt er skjult, og værdien er den destinationsadresse, vi ønsker. Endelig er der en indsend-knap med titlen "Få rutevejledning". Når nogen nu indtaster deres adresse, får de dette:

kort retninger

Du kan tilpasse rutevejledningen og kortlægge endnu mere med et par ekstra parametre. Lad os f.eks. sige, at du ikke ønsker, at standardvisningen skal være kort, men i stedet ønsker, at den skal være Satellit(Satellite) og vise 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æg mærke til felterne layer=t og t=hURL'en(URL) . layer=t er for trafiklaget og t=h betyder hybridkort! t kan også indstilles til m for normalt kort, k for satellit og  p for terræn. z er zoomniveauet, og du kan ændre det fra 1 til 20. I ovenstående URL er det indstillet til 7. Bare(Just) sæt dem på din endelige URL , og du har nu en meget tilpasset Google Maps Få rutevejledning(Google Maps Get Directions) på dit websted !

Har du problemer med dette, så skriv en kommentar, så skal jeg prøve at hjælpe! God fornøjelse!



Anton Jørgensen

About the author

Jeg arbejder som konsulent for Microsoft. Jeg har specialiseret mig i udvikling af mobile apps til Apple og Android enheder, og er desuden involveret i udvikling af Windows 7 apps. Min erfaring med smartphones og Windows 7 gør mig til en ideel kandidat til denne stilling.


Related posts