منتديات احفاد الرسول

بسم الله الرحمن الرحيم قُلْ هُوَ اللَّهُ أَحَدٌ اللَّهُ الصَّمَدُ لَمْ يَلِدْ وَلَمْ يُولَدْ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ
 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخولتفسير القران الكريم قراءة القران الكريماذاعات القران الكريمكتبقنواتقصص رائعة منتديات الياس عيساوي بث قناة الجزيرةاوقات الصلاةاستماع للقراءن الكريم
دليل سلطان للمواقع الإسلامية

شاطر | 
 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
eliasissaoui
Admin
avatar

ذكر عدد المساهمات : 16999
تاريخ التسجيل : 04/07/2013
الموقع : https://www.youtube.com/watch?v=QriWAmC6_40

مُساهمةموضوع: ملف كامل عن طرق إضافة خرائط جوجل إلى المواقع    السبت أغسطس 09, 2014 12:49 pm

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


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


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


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







إقرأ المزيد http://www.condaianllkhir.com/2014/07/google-map-embeded.html#ixzz39vExRC8b


بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ  قُلْ هُوَ اللَّهُ أَحَدٌ (1) اللَّهُ الصَّمَدُ (2) لَمْ يَلِدْ وَلَمْ يُولَدْ (3) وَلَمْ يَكُنْ لَهُ كُفُوًا أَحَدٌ (4) 

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://info-noor-islam.ahlamontada.com
 
ملف كامل عن طرق إضافة خرائط جوجل إلى المواقع
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احفاد الرسول :: منتدى: المعلوميات :: إضافات بلوجر المميزة Blogger widget-
انتقل الى:  
تعليقات فيسبوك

تابعنا على فيسبوك
online
تويتر طائر


هذه الرسالة تفيد أنك غير مسجل .

و يسعدنا كثيرا انضمامك لنا ...

للتسجيل اضغط هـنـا