Добавьте Google Maps Схема проезда на ваш сайт

  1. Вставить Google Map
  2. Создать форму Google Maps

Несмотря на то, что существует так много картографических приложений и сервисов, которые доставят вас из точки А в точку Б, непревзойденным королем карт является Google Maps. Я использую его на своем компьютере, планшете и 90% времени на своем смартфоне. Он имеет лучшие данные, большинство вариантов навигации и маршрутизации, а также интересные функции, такие как просмотр улиц и пешеходных прогулок, информация о велосипедах и общественном транспорте.

Но что, если вам нужно использовать карту или маршруты за пределами сайта Google? Предположим, у вас есть собственный свадебный веб-сайт или личный блог, и гости могут посетить ваш сайт, ввести адрес, с которого они будут приходить, и автоматически получить направление к месту проведения мероприятия!

Ну, есть несколько способов сделать это. Самый простой способ - просто вставить карту на свою веб-страницу, используя код для вставки, созданный Google Maps. Второй способ более технический, но более настраиваемый и динамичный. Я упомяну оба метода ниже.

Вставить Google Map

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

Нажмите « Поделиться» или « Вставить карту », а затем перейдите на вкладку « Вставить карту ». Здесь вы можете выбрать размер для вашей карты, а затем скопировать код iframe и вставить его на любую понравившуюся веб-страницу.

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

Создать форму Google Maps

Чтобы проиллюстрировать, что я имею в виду под вторым методом, введите адрес США в поле ниже, чтобы узнать, как добраться до моего дома:

Круто, да? Вы можете легко создать эту маленькую форму на любом веб-сайте, в блоге или в любом другом месте, куда вы можете вставить HTML-код! Это также отлично подходит для веб-сайтов малого бизнеса, так как вы можете добавить его на страницу контактов, и люди могут быстро получить указания, а не копировать свой адрес, открывать новое окно и затем вводить свой начальный адрес.

Так как же нам создать этот измененный блок получения маршрутов? Ну, во-первых, нам нужно получить правильный синтаксис для URL, который Google использует для указаний. К счастью, мы можем это выяснить, получив направление между двумя местами, а затем просто скопировав URL из адресной строки. Вы также можете нажать на крошечный значок шестеренки в правом нижнем углу страницы и выбрать « Поделиться» или «Вставить карту» .

На вкладке «Поделиться ссылкой» будет указан URL-адрес, который совпадает с URL-адресом в адресной строке браузера. Я пошел вперед и вставил весь URL ниже, чтобы показать вам, как это выглядит.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 + Дирфилд + Rd, + Аллен, + TX + 75013, + США / @ 33.1125686, -96.7557749,13z / data =! 3m1! 4b1! 4m13! 4m12! 1m5! 1m1! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2m2! 1d-96.762484! 2d33.0m1! 1d33.0897 1s0x864c16d3018a7f4f:! 0xab2052b5786cd29f 2м2 1d-96,666151 2d33.133892

Хлоп! Это довольно долго! Там много вещей, большинство из которых не имеет никакого смысла! Параметры URL Карт Google были очень простыми и понятными, но новая структура URL довольно сложна. К счастью, вы все еще можете использовать старые параметры, и Google автоматически преобразует их в новую версию. Чтобы увидеть, что я имею в виду, проверьте ссылку ниже.

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

Давай и попробуй. Введите адрес в кавычках для начального и конечного адреса и вставьте URL в свой браузер! Я заменил начало на мой родной город Новый Орлеан и конец на Хьюстон, штат Техас, так вот, как выглядит мой URL-адрес Google Maps:

http://maps.google.com/maps?saddr= договорnew orleans, la ”& daddr =” Хьюстон, Техас ”

Оно работает! Однако, как вы можете видеть, Карты Google преобразуют ссылки в нечто гораздо более сложное после полной загрузки карты. Итак, теперь, когда у нас есть нормальный URL, который мы можем передать в Google Maps, нам нужно создать простую форму с двумя полями: одно для начального адреса и одно для адреса назначения.

Если вы хотите, чтобы люди просто вводили свой адрес и прокладывали маршрут до вашего места, тогда мы хотим, чтобы второе поле было скрыто и уже было установлено по адресу назначения.

<form action = ”http://maps.google.com/maps” method = ”get” target = ”_ blank”>
Введите свой начальный адрес:
<input type = ”text” name = ”saddr” />
<input type = ”hidden” name = ”daddr” value = ”854 Deerfield Rd, Allen, TX” />
<input type = ”submit” value = ”get directions” />
</ форма>

Проверьте код выше. Первая строка начинается с формы и говорит, что при нажатии кнопки отправки данные должны быть отправлены на maps.google.com/maps. 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 для спутника и p для местности. z - это уровень масштабирования, и вы можете изменить его с 1 на 20. В приведенном выше URL-адресе он равен 7. Просто прикрепите их к своему окончательному URL-адресу, и теперь у вас есть сильно настроенная форма Google Maps Get Directions на вашем сайте. !

Возникли проблемы с этим, оставьте комментарий, и я постараюсь помочь! Наслаждайтесь!

Похожие

Easyflirt - Чат знакомств - Сайт знакомств с чатом и веб-камерой
С Easyflirt Chat вы можете общаться в чате с другими пользователями! Знакомства чат позволит вам общаться онлайн. Знакомства чат - лучший способ познакомиться с другими пользователями, зарегистрированными на сайте. Живое общение позволяет вести реальное обсуждение. Вы можете просматривать пользователей из своего списка контактов с помощью веб-камеры. Easyflirt - один из первых сайтов знакомств, который использовал систему чата с веб-камерой! Easyflirt предлагает подходящую
Как скачать Google Книги в виде файла PDF [Mac]
<firstimage = ”// static.makeuseof.com/wp-content/uploads/2010/02/gbd.png” /> Google предлагает самые крутые сервисы. Каждый раз, когда я смотрю на разнообразие вещей, которые он может сделать, у меня отвисает челюсть. Если вы не согласны со мной, просто подумайте. Эта маленькая компания начала удивлять нас, предоставив самый большой почтовый ящик в истории.
19+ Google Web Fonts - Скачать бесплатно в формате TTF, OTF
Google - это поисковая система, которая постоянно совершенствует свой сервис предоставления информации людям по всему миру. Благодаря влиянию технологий, есть веб-шрифты Google, разработанные для веб-сайтов, чтобы сделать их более персонализированными и потрясающими. По мере расширения, более двадцати одного Лучшие веб-шрифты Google были созданы, чтобы предложить различные стили типографии помимо
Введение в Google Maps API для Android с Kotlin
Примечание об обновлении : в этом учебном курсе обновлена последняя версия API Карт Google, последняя версия Android Studio версии 3.0.1 и используется Kotlin для разработки приложений. Обновление от Джо Говарда. Оригинальный учебник Юнис Обугей. От фитнес-приложений, таких как Runkeeper, до игр, таких как Pokemon Go, службы определения местоположения становятся все более важной частью современных приложений. В этом руководстве Google Maps API вы создадите
Контент-маркетинг: описание продукта
Хотя покупатели по-прежнему с большей вероятностью будут платить цену при совершении покупки, они ожидают от продавца достоверной информации и интересной информации о товаре или услуге, которые его интересуют. В случае магазинов с большим ассортиментом создание уникальных описаний товаров для всех товаров в списке является трудоемкой задачей. Однако стоит потратить время и ресурсы, чтобы выиграть как в глазах потребителей, так и в глазах поисковика. Как создать описание товара?
Проблемы с Adobe Flash в Google Chrome? Вот как их исправить.
... Google Chrome - это браузер, созданный Google (ну, вы знаете, гигант поисковых систем), и он занимает почти половину текущего рынка, включая поддержку тем, расширений и HTML5. Несмотря на то, что Chrome набирает больше очков в тестах браузеров, чем его конкуренты, у него есть несколько известных проблем с Flash - и вот как их исправить. Прежде всего, проблемы с Flash-играми и тому подобное - их нельзя исправить. Игры Chrome и Flash не очень хорошо сочетаются друг с другом, независимо от
Как владелец бизнеса, вы являетесь хозяином своих данных в Картах Google. Я имею в виду - ты должен быт...
Как владелец бизнеса, вы являетесь хозяином своих данных в Картах Google. Я имею в виду - ты должен быть! Затем вы добавляете фотографии в определенные категории на панели Google My Business (это называется «центром управления» для вашей витрины Google). Да, чтобы представить ваш местный бизнес с достоинством и верностью. Но что, если другой пользователь добавил к вашей визитной карточке Google фотографию, которой вы не гордитесь? Ответ о том, как удалить такие фотографии позже в этой статье.
Сайт недоступен
Hostinger по всему миру Платформа веб-хостинга мирового класса. Наше видение заключается в том, чтобы позволить миллионам людей во всем мире раскрыть возможности Интернета и дать им возможность учиться, творить и расти. Выберите свой план веб-хостинга 1 веб-сайт 1 учетная запись электронной почты Пропускная способность 100 ГБ 1X вычислительная мощность и память Неограниченное
Сайт недоступен
Hostinger по всему миру Платформа веб-хостинга мирового класса. Наше видение заключается в том, чтобы позволить миллионам людей во всем мире раскрыть возможности Интернета и дать им возможность учиться, творить и расти. Выберите свой план веб-хостинга Единый общий хостинг 1 веб-сайт 1 учетная запись электронной почты Пропускная способность 100 ГБ 1X вычислительная мощность и память
Сайт недоступен
Hostinger по всему миру Платформа веб-хостинга мирового класса. Наше видение заключается в том, чтобы позволить миллионам людей во всем мире раскрыть возможности Интернета и дать им возможность учиться, творить и расти. Выберите свой план веб-хостинга Единый веб-хостинг 1 веб-сайт 1 учетная запись электронной почты Пропускная способность 100 ГБ 1X вычислительная мощность и память
До свидания, Google Reader: альтернативные RSS-решения для пользователей Mac и iOS
... Google душераздирающее объявление что он закрывал Google Reader - и API синхронизации ленты новостей, которые были вместе с ним - ребята спросили меня, каков мой план чтения новостей после кончины Reader. Я люблю RSS; Я использовал NetNewsWire с момента его запуска, и я использую Reeder для iPad и iPhone. Все три приложения синхронизируются через API Google Reader, и они годами работают вместе в

Комментарии

Могу ли я создать сеть Wi-Fi в своей комнате?
Могу ли я создать сеть Wi-Fi в своей комнате? Да, такая возможность есть. Все, что вам нужно сделать, это купить подходящее устройство (важно, чтобы оно предназначалось для локальных сетей, устройства, предназначенные для абонентских сетей, таких как Neostrada или Netia, и устройства 3G \ LTE не будут работать). Надлежащая защита и обслуживание этой сети является обязанностью мирного жителя. В то же время отметим, что из-за высокой плотности сетевых передатчиков Wi-Fi может произойти
Итак, где стоит создать брокерский счет?
Итак, где стоит создать брокерский счет? Выбор довольно большой, здесь я представлю три проверенных и (на мой взгляд) лучших варианта. Degiro (www.degiro.pl) Самый дешевый брокер в списке. Бесплатный аккаунт. Комиссия составляет 1 злотый за польские акции, 0,50 евро за американские акции и 2-4 евро за европейские акции. Создание учетной записи занимает около десятка минут. Доступ ко многим мировым биржам, включая Канаду, Гонконг, Сингапур, Японию. ПЛЮС:
Что такое «Правила» и как я могу их создать?
Что такое «Правила» и как я могу их создать? Благодаря «Правилам» вы можете определить, как работает система Arlo в различных ситуациях. Например, вы можете настроить систему Arlo для записи видеоматериала, когда датчик движения активирован на определенной камере и отправляет соответствующее уведомление по электронной почте. Созданные правила можно использовать в режимах и расписании, полностью настраивая систему Arlo в соответствии с вашими потребностями.
Как создать описание товара?
Как создать описание товара? Изображение, описание продукта, его технические характеристики - эти компоненты должны состоять из каждой подстраницы продукта. Создавая описание товара или услуги, рассматривайте его как хорошую инвестицию. Не преувеличивайте преимущества ваших продуктов, а описывайте их на практике, предоставляя им практическое применение. Если, например, в данной кофемашине была использована новейшая технология, напишите, как она превращается в ее функциональность. Не
В конце концов, что если ваш супруг / супруга пытается дозвониться до вас или вашего разгневанного руководителя?
В конце концов, что если ваш супруг / супруга пытается дозвониться до вас или вашего разгневанного руководителя? Бен Паттерсон
Если вы чувствуете ответственность за то, что ваш ребенок прислушивается, подумайте об этом - как вы должны это делать?
Если вы чувствуете ответственность за то, что ваш ребенок прислушивается, подумайте об этом - как вы должны это делать? Как можно заставить другого человека что-то делать; как мы должны контролировать то, что на самом деле делает кто-то еще? Вместо этого решите нести ответственность за то, как вы хотите иметь дело со своим ребенком, если он не слушает. Подумайте о том, какие последствия вы хотите раздать, исходя из того, с чем вы можете и не можете жить - своего собственного итога.
Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик?
Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик? Введите адрес электронной почты, чтобы подписаться на нашу рассылку.
Может ли отображаемая информация сделать ваш день легче?
Может ли отображаемая информация сделать ваш день легче? Напишите нам свой ответ в комментариях. Фото на обложке: изображение альянса / empics / Эндрю Мэттьюс
Что такое ваш USP?
Что такое ваш USP? Рекомендации экспертов Это номер один блог стратегии брендинга можно охарактеризовать как низкий Джерри, вы говорите: «почему» и ваше уникальное торговое предложение (USP), в котором:
Является ли целью этой карты поездок диагностировать проблемы с текущим опытом или создать новый опыт?
Является ли целью этой карты поездок диагностировать проблемы с текущим опытом или создать новый опыт? Каков баланс между внешними действиями (на стороне клиента) и внутренними действиями (на стороне организации)? Кто будет использовать эту карту путешествия? Правила создания успешных карт путешествий Успешные карты путешествий требуют больше, чем просто включение «правильных» элементов. Составление схемы путешествия должно быть совместным процессом,
Как их создать?
Как их создать? На что обратить особое внимание во время мероприятия? цвет Минималистский стиль обычно носит сдержанные, нейтральные цвета - белый, черный, серый, бежевый и коричневый. Доминируют прохладные оттенки, которые дополнительно оптически увеличивают пространство. Это относится ко всем элементам квартиры, то есть к стенам, полам, дверям, а также к мебели и (немногим) предметам декора. Также популярно вводить дополнительный цвет - интенсивный, выразительный,

Но что, если вам нужно использовать карту или маршруты за пределами сайта Google?
Так как же нам создать этот измененный блок получения маршрутов?
Com/maps?
Com/maps?
Com/maps?
Как создать описание товара?
Проблемы с Adobe Flash в Google Chrome?
Но что, если другой пользователь добавил к вашей визитной карточке Google фотографию, которой вы не гордитесь?
Могу ли я создать сеть Wi-Fi в своей комнате?
Итак, где стоит создать брокерский счет?