Иако постоји толико много апликација и услуга за мапирање које ће вас довести од тачке А до тачке Б, дефинитивни краљ мапа је Гоогле Мапс^{(Google Maps)} . Користим га на свом рачунару, таблету и 90% времена на свом паметном телефону. Има најбоље податке, највише опција за навигацију и рутирање и сјајне функције као што су Приказ улице^{(Street View)} и информације о пешачењу, вожњи бициклом и јавном превозу.

Али шта ако треба да користите мапу или упутства изван Гоогле-ове веб локације? Претпоставимо^(Suppose) да имате своју веб локацију за венчање или лични блог и гости би могли да посете вашу веб локацију, укуцају адресу са које ће доћи и аутоматски добити упутства до локације догађаја!

Па, постоји неколико начина на које можете ово постићи. Најлакши начин је да једноставно уградите мапу на своју веб страницу користећи код за уградњу који генерише Гоогле Мапс^{(Google Maps)} . Други начин је мало техничкији, али прилагодљивији и динамичнији. У наставку ћу поменути обе методе.

Уградите Гоогле мапу

Ако желите да прикажете само упутства од једне локације до друге, најлакше је да уградите било коју мапу коју гледате помоћу кода за уградњу. Прво^(First) , наставите и подесите упутства која желите у Гоогле мапама^{(Google Maps)} , а затим кликните на икону зупчаника у доњем десном углу странице.

Кликните на Дели или угради мапу^{( Share or embed map)} , а затим кликните на картицу Угради мапу^{(Embed map)} . Овде можете одабрати величину за своју мапу, а затим копирати ифраме код и испустити га на било коју веб страницу коју желите.

Једина мана ове методе је што корисник само види статичну мапу. У другом методу испод, можете креирати образац у који корисник може да унесе било коју почетну адресу и он ће генерисати мапу од те адресе до одредишне адресе по вашем избору.

Направите образац за Гоогле мапе

Да бисте илустровали шта мислим под другим методом, само напред и укуцајте америчку адресу у поље испод да бисте добили упутства од ваше локације до моје куће:

Цоол^(Cool) хух? Можете лако да креирате овај мали образац на било којој веб страници, блогу или било где где можете да унесете неки ХТМЛ^(HTML) код! Ово је такође одлично за веб локације за мала предузећа јер можете да га прикажете на својој контакт страници и људи могу брзо да добију упутства, уместо да морају да копирају вашу адресу, отворе нови прозор, а затим укуцају своју почетну адресу.

Дакле, како да направимо овај модификовани оквир за добијање упутстава? Па^(Well) прво, мораћемо да добијемо исправну синтаксу за УРЛ^(URL) који Гоогле^(Google) користи за упутства. Срећом, то можемо да схватимо тако што ћемо добити упутства између два места, а затим само копирати УРЛ^(URL) са траке за адресу. Такође можете да кликнете на малу икону зупчаника у самом доњем десном углу странице и изаберете Подели или угради мапу^{(Share or embed map)} .

Картица везе за дељење^(Share) ће садржати УРЛ адресу^(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

Јао! То је прилично дуго! Има много ствари унутра, од којих већина нема никаквог смисла! Параметри УРЛ-а Гоогле мапа^{(Google Maps URL)} су некада били веома једноставни и лаки, али нова структура УРЛ^(URL) - а је прилично компликована. Срећом, и даље можете да користите старе параметре и Гоогле^(Google) ће их аутоматски конвертовати у нову верзију. Да видите на шта мислим, погледајте везу испод.

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

Само напред и пробај. Ставите адресу под наводнике за почетну и завршну адресу и налепите УРЛ^(URL) у свој претраживач! Заменио сам почетак са мојим родним градом Њу Орлеансом^{(New Orleans)} и крај са Хјустоном^(Houston) , Тексас, тако да овако изгледа мој УРЛ^(URL) упутства за Гоогле мапе^{(Google Maps)} :

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

Функционише! Међутим, као што видите, Гоогле мапе^{(Google Maps)} претварају везе у нешто много компликованије када се мапа потпуно учита. У реду, сада када имамо здрав УРЛ^(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>

Погледајте код изнад. Први ред почиње са формом и каже да када се кликне на дугме за слање, податке треба послати на мапс.гоогле.цом/мапс. Циљ 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=hУРЛ^(URL) -у . лаиер=т је за слој саобраћаја, а т=х значи хибридна мапа! т^(t) се такође може подесити на м^(m) за нормалну мапу, к^(k) за сателит и  п^(p) за терен. з^(z) је ниво зумирања и можете да га промените од 1 до 20. У горњем УРЛ^(URL) -у је подешен на 7. Само^(Just) их прикачите на крајњи УРЛ^(URL) и сада ћете на свом сајту добити веома прилагођени образац за добијање упутстава за Гоогле мапе^{(Google Maps Get Directions)} !

Ако имате проблема са овим, оставите коментар и покушаћу да помогнем! Уживати!

Add Google Maps Driving Directions to Your Website

Εven though there are so many mapping apрs and servicеs out there to get you from point A to point B, the definitive king of maps is Google Maps. I use it on my computer, tablet and 90% of the time on my smartphone. It’s got the best data, the most navigatіon and routing options and cool features like Street View and walking, biking аnd 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

• Гоогле мапе не говоре или не дају гласовна упутства? 12 начина да се поправи

• 9 скривених функција у Гоогле мапама које би требало да проверите

• Како да видите историју претраге у Гоогле мапама

• Како користити више заустављања у Гоогле мапама

• Како да уградите Гоогле формуларе на своју веб локацију

• 7 најбољих додатака за Гмаил

• Шта су локални водичи за Гоогле мапе?

• Како да искључите Гоогле СафеСеарцх

• Како да користите падајуће листе Гоогле табеле

• Како функционише ИоуТубе алгоритам?

• Како направити визит карту на Гоогле диску

• Шта је побољшана заштита у Гоогле Цхроме-у и како је омогућити

• Како да погледате историју локација Гоогле мапа

• Како користити Гоогле Мапс Вилдфире Трацкинг

• Шта су Гоогле обавештења о изложености за ЦОВИД заштиту?

• Како направити резервну копију историје Гоогле Цхроме-а

• Како да користите Гоогле породични календар да ваша породица буде на време

• Шта је метрика и димензија у Гоогле аналитици?

• Како направити Гоогле образац: Комплетан водич

• Како користити анонимни режим Гоогле мапа на Андроид уређају