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

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

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

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

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

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

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

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

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

<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>

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

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

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

<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>

كيفية التجول الإفتراضى داخل الخريطة:

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

إقرأ المزيد http://www.condaianllkhir.com/2014/08/haram-mosque-nabawi-map.html#ixzz39vE7X3CM

» اضافة خريطة الحرم المكى والمسجد النبوى لموقعك مع التجول الافتراضى
» كيف تصمم قوائم منسدلة لموقعك
» تشريع الحج إلى البيت الحرم
» ختمة الحرم المكي رمضان 1434
» أحرمت من الميقات ولم تنزع النقاب إلا في الحرم