Несмотря на то, что существует так много картографических приложений и сервисов^{(apps and services)} , которые доставят вас из точки А в точку Б, бесспорным королем карт является Google Maps . Я использую его на своем компьютере, планшете и 90% времени на своем смартфоне. В нем самые лучшие данные, больше всего вариантов навигации и маршрутизации, а также интересные функции, такие как просмотр улиц и информация о пешеходных^{(Street View and walking)} и велосипедных прогулках и общественном транспорте^{(biking and mass transit info)} .

Но что, если вам нужно использовать карту или маршруты^{(map or directions)} за пределами веб-сайта Google? Предположим^(Suppose) , у вас есть собственный свадебный веб-сайт^{(wedding website)} или личный блог, и гости^{(blog and guests)}  могут зайти на ваш сайт, ввести адрес, с которого они будут приходить, и автоматически проложить маршрут к месту проведения мероприятия^{(event location)} !

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

Встроить карту Google

Если вы хотите отображать маршруты только из одного места в другое, проще всего встроить любую карту, которую вы просматриваете, с помощью кода для встраивания. Сначала^(First) настройте нужные направления в Картах Google^{(Google Maps)} , а затем щелкните значок шестеренки в правом нижнем углу страницы.

Нажмите «Поделиться или встроить карту^{( Share or embed map)} » , ​​а затем нажмите на вкладку « Встроить карту^{(Embed map)} ». Здесь вы можете выбрать размер для своей карты, а затем скопировать код iframe и поместить^{(iframe code and drop)} его на любую веб-страницу, которая вам нравится.

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

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

Чтобы проиллюстрировать, что я имею в виду под вторым методом, введите адрес^{(US address)} в США в поле ниже, чтобы проложить маршрут от вашего местоположения до моего дома:

Круто да^{(Cool huh)} ? Вы можете легко создать эту маленькую форму на любом веб-сайте, в блоге или в любом другом месте, куда вы можете добавить HTML-код^{(HTML code)} ! Это также отлично подходит для веб-сайтов малого бизнеса^{(business web)} , поскольку вы можете добавить его на свою страницу контактов, и люди^{(contact page and people)} смогут быстро проложить маршрут, вместо того, чтобы копировать ваш адрес, открывать новое окно, а затем вводить свой начальный адрес^{(starting address)} .

Итак, как нам создать это модифицированное окно получения маршрута? Ну^(Well) , во-первых, нам нужно получить правильный синтаксис для URL -адреса , который Google использует для направлений. К счастью, мы можем понять это, проложив маршрут между двумя местами, а затем просто скопировав URL -адрес из адресной строки^{(address bar)} . Вы также можете щелкнуть крошечный значок шестеренки в правом нижнем углу страницы и выбрать «Поделиться или встроить карту^{(Share or embed map)} » .

Вкладка « Поделиться ссылкой^{(Share link)} » будет содержать URL -адрес , который совпадает с URL -адресом в адресной строке вашего браузера^{(browser address bar)} . Я пошел дальше и вставил весь URL-адрес ниже^{(URL below)} , чтобы показать вам, как он выглядит.

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=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Ой! Это довольно долго! Там много всего, большая часть которого не имеет никакого смысла! Параметры URL-адреса Google Maps^{(Google Maps URL)} раньше были очень простыми и простыми, но новая структура URL^{(URL structure)} -адреса довольно сложна. К счастью, вы по-прежнему можете использовать старые параметры, и Google автоматически преобразует их в новую версию. Чтобы понять, что я имею в виду, перейдите по ссылке ниже.

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

Давай, попробуй. Поместите адрес в кавычки для начального и конечного адреса и вставьте ^{(address and paste)}URL - адрес в свой браузер! Я заменил начало на мой родной город ^{(home city)} Новый Орлеан^{(New Orleans)} и конец на Хьюстон^(Houston) , штат Техас, так что вот как выглядит мой URL -адрес маршрута ^(URL)Google^{(Google Maps)} Maps :

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

Оно работает! Однако, как вы можете видеть, Google Maps преобразует ссылки во что-то гораздо более сложное после полной загрузки карты. Итак, теперь, когда у нас есть правильный URL -адрес , который мы можем передать в Google Maps , нам нужно создать простую форму с двумя полями, одно для начального адреса^{(starting address)} и одно для адреса назначения^{(destination address)} .

Если вы хотите, чтобы люди просто вводили свой адрес и прокладывали маршрут к вам, то мы хотим, чтобы второе поле было скрыто и уже было указано адрес назначения^{(destination address)} .

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

Проверьте код выше. Первая строка начинается с формы и говорит, что при нажатии кнопки отправки^{(submit button)} данные должны быть отправлены на maps.google.com/maps. Target target=blank означает, что мы хотим, чтобы результат открывался в новом окне. Затем у нас есть пустое текстовое поле^{(text box)} для начального адреса^{(starting address)} .

Второе текстовое поле^{(text box)} скрыто, и значением является желаемый адрес назначения^{(destination address)} . Наконец, есть кнопка отправки с заголовком «Проложить маршрут». Теперь, когда кто-то вводит свой адрес, он получит это:

Вы можете настроить направления и карту еще больше с помощью нескольких дополнительных параметров. Например, предположим, что вы не хотите, чтобы представление по умолчанию^{(default view)} было картами, а вместо этого хотите, чтобы оно было спутниковым^(Satellite) и показывало трафик^(Traffic) .

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=hURL . layer=t для traffic layer and t=h means гибридную карту! t также может быть установлен на m для карты нормалей, k для спутника и  p для ландшафта. z — это уровень масштабирования^{(zoom level)} , и вы можете изменить его от 1 до 20. В приведенном выше URL -адресе установлено значение 7. Просто^(Just) добавьте их к конечному URL -адресу , и теперь у вас есть настраиваемая форма Google Maps Get Directions^{(Google Maps Get Directions form)} на вашем сайте . !

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

Add Google Maps Driving Directions to Your Website

Even though there are so many mapping apps and services out there to get you frоm point A to point B, the definitive king of maps is Google Mаps. I use it on my computer, tablet and 90% of the time on my smartphone. It’s got the best data, the moѕt navigatiоn and routing optiоns and cool features like Street View and walking, bіking and mass tranѕit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

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=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

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

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

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

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

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

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Карты Google не говорят или дают голосовые указания? 12 способов исправить

• 9 Особенности Hidden в Google Maps Вы должны проверить

• Как просмотреть свой Google Maps Search History

• Как использовать несколько Stops в Google Maps

• Как Embed Google Forms на Your Website

• Что расширено Protection в Google Chrome and How, чтобы включить его

• Как сделать Business Card в Google Drive

• Как отправить Private Emails в Gmail

• Как добраться до Inbox Zero в Gmail

• Google My Activity: почему вы должны заботиться

• Как использовать задачи Google - Начало работы Руководство

• Как сделать Custom Routes в Google Maps

• Как использовать списки Google Sheets Drop Down

• Можете ли вы удалить все электронные письма от Gmail одновременно?

• Добавление и разрешение комментариев в Документах Google

• 3 способа Create Borders в Google Docs

• Как вставить подпись в Google Docs

• Как заказать Email в Gmail

• Как просмотреть историю местоположений Google Maps

• Как использовать Google Maps для отслеживания лесных пожаров