Pridajte príručky Google Maps Driving na vaše webové stránky

Aj keď existuje toľko mapovacích aplikácií a služieb, aby ste sa dostali z bodu A do bodu B, definitívnym kráľom máp sú Mapy Google. Používam ho na svojom počítači, tablete a 90% času na svojom smartfóne. Má najlepšie údaje, najviac navigačné a smerovacie možnosti a skvelé funkcie, ako sú Street View a informácie o chôdzi, bicykli a masovom prenose.

Ale čo, ak potrebujete použiť mapu alebo pokyny mimo webových stránok spoločnosti Google? Predpokladajme, že máte vlastnú svadobnú webovú stránku alebo osobný blog a hostia môžu navštíviť vašu stránku, zadajte adresu, z ktorej budú pochádzať a automaticky získajú trasu k miestu udalosti!

Existuje niekoľko spôsobov, ako môžete dosiahnuť to. Najjednoduchším spôsobom je jednoducho vložiť mapu na svoju webovú stránku pomocou kódu vloženého v Mapách Google. Druhý spôsob je o niečo technickejší, ale viac prispôsobiteľný a dynamický. Spomeniem obe metódy nižšie.

Vložiť mapu Google

Ak chcete zobrazovať iba trasy z jedného miesta na druhé, najjednoduchšie je vložiť akúkoľvek mapu, ktorú prezeráte pomocou kódu vloženia. Najskôr postupujte podľa pokynov v aplikácii Mapy Google a kliknite na ikonu ozubeného kolieska v pravom dolnom rohu stránky.

Kliknite na Zdieľajte alebo vložte mapu a potom kliknite na tlačidlo Vložiť mapu tab. Tu môžete vybrať veľkosť pre svoju mapu a potom skopírovať kód iframe a pustiť ho na ľubovoľnú webovú stránku, ktorá sa vám páči.

Jedinou nevýhodou tejto metódy je to, že používateľ len vidí statickú mapu. V druhej metóde nižšie môžete vytvoriť formulár, pomocou ktorého môže používateľ napísať akúkoľvek počiatočnú adresu a generuje mapu z tejto adresy na cieľovú adresu podľa vášho výberu.

Vytvorte formulár služby Mapy Google

Ak chcete ilustrovať to, čo myslím druhou metódou, pokračujte a do poľa nižšie zadajte adresu USA, aby ste získali trasu z vašej polohy do môjho domu:

Cool, čo? Môžete ľahko vytvoriť tento malý formulár na ľubovoľnej webovej stránke, blogu alebo kdekoľvek, kde môžete vložiť nejaký HTML kód! To je tiež skvelé pre webové stránky malých firiem, ako ich môžete vyzdvihnúť na vašej kontaktnej stránke a ľudia môžu získať rýchle pokyny, skôr ako kopírovať vašu adresu, otvoriť nové okno a potom zadajte svoju začiatočnú adresu.

Tak ako sa dá vytvoriť toto upravené pole pre získanie pokynov? Najprv musíme získať správnu syntax pre adresu URL, ktorú spoločnosť Google používa pre trasy. Našťastie to môžeme zistiť získaním trasy medzi dvomi miestami a následným kopírovaním adresy URL z panela s adresou. Môžete tiež kliknúť na malú ikonu ozubeného kolieska v pravom dolnom rohu stránky a vybrať Zdieľajte alebo vložte mapu.

Karta odkazu Zdieľať bude obsahovať adresu URL, ktorá je rovnaká adresa URL v paneli s adresou prehliadača. Pokračovala som a vložila som celú webovú adresu nižšie, aby som vám ukázala, ako to vyzerá.

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! 1s0x864c16d3018a7f4f !! 0xab2052b5786cd29f 2m2 1d-96,666151 2d33.133892

Och! To je dosť dlho! Je tam veľa vecí, z ktorých väčšina nemá zmysel! Parametre webovej adresy Máp Google boli veľmi jednoduché a jednoduché, ale nová štruktúra adries URL je dosť komplikovaná. Našťastie stále môžete používať staré parametre a spoločnosť Google ich automaticky prevedie na novú verziu. Ak chcete vidieť, čo myslím, pozrite si nižšie uvedený odkaz.

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

Dajte sa na to a dajte mu výstrel. Vložte adresu do úvodzoviek pre úvodnú a koncovú adresu a vložte adresu URL do prehliadača! Nahradil som začiatok s mojim domovským mestom New Orleans a skončil s Houstonom, TX, takže to je to, čo vyzerá na adrese URL mojej mapy Google Maps:

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

Funguje to! Ako však vidíte, aplikácia Mapy Google prekonvertuje odkazy na niečo oveľa komplikovanejšie po načítaní mapy. Ok, takže teraz, keď máme správnu adresu URL, ktorú môžeme preniesť do Máp Google, musíme vytvoriť jednoduchý formulár s dvoma políčkami, jeden pre počiatočnú adresu a jednu pre cieľovú adresu.

Ak chcete, aby ľudia jednoducho zadali svoju adresu a dostali trasu do vášho miesta, potom budeme chcieť, aby druhé pole bolo skryté a už bolo nastavené na cieľovú adresu.

Zadajte svoju počiatočnú adresu:

Pozrite sa na vyššie uvedený kód. Prvý riadok začína formulár a hovorí, že po kliknutí na tlačidlo odoslania by sa mali údaje odoslať na adresu maps.google.com/maps. target = blank znamená, že chceme otvoriť výsledok v novom okne. Potom máme textové pole pre začiatočnú adresu, ktorá je prázdna.

Druhé textové pole je skryté a hodnota je cieľová adresa, ktorú požadujeme. Nakoniec sa nachádza tlačidlo na odoslanie s názvom "Získať trasu". Teraz, keď niekto napíše svoju adresu, dostane toto:

Môžete prispôsobiť trasy a mapovať ešte viac pomocou niekoľkých ďalších parametrov. Povedzme napríklad, že nechcete, aby predvolené zobrazenie boli mapy, ale chcete, aby to bolo satelit a ukázať prevádzka.

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

Všimnite si vrstva = t a t = h polia v adrese URL. vrstva = t je pre dopravnú vrstvu a t = h znamená hybridnú mapu! T možno nastaviť aj na m pre normálnu mapu, k pre satelitné a p pre terén. z je úroveň zväčšenia a môžete ho zmeniť z 1 na 20. Vo vyššie uvedenej adrese URL je nastavená na 7. Stačí sa prilepiť na vašu cieľovú webovú adresu a teraz máte na svojom webe veľmi prispôsobený formulár Google Maps Get Directions!

Máte nejaké problémy s tým, pošlite komentár a ja sa pokúsim pomôcť! Užite si to!