Добавьте 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 + Deerfield + Rd, + Allen, + TX + 75013, + USA / @ 33.1125686, -96.7557749,13z / data =! 3м1! 4b1! 4м13! 4м12! 1м5! 1м1! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2м2! 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. целевых = пусто означает, что мы хотим, чтобы результат открылся в новом окне. Затем у нас есть текстовое поле для начального адреса, который является пустым.
Второе текстовое поле скрыто, и значение является адресом назначения, который мы желаем. Наконец, есть кнопка отправки с заголовком «Get Directions». Теперь, когда кто-то вводит свой адрес, он получает это:
Вы можете настроить направления и карту еще больше с несколькими дополнительными параметрами. Например, допустим, вы не хотите, чтобы представление по умолчанию было картами, а вместо этого хотите, чтобы оно было спутник и показать Движение.
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 на вашем сайте.!
Возникли проблемы с этим, оставьте комментарий, и я постараюсь помочь! наслаждаться!
