Въпреки че има толкова много приложения и услуги за картографиране, които да ви отведат от точка А до точка Б, окончателният крал на картите е Google Maps . Използвам го на моя компютър, таблет и 90% от времето на моя смартфон. Има най-добрите данни, най-много опции за навигация и маршрут и страхотни функции като Street View и информация за ходене, колоездене и обществен транспорт.

Но какво ще стане, ако трябва да използвате карта или упътвания извън уебсайта на Google? Да предположим^(Suppose) , че имате свой собствен сватбен уебсайт или личен блог и гостите могат да посетят вашия сайт, да въведат адреса, от който ще идват и автоматично да получат упътвания до мястото на събитието!

Е, има няколко начина, по които можете да постигнете това. Най-лесният начин е просто да вградите картата във вашата уеб страница, като използвате кода за вграждане, генериран от Google Maps . Вторият начин е малко по-техничен, но по-настройваем и динамичен. Ще спомена и двата метода по-долу.

Вграждане на Google Map

Ако искате да покажете само упътвания от едно място до друго, най-лесното нещо е да вградите каквато и карта да преглеждате, като използвате кода за вграждане. Първо^(First) , продължете напред и настройте каквито искате упътвания в Google Maps и след това щракнете върху иконата на зъбно колело в долния десен ъгъл на страницата.

Щракнете върху Споделяне или вграждане на карта^{( Share or embed map)} и след това щракнете върху раздела Вграждане на карта^{(Embed map)} . Тук можете да изберете размер за вашата карта и след това да копирате кода на iframe и да го пуснете на всяка уеб страница, която харесвате.

Единственият недостатък на този метод е, че потребителят просто вижда статична карта. Във втория метод по-долу можете да създадете формуляр, в който потребителят може да въведе произволен начален адрес и той ще генерира карта от този адрес до целевия адрес по ваш избор.

Създайте формуляр за Google Maps

За да илюстрирам какво имам предвид под втория метод, продължете и въведете адрес в САЩ в полето по-долу, за да получите упътвания от вашето местоположение до къщата ми:

Готино^(Cool) а? Можете лесно да създадете тази малка форма на всеки уебсайт, блог или навсякъде, където можете да поставите някакъв HTML код! Това също е чудесно за уеб сайтове на малкия бизнес, тъй като можете да го изведете на страницата си за контакт и хората могат бързо да получат упътвания, вместо да се налага да копират адреса ви, да отварят нов прозорец и след това да въвеждат началния си адрес.

И така, как да създадем това модифицирано поле за получаване на упътвания? Е^(Well) , първо, ще трябва да получим правилния синтаксис за URL адреса^(URL) , който Google използва за упътвания. За щастие можем да разберем това, като получим упътвания между две места и след това просто копираме URL адреса^(URL) от адресната лента. Можете също да кликнете върху малката икона на зъбно колело в долния десен ъгъл на страницата и да изберете Споделяне или вграждане на карта^{(Share or embed map)} .

Разделът за връзка за споделяне^(Share) ще съдържа URL адреса^(URL) , който е същият 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=!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) е доста сложна. За щастие все още можете да използвате старите параметри и Google автоматично ще ги преобразува в новата версия. За да разберете какво имам предвид, вижте връзката по-долу.

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

Давай и пробвай. Поставете адрес в кавички за началния и крайния адрес и поставете URL адреса^(URL) във вашия браузър! Замених началото с моя роден град Ню Орлиънс^{(New Orleans)} и края с Хюстън^(Houston) , Тексас, така че ето как изглежда URL адресът^(URL) ми за упътвания в Google Maps :

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

Работи! Както можете да видите обаче, Google Maps преобразува връзките в нещо много по-сложно, след като картата се зареди напълно. Добре, така че сега, когато имаме разумен URL адрес^(URL) , който можем да прехвърлим в Google Maps , трябва да създадем прост формуляр с две полета, едно за началния адрес и едно за целевия адрес.

Ако искате хората просто да въведат адреса си и да получат упътвания до вашето място, тогава ще искаме второто поле да бъде скрито и вече зададено за адреса на местоназначението.

<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>

Вижте кода по-горе. Първият ред започва от формуляра и казва, че когато се щракне върху бутона за изпращане, данните трябва да бъдат изпратени на maps.google.com/maps. target=blank означава, че искаме резултатът да се отвори в нов прозорец. След това имаме текстово поле за началния адрес, което е празно.

Второто текстово поле е скрито и стойността е целевият адрес, който желаем. И накрая, има бутон за изпращане със заглавие „Получете упътвания“. Сега, когато някой въведе адреса си, ще получи това:

Можете да персонализирате упътванията и да начертаете още повече с няколко допълнителни параметъра. Например, да кажем, че не искате изгледът по подразбиране да бъде карти, но вместо това искате да бъде сателит^(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 адреса^(URL) . layer=t е за слоя трафик, а t=h означава хибридна карта! t може също да бъде настроен на m за нормална карта, k за сателит и  p за терен. z е нивото на мащабиране и можете да го промените от 1 на 20. В горния URL адрес^(URL) е настроен на 7. Просто^(Just) ги прикрепете към крайния си URL адрес^(URL) и вече имате силно персонализиран формуляр за получаване на упътвания на Google Карти^{(Google Maps Get Directions)} на сайта си !

Ако имате проблеми с това, напишете коментар и ще се опитам да помогна! Наслади се!

Add Google Maps Driving Directions to Your Website

Even though there are ѕo many mapping apps and services out there to get you from point A to point Β, the definitіve king of maps is Google Maps. I use it on my computer, tablet аnd 90% оf the time on my smartphone. It’s got the best data, the most navigation and routing options and cool features like Street View and walking, biking and mass transit 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 Maps не говори или не дава гласови указания? 12 начина за коригиране

• 9 скрити функции в Google Maps, които трябва да проверите

• Как да прегледате вашата история на търсене в Google Maps

• Как да използвате множество спирки в Google Maps

• Как да вградите Google формуляри във вашия уебсайт

• Как да вмъкнете подпис в Google Документи

• Как да направите визитка в Google Drive

• Как да използвате падащи списъци на Google Sheets

• Как да използвате SUMIF в Google Sheets

• Какво е показател и измерение в Google Analytics?

• Какво представляват кодовете на Google Maps Plus и как да ги използвате

• Можете ли да изтриете всички имейли от Gmail наведнъж?

• Как да изключите Google SafeSearch

• Как да анулирате или поставите на пауза абонамент за YouTube Premium

• Google My Activity: Защо трябва да ви е грижа

• 7-те най-добри добавки за Gmail

• Как да премахнете изпращането на имейл в Gmail

• 8 страхотни приложения на Google Maps Street View

• Как да вградите Google Календар във вашия уебсайт

• Как да изпращате лични имейли в Gmail