Även om det finns så många kartläggning appar och tjänster ute för att få dig från punkt A till punkt B, definitivt kung av kartor Google Maps. Jag använder det på min dator, surfplatta och 90% av tiden på min smartphone. Det har fått de bästa, de mest navigation och routing-möjligheter och coola funktioner som Street View och promenader, cykling och kollektivtrafik info.
Men vad händer om du behöver använda en karta eller vägbeskrivning utanför Googles hemsida? Anta att du har ditt eget bröllop webbplats eller en personlig blogg, och gästerna kan besöka din sajt, skriv in den adress som de kommer att komma från och automatiskt få en vägbeskrivning till platsen för händelsen!
Tja, det finns ett par olika sätt du kan gå om att göra det här. Det enklaste sättet är att helt enkelt bädda in kartan på din webbsida med hjälp av den inbäddade koden som genereras av Google Maps. Det andra sättet är lite mer teknisk, men mer anpassningsbara och dynamiska. Jag ska nämna båda metoderna nedan.
Bädda In Google Karta
Om du bara vill visa vägbeskrivning från en plats till en annan, den enklaste sak att göra är att bädda in vad kort du visar med hjälp av den inbäddade koden. För det första, gå vidare och inställning oavsett riktningar och du vill ha i Google Maps och sedan klicka på kugghjulet längst ner till höger på sidan.
Klicka på Dela eller bädda in kartan och sedan klicka på Bädda in kartan på fliken. Här kan du välja en storlek för din karta och sedan kopiera iframe-koden och släppa den på en webbsida som du vill.
Den enda nackdelen med denna metod är att användaren bara ser en statisk karta. I den andra metoden nedan, du kan skapa ett formulär där användaren kan skriva in något som börjar ta itu med och det kommer att generera en karta från den adressen till en destination adressen för din välja.
Skapa Google Maps Form
För att illustrera vad jag menar med den andra metoden, gå vidare och skriv en US adress i rutan nedan för att få en vägbeskrivning från din plats till mitt hus:
Ange din start adress:
Coolt va? Du kan enkelt skapa detta lilla formulär på en webbplats, blogg eller var som helst kan du lägga i lite HTML-koden! Det är också bra för small business webbplatser som du kan kasta upp det på din kontakt sida och att människor kan få en vägbeskrivning snabbt, i stället för att kopiera din adress, öppna ett nytt fönster, och sedan skriva i sin start adress.
Så hur ska vi gå tillväga för att skapa den modifierade få en vägbeskrivning box? Jo för det första, vi kommer behöva för att få korrekt syntax för den URL som Google använder för vägbeskrivning. Lyckligtvis kan vi räkna ut genom att få vägbeskrivningar mellan två ställen och sedan bara kopiera URL-adressen från adressfältet. Du kan också klicka på det lilla kugghjulet längst ned till höger på sidan och välj Dela eller bädda in kartan.
Dela länken på fliken kommer att innehålla den URL: en, vilket är samma URL-adressen i din webbläsares adressfält. Jag har gått vidare och klistrat in hela WEBBADRESSEN nedan bara för att visa dig hur det ser ut.
https://www.google.com/maps/dir/3600+Thorp+Fjädrar+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen+TX+75013,+USA/@33.1125686,-96.7557749,13 z/ 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
Usch! Det är ganska lång! Det är en massa saker i det, av vilka de flesta inte göra något meningsfullt! Google Maps URL-parametrar som används för att vara mycket enkel och lätt, men den nya URL-struktur är ganska komplicerat. Tack och lov, kan du fortfarande använda den gamla parametrar 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
Gå vidare och ge det en chans. Sätta på en adress i citat för att inleda och avsluta adress och klistra in URL-adressen i din webbläsare! Jag ersatte börja med min hemstad New Orleans och avsluta med Houston, TX, så detta är vad min Google Maps vägbeskrivning URL ser ut som:
http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
Det fungerar! Som ni kan se, men Google Maps omvandlar länkar till något betydligt mer komplicerat när kartan fullt belastning. Ok, så nu har vi en vettig WEBBADRESS som vi kan gå över till Google Maps, vi behöver skapa en enkel form med två fält, ett för start-adress och destinations-adress.
Om du vill att folk ska bara skriver in sin adress och få en vägbeskrivning till din plats, då vi vill att det andra fältet för att vara dolda och redan inställd på att måladressen.
<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Ange din start adress:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” värde=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”hämta vägbeskrivning” />
</form>
Kolla in den koden ovan. Den första raden som börjar bilda och säger att när in-knappen är tryckt, data ska skickas till maps.google.com/maps. Den target=blank betyder det att vi vill ha resultat för att öppna i ett nytt fönster. Sedan har vi en textruta för start adress, som är tom.
Den andra textrutan är dolda och värdet är den destinationsadress som vi önskar. Slutligen, det finns en skicka-knapp med titeln “Hämta Vägbeskrivning”. Nu när någon skriver i sin adress, och de kommer att få den här:
Du kan anpassa vägbeskrivning och karta ännu mer med ett par extra parametrar. Till exempel, låt oss säga att du inte vill ha som standard att vara kartor, utan istället vill att det ska vara Satellit – och visa Trafik.
http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
Märker lager=t och t=h – fält i en URL. lager=t för den trafik lager och t=h innebär hybrid karta! t kan också vara inställd på m för vanlig karta, k för satellit-och p för terräng. z zoom nivå och du kan ändra det från 1 till 20. I ovanstående URL, det är satt till 7. Bara tack de till ditt slutliga URL och du har nu fått en skräddarsydd Google Maps Vägbeskrivning formulär på din webbplats!
Har några problem med detta, skicka en kommentar och jag ska försöka att hjälpa till! Njut!