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

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

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

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

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