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

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

بسم الله والصلاة والسلام على اشرف خلق الله 

سيدنا محمد صلى الله عليه وسلم 

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

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

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

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

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

أو يمكن نسخ رابط الخريطة داخل كود 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 Maps

عند تضمين الخريطة بالطرق السابقة تكون ذات أبعاد ثابتة وربما تكون غير مناسبة للعرض على شاشات أجهزة الموبايل أو التابلت ولكن بإضافة بعض أكواد 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 - إنسخ الأرقام وأضفها إلى الكود السابق