اضافة خريطة الحرم المكى والمسجد النبوى لموقعك مع التجول الافتراضى

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

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

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

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

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

كود خريطة المسجد الحرام بمكة المكرمة 

معاينة

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

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

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

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>

كود خريطة المسجد النبوى بالمدينة المنورة

معاينة

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

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

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

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. انقر على الجزء المحدد على الخريطة للدخول إلى التجوّل الافتراضي في ذلك الموقع.

إقرأ أيضًا:أضف أداة تحويل التاريخ الميلادى إلى هجرى لموقعك

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

بقلم Dr.Rasha Omran

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