Додайте напрямки руху на Картах Google на свій веб-сайт

Незважаючи на те, що існує стільки додатків та служб відображення, що дозволять вам дістатися від точки А до точки В, остаточний король карт - це Карти Google. Я використовую його на моєму комп'ютері, планшеті і 90% часу на своєму смартфоні. Він має найкращі дані, більшість варіантів навігації та маршрутизації, а також цікаві функції, такі як перегляд вулиць і прогулянки, велосипед і інформація про масовий транспорт.

Але що, якщо вам потрібно використовувати карту або напрямки поза веб-сайтом 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! 2m! 1d-96.762484! 2d33.08947! 1m5! 1m1! 2s! 1d-96.666151! 2d33.133892 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f!

Yikes! Це досить довго! Там дуже багато речі, більшість з яких не має ніякого сенсу! Параметри 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. The target = blank означає, що ми хочемо, щоб результат відкривався у новому вікні. Потім ми маємо текстове поле для початкової адреси, яке є порожнім.

Друге текстове поле приховано, а значення - адреса призначення, який ми бажаємо. Нарешті, є кнопка "Надіслати" з назвою "Get Directions". Тепер, коли хтось введе свою адресу, вони отримають таке:

Ви можете налаштувати напрямки і ще краще зіставити кілька додаткових параметрів. Наприклад, припустимо, що ви не хочете, щоб перегляд за замовчуванням був картами, а бажаєте, щоб він був Супутник і показати Трафік.

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

Зверніть увагу на layer = t і t = h поля в URL-адресі. layer = t для шару трафіку і t = h означає гібридну карту! t також можна встановити на m для нормальної карти, k для супутникового та стор для місцевості. z - це рівень масштабування, і ви можете змінити його від 1 до 20. У вищевказаній URL-адресі встановлено значення 7. Просто прив'яжіть їх до остаточної URL-адреси, і зараз на вашому сайті з'явилася форма на Google Maps!

Є які-небудь проблеми з цим, опублікувати коментар і я постараюся допомогти! Насолоджуйтесь!