مساحة إعلانية

2014-07-30

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

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

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

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

خرائط جوجل Google maps : هى خدمة مجانية مقدمة من شركة جوجل العالمية ، وتعتبر من أفضل خدماتها التى تقوم بدعمها بشكل مستمر.
وإضافة خرائط جوجل للمواقع والمدونات تقدم للزائرين خدمة معرفة الأحداث والأماكن وتجعل الزوار أكثر تفاعلية خصوصًا عند تحديد أماكن معينة على الخريطة ذات صلة بالمشاركات التى يحتوى عليها الموقع.
google map icon 
ويمكن عرض خرائط جوجل بأكثر من شكل داخل المواقع فيمكن عرضها فى الوضع البسيط كتخطيط خريطة للمدن والشوارع أو يمكن عرض خرائط بالقمر الصناعى لتعرض صورة ثلاثية الأبعاد.
يمكن أيضًا إضافة ميزة التجول الإفتراضى "Street view" فى العديد من البلدان والمدن فى جميع أنحاء العالم.

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

 يمكن ذلك بالتوجه إلى Google Map وإختيار حجم الخريطة المناسب وطريقة العرض سواء كان عرض كخريطة أو صور بالقمر الصناعى ثم تضمين الخريطة ونسخ الكود الذى سيظهر بموقعك.
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- إنسخ الكود الناتج بموقعك
google map

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



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

هناك 4 تعليقات

  1. هل يمكن اضافة خريطة قوقل في موقعي وتحديد المواقع عليه بحيث كل المعلومات المدخلة تكون محفوظة فقط في قاعدة البيانات الخاصه بموقعي

    ردحذف
  2. مشكووور علي الشرح الرائع

    ردحذف
  3. اين يتم وضع الرابط بالتحديد فى المدونة لوسمحت

    ردحذف
    الردود
    1. اضف الكود داخل مشاركة فى تبويب html

      حذف

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


لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | عودة الى الاعلى
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2016 ©

تصميم كن مدون