Lägg till Google Maps Körbeskrivning till din webbplats
Även om det finns så många kartprogram och tjänster där ute för att få dig från punkt A till punkt B, är den definitiva kungen på kartor Google Maps. Jag använder den på min dator, tablett och 90% av tiden på min smartphone. Den har de bästa data, de mest navigations- och routingsalternativen och de coola funktionerna som Street View och promenader, cykling och masstransitinformation.
Men vad händer om du behöver använda en karta eller vägbeskrivning utanför Googles webbplats? Antag att du har din egen bröllopswebbplats eller en personlig blogg och gästerna kan besöka din webbplats, skriva in adressen de kommer ifrån och automatiskt få vägbeskrivning till evenemangets plats!
Tja, det finns ett par sätt du kan gå om att åstadkomma detta. Det enklaste sättet är att enkelt bädda in kartan till din webbsida med hjälp av den inbyggda kod som genereras av Google Maps. Det andra sättet är lite mer teknisk, men mer anpassningsbart och dynamiskt. Jag ska nämna båda metoderna nedan.
Bädda in Google Map
Om du bara vill visa riktningar från en plats till en annan är det enklaste att göra med att bädda in vilken karta som helst som du tittar på med inbäddningskoden. Först, fortsätt och konfigurera vilka riktningar 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 kartor och klicka sedan på Bädda in karta flik. 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 en blankett där användaren kan skriva in vilken startadress som helst och det kommer att generera en karta från den adressen till en destinationsadress 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ägbeskrivning från din plats till mitt hus:
Häftig va? Du kan enkelt skapa den här lilla formen på vilken webbplats, blogg eller var som helst du kan lägga till i en viss HTML-kod! Det här är också bra för småföretagens webbplatser eftersom du kan kasta upp den på din kontaktsida och folk kan få anvisningar snabbt, i stället för att behöva kopiera din adress, öppna ett nytt fönster och ange startadressen.
Så hur går det att skapa den här modifierade rutan för vägbeskrivning? Jo först måste vi få rätt syntax för den webbadress som Google använder för vägbeskrivning. Lyckligtvis kan vi räkna ut det genom att få anvisningar mellan två platser och sedan bara kopiera URL-adressen från adressfältet. Du kan också klicka på den lilla växelsymbolen längst ner till höger på sidan och välj Dela eller bädda in kartor.
Fliken Dela länk innehåller URL-adressen, som är samma URL i adressfältet i webbläsaren. Jag har gått fram och klistat in hela webbadressen nedan för att visa dig hur det 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! 2d33.133892 0xab2052b5786cd29f 2m2 1D-96,666151: 1s0x864c16d3018a7f4f!!
Usch! Det är ganska länge! Det finns många saker där, de flesta av dem har ingen mening! Webbadresserna för Google Maps brukade vara mycket enkla och enkla, men den nya webbadressstrukturen är ganska komplicerad. Tack och lov kan du fortfarande använda de gamla parametrarna och Google kommer automatiskt att konvertera dem till den nya versionen. För att se vad jag menar, kolla länken nedan.
http://maps.google.com/maps?saddr=start&daddr=end
Fortsätt och ge det ett skott. Lägg in en adress i citat för start- och slutadress och klistra in webbadressen i din webbläsare! Jag ersatte starta med min hemstad New Orleans och slutar med Houston, TX, så det här är vad min Google Maps-riktningsadress ser ut som:
http://maps.google.com/maps?saddr="new orleans, la "& daddr =" houston, tx "
Det fungerar! Som du kan se, konverterar Google Maps länkarna till något mer komplicerat när kartan laddas fullständigt. Okej, så nu när vi har en skarp URL som vi kan skicka till Google Maps behöver vi skapa en enkel blankett med två fält, en för startadressen och en för destinationsadressen.
Om du vill att folk bara ska skriva in deras adress och få vägbeskrivning till din plats, så vill vi att det andra fältet ska döljas och redan vara inställt på destinationsadressen.
Ange din startadress:
Kolla in koden ovan. Den första raden börjar utgå från formuläret och säger att när inlämningsknappen klickas ska data skickas till maps.google.com/maps. De target = blank betyder att vi vill att resultatet ska öppnas i ett nytt fönster. Då 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 inbjudningsknapp med titeln "Get Directions". Nu när någon skriver i sin adress får de det här:
Du kan anpassa anvisningarna och karta ännu mer med några extra parametrar. Låt oss till exempel säga att du inte vill att standardvisningen ska vara kartor, men istället vill den 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
Lägg märke till skikt = t och t = h fält i webbadressen. skikt = t är för trafikskiktet 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 ovanstående URL är den inställd på 7. Bara tackla dem till din slutliga webbadress och du har nu en mycket anpassad Google Maps Get Directions-formulär på din webbplats!
Har några problem med detta, skriv en kommentar och jag försöker hjälpa! Njut av!
