Добавете Упътвания за шофиране в Google Карти към Вашия уебсайт

Въпреки че има толкова много приложения и услуги за картографиране, които да ви осигурят от точка А до точка Б, окончателният крал на картите е Google Карти. Използвам го на моя компютър, таблет и 90% от времето на моя смартфон. Той разполага с най-добрите данни, най-много възможности за навигация и маршрутизация и интересни функции като Street View и информация за ходене, колоездене и масов транспорт.

Но какво, ако трябва да използвате карта или указания извън уебсайта на Google? Да предположим, че имате собствен уебсайт за сватба или личен блог и гостите могат да посетят сайта ви, да въвеждат адреса, от който ще идват, и автоматично да получават упътвания до местоположението на събитието!

Е, има няколко начина, по които можете да постигнете това. Най-лесният начин е просто да вградите картата в уеб страницата си, като използвате вградения код, генериран от Google Карти. Вторият начин е малко по-технически, но по-адаптивен и динамичен. По-долу ще спомена и двата метода.

Вградете Google Map

Ако искате само да показвате упътвания от едно място на друго, най-лесно е да вградите каквато и карта да виждате, като използвате кода за вграждане. Първо, настройте каквито и да са указанията в Google Карти и след това кликнете върху иконата на зъбно колело в долния десен ъгъл на страницата.

Кликнете върху Споделяне или вграждане на карта и след това кликнете върху Вграждане на карта раздел. Тук можете да изберете размер за картата си и след това да копирате кода на iframe и да го пуснете върху всяка желана от вас уеб страница.

Единственият недостатък на този метод е, че потребителят вижда само статична карта. Във втория метод по-долу можете да създадете форма, чрез която потребителят да може да въвежда всеки начален адрес и той ще генерира карта от този адрес до адреса на местоназначение по ваш избор.

Създайте формуляр на Google Карти

За да илюстрирате какво имам предвид с втория метод, продължете и въведете адрес в САЩ в полето по-долу, за да получите упътвания от местоположението си до къщата ми:

Готино, нали? Можете лесно да създадете тази малка форма на всеки уебсайт, блог или навсякъде, където можете да поставите някой HTML код! Това е чудесно и за уебсайтове за малки фирми, тъй като можете да ги изхвърлите на страницата си за контакти и хората могат бързо да получават упътвания, вместо да се налага да копират адреса ви, да отварят нов прозорец и след това да въвеждат началния си адрес..

Как да създадем тази модифицирана кутия за посоки? Първо, трябва да получим правилния синтаксис за URL адреса, който Google използва за упътвания. За щастие, можем да го разберем, като намерим упътвания между две места и след това просто да копираме URL адреса от адресната лента. Можете също да кликнете върху малката икона на зъбно колело в долния десен ъгъл на страницата и да изберете Споделяне или вграждане на карта.

Разделът Връзка за споделяне ще съдържа URL адреса, който е същият URL адрес в адресната лента на браузъра ви. Отидох напред и поставих целия URL адрес по-долу, за да ви покажа как изглежда.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 + Deerfield + Rd, + Allen, + TX + 75013, + САЩ / @ 33.1125686, -96.7557749,13z / data =! 3m1! 4b1! 4m13! 4m12! 1m5! 1m1! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2m2! 1d-96.762484! 2d33.08947! 1m5! 1m1! 1s0x864c16d3018a7f4f:! 0xab2052b5786cd29f 2 m2 1г-96.666151 2d33.133892

Олеле! Това е доста дълго! Има много неща там, повечето от които нямат никакъв смисъл! Параметрите на URL адрес на Google Карти са били много прости и лесни, но новата структура на URL адресите е доста сложна. За щастие, все още можете да използвате старите параметри и Google ще ги конвертира в новата версия автоматично. За да видите какво имам предвид, разгледайте връзката по-долу.

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

Давай напред и дай му удар. Поставете адрес в кавички за началния и крайния адрес и поставете URL адреса в браузъра си! Замених да започнем с родния си град Ню Орлиънс и да завърша с Хюстън, Тексас, така че това е моят URL адрес на Google Карти:

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

Работи! Както можете да видите, Google Карти превръща връзките в нещо много по-сложно, след като картата се зареди напълно. Добре, така че сега, когато имаме нормален URL адрес, който можем да преминем в Google Карти, трябва да създадем опростен формуляр с две полета, един за началния адрес и един за адреса на местоназначението.

Ако искате хората просто да въвеждат адреса си и да получават упътвания до мястото си, ще искаме второто поле да бъде скрито и вече е зададено на адреса на местоназначението..

Въведете началния си адрес:

Проверете горния код. Първият ред започва от формата и казва, че когато кликнете върху бутона за изпращане, данните трябва да се изпратят до maps.google.com/maps. Най- целеви = празен означава, че искаме резултатът да се отвори в нов прозорец. След това имаме текстово поле за началния адрес, което е празно.

Второто текстово поле е скрито и стойността е целевият адрес, който желаем. И накрая, има бутон за подаване със заглавие „Получаване на упътвания“. Сега, когато някой въведе адреса си, те ще получат това:

Можете да персонализирате упътванията и да направите още по-голяма карта с няколко допълнителни параметри. Например, да кажем, че не искате изгледът по подразбиране да е карта, а да го искате спътник и покажи Трафик.

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

Обърнете внимание на слой = т и Т = Н полета в URL адреса. layer = t е за трафик слоя и t = h означава хибридна карта! T също може да се настрои на m за нормална карта, к за сателит и р за терен. Z е нивото на мащабиране и можете да го промените от 1 на 20. В горния URL адрес е зададен на 7. Просто прикрепете тези към крайния си URL адрес и вече имате на сайта си много персонализиран формуляр за качване на Google Карти.!

Имате някакви проблеми с това, публикувайте коментар и аз ще се опитам да помогна! Наслади се!