على الرغم من وجود العديد من تطبيقات وخدمات^{(apps and services)} الخرائط التي تساعدك على الانتقال من النقطة أ إلى النقطة ب ، فإن الملك النهائي للخرائط هو خرائط Google^{(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^{(Google Maps)} . الطريقة الثانية هي تقنية أكثر قليلاً ، لكنها أكثر ديناميكية وقابلية للتخصيص. سأذكر كلا الطريقتين أدناه.

تضمين خريطة جوجل

إذا كنت تريد فقط عرض الاتجاهات من موقع إلى آخر ، فإن أسهل ما يمكنك فعله هو تضمين أي خريطة تشاهدها باستخدام رمز التضمين. أولاً^(First) ، انطلق وقم بإعداد الاتجاهات التي تريدها في خرائط Google^{(Google Maps)} ، ثم انقر فوق رمز الترس في أسفل يمين الصفحة.

انقر فوق مشاركة الخريطة أو تضمينها^{( Share or embed map)} ، ثم انقر فوق علامة التبويب تضمين الخريطة . ^{(Embed map)}يمكنك هنا اختيار حجم لخريطتك ثم نسخ رمز iframe وإفلاته^{(iframe code and drop)} في أي صفحة ويب تريدها.

الجانب السلبي الوحيد لهذه الطريقة هو أن المستخدم يرى فقط خريطة ثابتة. في الطريقة الثانية أدناه ، يمكنك إنشاء نموذج يمكن للمستخدم بواسطته كتابة أي عنوان بداية وسيقوم بإنشاء خريطة من هذا العنوان إلى عنوان الوجهة^{(destination address)} الذي تختاره.

إنشاء نموذج خرائط جوجل

لتوضيح ما أعنيه بالطريقة الثانية ، امض قدمًا واكتب عنوانًا أمريكيًا^{(US address)} في المربع أدناه للحصول على الاتجاهات من موقعك إلى منزلي:

رائع^{(Cool huh)} ، أليس كذلك؟ يمكنك بسهولة إنشاء هذا النموذج الصغير على أي موقع ويب أو مدونة أو في أي مكان يمكنك وضع بعض أكواد HTML^{(HTML code)} ! يعد هذا أيضًا رائعًا لمواقع الويب الخاصة بالشركات^{(business web)} الصغيرة حيث يمكنك طرحه على صفحة الاتصال^{(contact page and people)} الخاصة بك ويمكن للأشخاص الحصول على الاتجاهات بسرعة ، بدلاً من الاضطرار إلى نسخ عنوانك ، وفتح نافذة جديدة ، ثم كتابة عنوان البداية الخاص^{(starting address)} بهم .

إذًا ، كيف نبدأ في إنشاء مربع الاتجاهات هذا المعدل؟ حسنًا^(Well) أولاً ، سنحتاج إلى الحصول على البنية الصحيحة لعنوان URL^(URL) الذي تستخدمه Google للحصول على الاتجاهات. لحسن الحظ ، يمكننا معرفة ذلك من خلال الحصول على الاتجاهات بين مكانين ثم نسخ عنوان URL^(URL) من شريط العنوان^{(address bar)} . يمكنك أيضًا النقر فوق رمز الترس الصغير في أسفل يمين الصفحة واختيار مشاركة الخريطة أو تضمينها^{(Share or embed map)} .

ستحتوي علامة التبويب " ارتباط المشاركة " على ^{(Share link)}عنوان URL^(URL) ، وهو نفس عنوان 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 أن تكون مباشرة وسهلة للغاية ، لكن ^{(Google Maps URL)}بنية عنوان URL^{(URL structure)} الجديدة معقدة للغاية. لحسن الحظ ، لا يزال بإمكانك استخدام المعلمات القديمة وستقوم Google بتحويلها إلى الإصدار الجديد تلقائيًا. لمعرفة ما أعنيه ، تحقق من الرابط أدناه.

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

انطلق واعطها فرصة. ضع عنوانًا بين علامتي اقتباس لعنوان البداية والنهاية والصق^{(address and paste)} عنوان URL في متصفحك! لقد استبدلت البداية بمدينتي نيو أورلينز وانتهيت^{(New Orleans)} بمدينة هيوستن ^{(home city)} ،^(Houston) تكساس ، لذلك هذا هو الشكل الذي يبدو عليه عنوان URL^(URL) لاتجاهات خرائط Google :^{(Google Maps)}

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

إنها تعمل! كما ترى ، تعمل خرائط Google^{(Google Maps)} على تحويل الروابط إلى شيء أكثر تعقيدًا بمجرد تحميل الخريطة بالكامل. حسنًا ، والآن بعد أن أصبح لدينا عنوان URL^(URL) سليم يمكننا تمريره إلى خرائط Google^{(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=hعنوان URL^(URL) . layer = t traffic layer and t=h means الخريطة المختلطة! يمكن أيضًا ضبط t على ^(t)m للخريطة العادية و k للقمر الصناعي و  p للتضاريس. z هو مستوى التكبير / التصغير^{(zoom level)} ويمكنك تغييره من 1 إلى 20. في عنوان URL^(URL) أعلاه ، تم تعيينه على 7. ما عليك سوى إدخال هؤلاء في ^(Just)عنوان URL^(URL) النهائي وستحصل الآن على نموذج مخصص للغاية لخرائط Google للحصول على الاتجاهات^{(Google Maps Get Directions form)} على موقعك !

لديك أي مشاكل مع هذا ، انشر تعليقًا وسأحاول مساعدتك! استمتع!

Add Google Maps Driving Directions to Your Website

Εven though there are so many mapping apps and services out therе 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 navigation and routing options and cоol feаtures likе Streеt 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

• خرائط جوجل لا تتحدث أو تعطي توجيهات صوتية؟ 12 طرق للإصلاح

• 9 Hidden ميزات في Google Maps يجب عليك المغادرة

• كيفية عرض Google Maps Search History

• كيفية استخدام متعددة Stops في Google Maps

• كيفية Embed Google Forms على Your Website

• ما هو المرشدون المحليون لخرائط جوجل؟

• ما هي رموز خرائط جوجل بلس وكيفية استخدامها

• كيف اصنع Business Card في Google Drive

• ما هو المحسن Protection في Google Chrome and How لتمكينه

• كيفية إلغاء أو إيقاف مؤقت YouTube Premium Subscription

• كيفية تضمين تقويم Google على موقع الويب الخاص بك

• كيفية تغيير Default Google Account

• كيفية إرسال Private Emails في Gmail

• كيفية استخدام تتبع خرائط Google Wildfire

• كيفية جعل Custom Routes في Google Maps

• ما هو Google App & How لاستخدامه

• إضافة التعليقات وحلها في محرر مستندات Google

• كيفية وضع دبوس في خرائط جوجل على سطح المكتب والجوال

• 7 Best Gmail Add-Ons

• ما هو Software Reporter Tool ​​في Chrome and How لتعطيله