اگرچه برنامه‌ها و سرویس‌های^{(apps and services)} نقشه‌برداری زیادی وجود دارند که شما را از نقطه A به نقطه B می‌برند، پادشاه قطعی نقشه‌ها Google Maps است. من از آن در رایانه، تبلت و 90 درصد مواقع در گوشی هوشمندم استفاده می کنم. بهترین داده‌ها، بیشترین گزینه‌های ناوبری و مسیریابی و ویژگی‌های جالب مانند نمای خیابان و اطلاعات پیاده‌روی^{(Street View and walking)} ، دوچرخه‌سواری و حمل‌ونقل عمومی را^{(biking and mass transit info)} دارد.

اما اگر نیاز به استفاده از نقشه یا مسیرهای^{(map or directions)} خارج از وب سایت گوگل داشته باشید، چه؟ فرض کنید^(Suppose) وب‌سایت عروسی^{(wedding website)} یا وبلاگ شخصی خود دارید و مهمانان^{(blog and guests)}  می‌توانند از سایت شما بازدید کنند، آدرسی را که از آن می‌آیند را تایپ کرده و به طور خودکار مسیرهای مکان رویداد را^{(event location)} دریافت کنند !

خوب، چند راه وجود دارد که می توانید برای انجام این کار استفاده کنید. ساده ترین راه این است که به سادگی نقشه را با استفاده از کد جاسازی ایجاد شده توسط Google Maps در صفحه وب خود جاسازی کنید . راه دوم کمی فنی تر است، اما قابل تنظیم و پویاتر است. در زیر به هر دو روش اشاره می کنم.

نقشه گوگل را جاسازی کنید

اگر فقط می‌خواهید مسیرها را از یک مکان به مکان دیگر نمایش دهید، ساده‌ترین کار این است که هر نقشه‌ای را که مشاهده می‌کنید با استفاده از کد جاسازی جاسازی کنید. ابتدا^(First) پیش بروید و هر جهتی را که می خواهید در Google Maps تنظیم کنید و سپس روی نماد چرخ دنده در سمت راست پایین صفحه کلیک کنید.

روی Share یا embed map^{( Share or embed map)} کلیک کنید و سپس روی تب Embed map کلیک کنید. در اینجا می توانید اندازه ای را برای نقشه خود انتخاب کنید و سپس کد iframe را کپی کنید و^{(iframe code and drop)} آن را در هر صفحه وب که دوست دارید رها کنید.

تنها نقطه ضعف این روش این است که کاربر فقط نقشه ایستا را می بیند. در روش دوم زیر، می‌توانید فرمی ایجاد کنید که به موجب آن کاربر می‌تواند هر آدرس شروعی را تایپ کند و نقشه‌ای را از آن آدرس به آدرس مقصد^{(destination address)} مورد نظر شما ایجاد کند.

فرم Google Maps را ایجاد کنید

برای نشان دادن منظورم از روش دوم، ادامه دهید و آدرس ایالات متحده را^{(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 URL)} قبلاً بسیار ساده و آسان بودند، اما ساختار URL^{(URL structure)} جدید کاملاً پیچیده است. خوشبختانه، همچنان می‌توانید از پارامترهای قدیمی استفاده کنید و Google آنها را به صورت خودکار به نسخه جدید تبدیل می‌کند. برای اینکه متوجه منظور من شوید، لینک زیر را بررسی کنید.

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

برو جلو و به آن ضربه بزن. یک آدرس در نقل قول برای آدرس شروع و پایان قرار دهید و ^{(address and paste)}URL را در مرورگر خود قرار دهید! من شروع را با شهر محل زندگی خود ^{(home city)} نیواورلئان^{(New Orleans)} و پایان را با هیوستون^(Houston) ، تگزاس، جایگزین کردم، بنابراین نشانی وب^(URL) مسیرهای Google 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=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 ، برای ^(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 thoυgh there are so many mapping apps and services out there to get yоu from point A to point B, the definitive kіng of maps is Google Maps. I use it on my computer, tablet and 90% of the tіme on my smartphone. It’s got the best data, the most navigation and routing oрtions аnd сool featυres 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 Hidden ویژگی های در Google Maps شما باید بررسی کنید

• چگونه Google Maps Search History خود را مشاهده کنید

• نحوه استفاده از Stops متعدد در Google Maps

• چگونه Embed Google Forms در Your Website

• چگونه تقویم گوگل را در وب سایت خود جاسازی کنیم

• 3 راه برای Create Borders در Google Docs

• روش های تحقیق کاربر گوگل آنالیتیکس برای افزایش ترافیک وب سایت

• چگونه به نوبه خود Google SafeSearch Off

• کدهای Google Maps Plus چیست و چگونه از آنها استفاده کنیم

• Protection در Google Chrome and How افزایش یافته است تا آن را فعال کند

• چگونه به وظایف استفاده از گوگل - راهنمای شروع

• چگونه Filter در صفحات Google

• نحوه مشاهده تاریخچه مکان Google Maps

• نحوه ایجاد Business Card در Google Drive

• Google Search Bar Widget Missing؟ چگونه به بازگرداندن آن را در Android

• چه آیا Google App & How به استفاده از آن

• چگونه به تغییر Default Google Account

• نحوه استفاده از SUMIF در صفحات Google

• چگونه می توان یک Google Form: یک Complete Guide