خرائط الويب Web Maps

ماهي خرائط الويب Web Maps...؟؟!! وبماذا يمكن أن تستخدم الخرائط في مواقع وتطبيقات الويب..؟؟!! وماذا يضيف استخدام الخرائط الى مواقع وتطبيقات الويب…؟؟!! وكيف تتم اضافة الخرائط إلى صفحات الويب…؟؟!!

تعد الخرائط من الأدوات الهامة في إنشاء مواقع الويب، حيث تساعد على توفير معلومات مفصلة للمستخدمين حول الموقع الجغرافي للمكان المطلوب، وتسهل عليهم الوصول إلى نقاط الاهتمام والمعالم الرئيسية في البيئة المحيطة. في هذا المقال، سنتحدث عن فوائد استخدام الخرائط في المواقع الإلكترونية وطريقة إضافتها إلى صفحات الويب. لنبدأ…

في هذا المقال سنتعرف على:

ماهي خرائط الويب Web Maps؟
بماذا نستخدم خرائط الويب Web Maps؟
ماهي فوائد استخدام الخرائط في المواقع الإلكترونية؟
طريقة اضافة الخرائط إلى صفحات الويب
تطبيق عملي على طريقة اضافة الخرائط لصفحات الويب

ماهي خرائط الويب Web Maps؟

خرائط الويب (Web Maps) هي خرائط تفاعلية يمكن الوصول إليها عبر الإنترنت، تقوم بعرض المعلومات الجغرافية ومواقعها بشكل رقمي. تعتمد خرائط الويب على تقنيات الويب الحديثة مثل HTML5 و CSS3 و JavaScript، وتتيح للمستخدمين إمكانية التفاعل مع الخريطة والتنقل فيها وتحريكها وتكبيرها وتصغيرها والحصول على معلومات إضافية حول المواقع الموجودة فيها.

و تساعد خرائط الويب المستخدمين في الحصول على معلومات مفصلة حول المواقع والمعالم الجغرافية المختلفة، وتسهل عملية التخطيط والتنقل والتوجيه في الأماكن المختلفة. كما تستخدم خرائط الويب في العديد من التطبيقات مثل التنقل والسفر والتسوق عبر الإنترنت والتعليم والأبحاث العلمية وغيرها

يتم إنشاء خرائط الويب من قبل الشركات والمؤسسات المتخصصة في تحليل البيانات الجغرافية وجمع المعلومات وتحديثها بشكل دوري. ويمكن الوصول إلى خرائط الويب من خلال العديد من المواقع والتطبيقات المجانية والمدفوعة التي توفرها الشركات المختلفة.

بماذا نستخدم خرائط الويب Web Maps؟

تعدد أغراض استخدام خرائط الويب Web Maps حيث يمكن استخدام الخرائط في صفحات الويب لعدة أغراض، منها:

عرض المواقع الإدارية:

يمكن استخدام الخريطة لعرض المواقع الإدارية مثل المباني الحكومية والمحاكم ومكاتب البريد، وذلك لمساعدة الأشخاص في تحديد مواقع المؤسسات الحكومية والإدارية والوصول إليها بسهولة.

عرض المواقع التعليمية:

يمكن استخدام الخريطة لعرض المواقع التعليمية مثل المدارس والجامعات والمعاهد، وذلك لمساعدة الطلاب على تحديد مواقع المؤسسات التعليمية والوصول إليها بسهولة.

عرض مواقع الأنشطة التجارية:

يمكن استخدام الخريطة لعرض مواقع الأنشطة التجارية مثل المتاجر والمطاعم والفنادق والمنتجعات، وذلك لمساعدة الأشخاص على تحديد مواقع الأنشطة التجارية والوصول إليها بسهولة.

عرض المواقع الطبية:

يمكن استخدام الخريطة لعرض المواقع الطبية مثل المستشفيات والعيادات الطبية والصيدليات، وذلك لمساعدة الأشخاص على العثور على الخدمات الطبية التي يحتاجون إليها.

عرض موقع المنظمة أو الشركة:

يمكن استخدام الخريطة لعرض موقع المنظمة أو الشركة على الخريطة، وذلك لتسهيل عملية الوصول إليها وتحديد موقعها بشكل أدق.

عرض المواقع السياحية والترفيهية:

يمكن استخدام الخريطة لعرض المواقع السياحية والترفيهية مثل المتاحف والحدائق والمنتزهات، وذلك لمساعدة الزوار في التعرف على المعالم السياحية والترفيهية في المنطقة.

بشكل عام، يمكن استخدام الخرائط في صفحات الويب لعرض أي نوع من المواقع أو المعالم الجغرافية التي تريد عرضها للمستخدمين، وذلك لتسهيل عملية الوصول إليها وتحديد مواقعها بشكل أدق.

ماهي فوائد استخدام الخرائط في المواقع الإلكترونية؟

بالإضافة الى الأغراض المتنوعة للاستخدام خرائط الويب ، يضيف استخدام خرائط الويب فوائد عديدة للموقع الالكتروني منها:

تساعد في تحسين تصميم الموقع:

تساعد الخرائط في تحسين تصميم الموقع وجعله يبدو أكثر احترافية، حيث يمكن إضافة الخرائط إلى الصفحات الرئيسية والصفحات الفرعية لتعزيز القوة البصرية للموقع.

تسهل على المستخدمين الوصول إلى الموقع:

تعد الخرائط من الأدوات الهامة في توفير موقع دقيق للموقع الخاص بنا، مما يتيح للمستخدمين العثور عليه بسهولة. كما أنها توفر للمستخدمين إرشادات واضحة حول المنطقة المحيطة بالموقع، وتساعد على تحديد الطرق الأفضل للوصول إليه.

تساعد في تحسين تجربة المستخدم:

تضيف الخرائط إلى صفحات الويب مزيدًا من القوة البصرية وتحسن من تجربة المستخدم، حيث تسمح له بتصفح الموقع بسهولة وتحديد المكان الذي يريد الوصول إليه، مما يسهل عليه العثور على المعلومات التي يبحث عنها بسهولة.

تعزز موثوقية الموقع:

بفضل الخرائط، يمكن للمستخدمين الحصول على معلومات دقيقة حول الموقع الخاص بك والمكان الذي يريدون الوصول إليه، مما يعزز موثوقية الموقع ويساعد في جعله يبدو أكثر موثوقية ومصداقية.

طريقة اضافة الخرائط إلى صفحات الويب

1- اختر خدمة الخرائط المناسبة:

يجب أولاً اختيار خدمة الخرائط المناسبة لمشروعنا، مثل Google Maps أو Bing Maps، حيث توفر هذه الخدمات خيارات متعددة لتخصيص الخرائط وتضمينها في موقع الويب.

2- تحدد الموقع الذي تريد إضافته الخريطة إليه:

يجب علينا تحديد الموقع الذي نريد إضافة الخريطة إليه، وتحديد النطاق الجغرافي الذي نريد إظهاره في الخريطة. يمكننا استخدام الإحداثيات الجغرافية (مثل خط العرض وخط الطول) أو العنوان لتحديد الموقع.

3- اضافة رمز الخريطة إلى صفحة الويب:

بعد تحديد الموقع، يمكننا إضافة رمز الخريطة إلى صفحة الويب الخاصة بنا. يمكن القيام بذلك باستخدام لغة HTML وإضافة عنصر الخريطة في الصفحة، أو باستخدام أدوات تحرير المواقع الإلكترونية المتاحة عبر الإنترنت.

4- تخصيص الخريطة:

يمكننا تخصيص الخريطة بحسب احتياجات الموقع الخاص بنا، مثل تغيير الحجم وتحديد النطاق الزمني والتبديل بين العرض الثنائي والثلاثي الأبعاد، وإضافة علامات ومعلومات إضافية حول الموقع.

5- اختبار الخريطة:

يجب علينا اختبار الخريطة على صفحة الويب الخاصة بنا للتأكد من عملها بشكل صحيح وتحديد أي مشاكل تحتاج إلى حل.

تطبيق عملي على طريقة اضافة الخرائط لصفحات الويب

توفر الشركات نظام الخرائط مثل Google التي تقدم Google maps وهو ما تعتمد عليه كثير في الأعمال هذا لأن Google maps وهو الأكثر انتشاراً واستخداماً بين الناس . وتسمح Google بتوليد الكود الخاص بإضافة الخرائط إلى موقعك الإلكتروني من خلال زيارة الموقع Google Maps Generator .

عند زيارة الموقع يمكنك تحديد العنوان الافتراضي الذي يظهر على الخريطة في موقعك الإلكتروني ثم النقر على ايقونة Generate my code سيتم توليد الكود الخاص بك وماعليك سوى نسخه وإدراجه في صفحة الويب لنرى كيف يعمل.

عند زيارة الموقع Google Maps Generator وتحديد موقع السعودية Saudi Arabia وتحديد الطول والعرض لحجم الخريطة على الصفحة ستظهر الصفحة التالية

ثم بالنقر على ايقونة توليد الكود "Generate my code " سيتولد الكود التالي :


...........
<h1>==========  Google Maps ===========</h1>
<div style="width: 700px;position: relative;">
	<iframe width="700" height="440" src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=Saudi%20Arabia+(Saudi%20Arabia)&amp;ie=UTF8&amp;t=&amp;z=10&amp;iwloc=B&amp;output=embed"
        	frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
	</iframe>
	<div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;">
       		<small style="line-height: 1.8;font-size: 2px;background: #fff;">Powered by 
                	<a href="http://www.googlemapsgenerator.com/ja/">gmapgen jp</a> & <a href="https://nouc.se/lan-utan-uc/decidas/">lån med decidas</a>
        	</small>
        </div>
	<style>
        	#gmap_canvas img{max-width:none!important;background:none!important}
	</style>
</div>
...........

بنفس الطريقة السابقة يمكن إدراج خرائط Bing Maps وهنا علينا زيارة الموقع الالكتروني Embed Bing Maps Code Generator في هذه الحالة سيكون الكود الخاص بإضافة الخرائط كتالي :


...........
<h1>======== Bing Maps ===================</h1>
<div style="height:400px;width:600px;">
	<div id="bing-map" style="width: 100%; height: 100%;">
        </div>
</div>
<script>
	function loadMap()
		{var map = new Microsoft.Maps.Map(document.getElementById("bing-map"),
        		{zoom: 13,mapTypeId: Microsoft.Maps.MapTypeId.road});
			Microsoft.Maps.loadModule("Microsoft.Maps.Search", function ()
			 {var searchManager = new Microsoft.Maps.Search.SearchManager(map);
			var requestOptions = {bounds: map.getBounds(),where: "saudi aradia ",callback: 
			function (answer, userData) 
				{map.setView({ center: new Microsoft.Maps.Location(answer.results[0].location.latitude, answer.results[0].location.longitude) });
             		map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));}};
            	 searchManager.geocode(requestOptions);});}
</script>
<script type="text/javascript"
	src="https://www.bing.com/api/maps/mapcontrol?key=AkLj1p_g1w7lFb8lJZ-XnicObnu2-ydEpmn6eryraluxl_x3bDo0Jx6w58b7ZJt2&callback=loadMap" async defer>
            </script>
<a href="https://bingmapsgenerator.github.io" style="display:none;">bing map generator</a>
...........

تطبيق الأكود في الأمثلة في لهذا المقال موجود على الرابط هنــا .

في النهاية، يمكن القول إن استخدام الخرائط في المواقع الإلكترونية يساعد على تحسين تجربة المستخدم وتوفير معلومات دقيقة حول الموقع، ويعزز موثوقية الموقع ويجعله يبدو أكثر احترافية. ولإضافة الخرائط إلى صفحات الويب الخاصة بنا، يجب علينا اختيار خدمة الخرائط المناسبة وتحديد الموقع وإضافة رمز الخريطة وتخصيص الخريطة واختبارها للتأكد من عملها بشكل صحيح.

خرائط الويب Web Maps