Sizi A noktasından B noktasına götürecek çok sayıda harita uygulaması ve hizmeti^{(apps and services)} olmasına rağmen , haritaların kesin kralı Google Haritalar'dır^{(Google Maps)} . Bilgisayarımda, tabletimde ve zamanın %90'ında akıllı telefonumda kullanıyorum. En iyi verilere, en fazla navigasyon ve yönlendirme seçeneklerine ve Sokak Görünümü ve yürüyüş^{(Street View and walking)} , bisiklete binme ve toplu taşıma bilgileri^{(biking and mass transit info)} gibi harika özelliklere sahiptir .

Ancak , Google'ın web sitesi dışında bir harita veya yol tarifi^{(map or directions)} kullanmanız gerekirse ? Diyelim ki^(Suppose) kendi düğün web siteniz^{(wedding website)} veya kişisel bir blogunuz var ve misafirler^{(blog and guests)}  sitenizi ziyaret edebilir, gelecekleri adresi yazabilir ve otomatik olarak etkinlik konumuna^{(event location)} yol tarifi alabilir !

Pekala, bunu başarmanın birkaç yolu var. En kolay yol, Google Haritalar^{(Google Maps)} tarafından oluşturulan yerleştirme kodunu kullanarak haritayı web sayfanıza yerleştirmektir . İkinci yol biraz daha teknik ama daha özelleştirilebilir ve dinamik. Aşağıda her iki yöntemden de bahsedeceğim.

Google Haritasını Göm

Yalnızca bir konumdan diğerine yol tariflerini görüntülemek istiyorsanız, yapılacak en kolay şey, görüntülemekte olduğunuz haritayı yerleştirme kodunu kullanarak gömmektir. Önce devam edin ve ^(First)Google Haritalar'da^{(Google Maps)} istediğiniz yol tarifini ayarlayın ve ardından sayfanın sağ alt tarafındaki dişli çark simgesini tıklayın.

Haritayı paylaş veya göm'e tıklayın^{( Share or embed map)} ve ardından Haritayı göm^{(Embed map)} sekmesine tıklayın. Burada haritanız için bir boyut seçebilir ve ardından iframe kodunu^{(iframe code and drop)} kopyalayabilir ve bunu istediğiniz herhangi bir web sayfasına bırakabilirsiniz.

Bu yöntemin tek dezavantajı, kullanıcının yalnızca statik bir harita görmesidir. Aşağıdaki ikinci yöntemde, kullanıcının herhangi bir başlangıç ​​adresini yazabileceği bir form oluşturabilirsiniz ve bu adresten seçtiğiniz bir varış adresine bir harita oluşturacaktır.^{(destination address)}

Google Haritalar Formu Oluşturun

İkinci yöntemle ne demek istediğimi açıklamak için , bulunduğunuz yerden evime yol tarifi almak için aşağıdaki kutuya bir ABD adresi yazın:^{(US address)}

Havalı ha^{(Cool huh)} ? Bu küçük formu herhangi bir web sitesinde, blogda veya HTML kodu^{(HTML code)} koyabileceğiniz herhangi bir yerde kolayca oluşturabilirsiniz ! Bu aynı zamanda küçük işletme web^{(business web)} siteleri için de harikadır, çünkü bunu iletişim sayfanıza atabilirsiniz ve insanlar^{(contact page and people)} adresinizi kopyalayıp yeni bir pencere açmak ve ardından başlangıç ​​adreslerini^{(starting address)} yazmak zorunda kalmadan hızlı bir şekilde yol tarifi alabilirler .

Peki, bu değiştirilmiş yol tarifi alma kutusunu nasıl oluşturacağız? Öncelikle , ^(Well)Google'ın^(Google) yol tarifleri için kullandığı URL için doğru söz dizimini almamız gerekecek . Neyse ki, bunu iki yer arasında yol tarifi alarak ve ardından URL'yi ^(URL)adres çubuğundan^{(address bar)} kopyalayarak anlayabiliriz . Ayrıca sayfanın en alt kısmındaki küçük dişli simgesini tıklayıp Haritayı paylaş veya göm seçeneğini^{(Share or embed map)} de seçebilirsiniz .

Bağlantıyı paylaş sekmesi, ^{(Share link)}tarayıcınızın adres çubuğundaki ^{(browser address bar)}URL ile aynı olan URL'yi^(URL) içerecektir . Nasıl göründüğünü size göstermek için devam ettim ve URL'nin tamamını aşağıya yapıştırdım.^{(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

Evet! Bu oldukça uzun! Orada pek çok şey var ve bunların çoğu hiçbir anlam ifade etmiyor! Google Haritalar URL^{(Google Maps URL)} parametreleri eskiden çok basit ve kolaydı, ancak yeni URL yapısı^{(URL structure)} oldukça karmaşık. Neyse ki, eski parametreleri kullanmaya devam edebilirsiniz ve Google bunları otomatik olarak yeni sürüme dönüştürecektir. Ne demek istediğimi anlamak için aşağıdaki bağlantıya bakın.

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

Haydi git ve ona bir şans ver. Başlangıç ​​ve bitiş adresi için tırnak içine bir adres koyun ve URL'yi tarayıcınıza^(URL) yapıştırın ! ^{(address and paste)}Başlangıcı kendi şehrim ^{(home city)}New Orleans ile değiştirdim ve bitişi Houston , TX ile değiştirdim, bu yüzden Google Haritalar^{(Google Maps)} yol tarifi URL'm^(URL) şöyle görünüyor:

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

İşe yarıyor! Yine de görebileceğiniz gibi, Google Haritalar^{(Google Maps)} , harita tamamen yüklendiğinde bağlantıları çok daha karmaşık bir şeye dönüştürür. Tamam, artık Google Haritalar'a^{(Google Maps)} geçirebileceğimiz aklı başında bir URL'ye sahip olduğumuza göre, biri ^(URL)başlangıç ​​adresi^{(starting address)} diğeri de hedef adres^{(destination address)} için olmak üzere iki alandan oluşan basit bir form oluşturmamız gerekiyor .

İnsanların sadece adreslerini yazıp yerinize yol tarifi almalarını istiyorsanız, ikinci alanın gizlenmesini ve hedef adrese^{(destination address)} önceden ayarlanmış olmasını isteriz .

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

Yukarıdaki kodu inceleyin. İlk satır formdan başlıyor ve gönder düğmesine^{(submit button)} tıklandığında verilerin maps.google.com/maps adresine gönderilmesi gerektiğini söylüyor. target=blank , sonucun yeni bir pencerede açılmasını istediğimiz anlamına gelir. Ardından , başlangıç ​​adresi^{(starting address)} için boş olan bir metin kutumuz var.^{(text box)}

İkinci metin kutusu^{(text box)} gizlenir ve değer, arzu ettiğimiz hedef adrestir . ^{(destination address)}Son olarak, “Yol Tarifi Al” başlıklı bir gönder düğmesi vardır. Şimdi birisi adresini yazdığında şunu alacak:

Yol tariflerini özelleştirebilir ve birkaç ekstra parametreyle daha da fazla harita oluşturabilirsiniz. Örneğin, varsayılan görünümün^{(default view)} haritalar olmasını istemediğinizi, bunun yerine Uydu olmasını ve ^(Satellite)Trafik^(Traffic) göstermesini istediğinizi varsayalım .

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

URL'deki ^(URL)layer=t ve t=h alanlarına dikkat edin . katman=t traffic layer and t=h means karma harita anlamına gelir! t ayrıca normal harita için m , uydu için  k ve arazi için p olarak ayarlanabilir. ^(p)z yakınlaştırma düzeyidir^{(zoom level)} ve bunu 1'den 20'ye değiştirebilirsiniz. Yukarıdaki URL'de^(URL) , 7'ye ayarlanmıştır. Bunları nihai URL'nize^(URL) eklemeniz yeterlidir ve artık sitenizde oldukça özelleştirilmiş bir Google Haritalar Yol Tarifi Al formunuz ^{(Google Maps Get Directions form)}olur^(Just) . !

Bununla ilgili herhangi bir sorununuz varsa, bir yorum gönderin ve yardım etmeye çalışacağım! Eğlence!

Add Google Maps Driving Directions to Your Website

Even though there are so many mapping apps and serviсеs out there to get you from point A to point B, the definitive king of maps is Google Maps. I usе it on my computеr, tablet and 90% of the time on my smartphone. It’s got the best data, the most navigation and routing optiоns аnd cool features like Street View and walking, biking and mass transіt 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 Haritalar Konuşmuyor veya Sesli Yol Tarifi Vermiyor mu? Düzeltmenin 12 Yolu

• 9 Hidden Google Maps'daki özellikleri kontrol etmelisiniz

• Kişisel Google Maps Search History görüntüle Nasıl

• Google Maps'de birden fazla Stops nasıl kullanılır?

• Nasıl Your Website üzerinde Embed Google Forms için

• Google Haritalar Konum Geçmişi: Bununla Yapabileceğiniz 5 Faydalı Şey

• Nasıl Filter için Google Tablolar'daki

• Time On Your Family tutun Nasıl Kullanım Google Family Calendar için

• 8 Google Search Tips: Her zaman ne senin içindi Looking bul

• Google My Activity: Neden Gerekir Bakımı

• Google Drive'da Business Card Nasıl Yapılır?

• Google Haritalar için Yerel Rehberler Nedir?

• 7 Best Gmail Add-Ons

• YouTube History and Search Activity Nasıl Silme

• Google sayfalarında SUMIF nasıl kullanılır?

• Google Haritalar Orman Yangını İzleme Nasıl Kullanılır

• Google Maps Plus Kodları Nedir ve Nasıl Kullanılır?

• Web Sitesi Trafiğini Artırmak için Google Analytics Kullanıcı Araştırma Yöntemleri

• Tüm e-postaları bir kerede Gmail'den silebilir misiniz?

• YouTube Algorithm Work nasıl?