كيفية استخدام خرائط جوجل في مواقع الويب, من المهمات الشائعة في تطبيقات الويب هي استخدام الخرائط ، حيث نعرف أهمية خرائط جوجل واستخداماتها ، ولكن ماهي تلك الأنظمة التي تستخدم الخرائط في مواقع الويب؟ توجد العديد من التطبيقات والتي منها نظام التتبع والمراقبة عبر تقنية GPS على الهاتف المحمول ، يسجل خطوط الطول ودوائر العرض و يرسلها مباشرة الى قاعدة البيانات ويتم استعراضها على موقع الويب ، ايضا كثير من المواقع تستخدم الخرائط مثل الفيسبوك وغيرها، ولكن كيف نستخدمها في مواقع الويب؟
من الرائع ان جوجل تسمح باستخدام خرائطها على أي موقع ، وأضافت مكتبة (API) خاصة بخرائط جوجل لتضمينها واستخدامها في موقعك ، وفي هذه المقالة سنتطرق لكيفية استخدام مكتبة خرائط جوجل في صفحات الويب ، وهذا الكود بالكامل يمكنك حفظه في صفحة HTML ، وتجربة ذلك عند الاتصال بالأنترنت،
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>
كيفية استخدام خرائط جوجل في مواقع الويب
</title>
</head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(12.81222,45.02917),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("gMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
body{
background:#000;
color: #bbb;
}
#gMap{
width:700px;
height:450px;
background: #eef1f2;
color:#000;
margin-right: auto;
margin-top: 30px;
margin-left: auto;
border:1px solid #fff;
outline: 1px solid #999;
}
</style>
<body>
<div id="gMap"></div>
</body>
</html>
شرح كود استخدام خرائط جوجل في مواقع الويب
1 – كود استدعاء مكتبة خرائط جوجل لموقك بهذا الكود :
<script src="https://maps.googleapis.com/maps/api/js"></script>حيث اذا كنت تريد استخدام خرائط جوجل بشكل رسمي على موقعك مجانا ، يجب ان تذهب الى الرابط console.developers.google.com واستخراج رمز KEY للاستخدام المجاني ، ويتم اضافته للرابط بهذه الطريقة :
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>2 – كود خصائص الخريطة ، يتم تمريرها عبر كائن من نوع JSON كالتالي :
var mapProp = {
center:new google.maps.LatLng(12.81222 , 45.02917),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
شرح الخصائص المطلوبة للتحكم بإعدادات الخريطة :
center : تحديد الموقع بخطوط الطول ودوائر العرض.
zoom : تحديد نسبة التكبير الافتراضية ، حيث بإمكانك تكبير وتصغير الخريطة من الواجهة لاحقا.
mapTypeId : تحديد نوع الخريطة التي تريد ظهورها ، وتوجد أربعة أنواع وهي :
ROADMAP : القيمة الإفتراضية ، وهي عرض خريطة عادية مع أسماء المناطق.
SATELLITE : عرض صوري ، من الأقمار الصناعية.
HYBRID : هجين من الطريقتين السابقتين.
TERRAIN : عرض التضاريس من جبال وانهار.
3 – انشاء الحاضن للخريطة:
<div id="gMap"></div>
انشاء عنصر div لعرض الخريطة فيه ، مع إمكانية التحكم بتنسيقة بال CSS.
4 – انشاء كائن الخريطة :
var map=new google.maps.Map(document.getElementById("gMap"),mapProp);الكود السابق يستخدم لإنشاء خريطة جديدة داخل العنصر div .
5 – كود استدعاء الدالة initialize عند تحميل الصفحة :
google.maps.event.addDomListener(window, 'load', initialize);كانت هذه طريقة تضمين خرائط جوجل في مواقع الويب ، حيث يمكنك التوسع اكثر في ذلك اذا كان لديك مشروع يعتمد على خرائط جوجل بشكل كامل.
