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

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

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

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

Вставить Google Map

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

поделиться или вставить карту

Нажмите на Поделиться или вставить карту а затем нажмите на Вставить карту Вкладка. Здесь вы можете выбрать размер для вашей карты, а затем скопировать код 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.08947! 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, нам нужно создать простую форму с двумя полями: одно для начального адреса и одно для адреса назначения.

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

Введите свой начальный адрес:



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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.