ملف كامل عن طرق إضافة خرائط جوجل إلى المواقع

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

خرائط جوجل Google maps : هى خدمة مجانية مقدمة من شركة جوجل العالمية ، وتعتبر من أفضل خدماتها التى تقوم بدعمها بشكل مستمر.

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

 

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

يمكن أيضًا إضافة ميزة التجول الإفتراضى "Street view" فى العديد من البلدان والمدن فى جميع أنحاء العالم.

إضافة خريطة العالم بالكامل للمواقع

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

 أويمكن  نسخ رابط الخريطة داخل كود Iframe كالتالى:

إنسخ الكود التالى داخل موقعك

<iframe frameborder="0" height="450" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d130738366.7210043!2d0!3d0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1406632224957" style="border: 0;" width="850"></iframe></div>

إضافة خريطة لمكان محدد داخل موقعك

 1- توجه إلى موقع خرائط جوجل ثم قم بالبحث عن المكان الذى تريد أن تعرض له الخريطة

2 - ثم إضغط على الترس أسفل الصفحة وإختر " مشاركة الخريطة وتضمينها"

3- إضغط تضمين الخريطة داخل النافذة التى ستظهر

4- إنسخ الكود الناتج بموقعك

عرض خريطة جوجل مناسبة جميع الشاشات Responsive Google Map

عند تضمين الخريطة بالطرق السابقة تكون ذات أبعاد ثابتة وربما تكون غير مناسبة للعرض على شاشات أجهزة الموبايل أو التابلت ولكن بإضافة بعض أكواد Css إلى الكود الخريطة ستكون مناسبة للعرض على جميع أنواع الشاشات

أضف هذا الكود قبل كود الخريطة

<style>

   .google-maps {

      position: relative;

      padding-bottom: 75%;

      height: 0;

      overflow: hidden;

   }

   .google-maps iframe {

      position: absolute;

      top: 0;

      left: 0;

      width: 100% !important;

      height: 100% !important;

   }

</style>

إقرأ أيضًا:كيف يتوافق قالب مدونتك على بلوجر مع شاشات الموبايل ؟

أضف خرائط جوجل مع ميزة التجول الإفتراضى  Street View

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

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

إنسخ الكود التالى داخل موقعك

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script type="text/javascript">
var myCenter=new google.maps.LatLng(30.028137, 31.260420);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:18,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.setTilt(0);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googleMap" style="width:500px;height:380px;"></div>

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

معاينة

لمعرفة إحداثيات "خطوط الطول وخطوط العرض"  أى مكان على خرائط جوجل إتبع الآتى:

1. انقر بزر الماوس الأيمن على الموقع على الخريطة.
2. حدد ماذا هنا؟
3. أسفل مربع البحث، ستظهر بطاقة معلومات تحتوي على الإحداثيات.
4. إنسخ الأرقام وأضفها إلى الكود السابق

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

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة