بسم الله الرحمن الرحيم
إنشغلت بالفترة الأخيرة بمشروع تطبيق انترنت, الأمر الذي شغلني هو أنه كان يتطلب التعامل مع خرائط Google لتحديد الأماكن وتخزين إحداثياتها, ولكوني لم أتعامل معها من قبل فقد بحثت بالكثير من المواقع العربية ولم أجد ما أحتاجه, وموقع developers.google لا يعمل في بلدي, ولكن والحمد لله وبعد عناء البخث توصلت إلى النتيجة المطلوبة وأنهيت المشروع.
ولكي لا يعاني أحد غير مثل ما عانيت سأضع هنا خلاصة ما تعلمته عن خرائط Google, التطبيق سيكون بواسطة Javascript
الخطوة الأولى إنشاء صفحة HTML فارغة كما يلي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>مثال خرائط Google</title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
</body>
</html>وفي قسم Head قبل وسم النهاية سنضع السطر الذي يقوم بجلب مكتبة خرائط Google:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD9uiyFbXfbSOsY6umTUtl4_rvl_LkQKxE&sensor=false&libraries=places"></script>
والآن سنحدد المكان الذي ستظهر به الخريطة في قسم Body كوسم DIV ولنعطه ID مميز ويمكن تحديد أبعاده بواسطة CSS كما يلي:
<div id="map_canvas" style="width: 500px; height: 300px"></div>
هكذا يكون تصميم الصفحة جاهزاً والآن ننتقل إلى البرمجة, أولاً سنعرف ثلاث متغيرات تعبر عن: الخريطة, مستوى التقريب, الإحداثيات:
var map; var zoom=5; var lat = 34.99697127696379; //default latitude var lng = 36.885860443114325; //default longitude var homeLatlng = new google.maps.LatLng(lat, lng); //set default coordinates
للحصول على الإحداثيات عرفنا رقمين الأول هو خط العرض والثاني هو خط الطول, وتم تحويلهما إلى كائن الإحداثيات homeLatlng بواسطة دوال خرائط Google.
ثم سنعرف كائن يجمع الإحداثيات ومستوى التقريب ونوع الخريطة (وهذا الكائن مطلوب لإنشاء الخريطة):
var myOptions = {
center: new google.maps.LatLng(lat, lng), //set map center
zoom: zoom, //set zoom level to 17
mapTypeId: google.maps.MapTypeId.ROADMAP //set map type to road map
};تم تحديد الخريطة كخريطة عادية ثنائية الأبعاد بواسطة MapTypeId .
بعدها ننشئ الخريطة باستخدام المعلومات التي حددناها وتحديد مكان ظهور الخريطة في الصفحة:
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); //initialize the mapوهكذا ستظهر الخريطة على الصفحة.
قد تحتاج لعلامة لتحديد مكان معين وأخذ إحداثياته بواسطة هذه الخريطة, لابأس الأمر بسيط, قم بتعريف كائن للعلامة وليكن homeMarker وتحديد مكانه الإفتراضي بالإحداثيات التي حددناها فوق (أو يمكنك تحديد أحداثيات أخرى) وتحديد الخريطة التي سيطبق عليها وتحديد إمكانية تحريكه إما true أو false كما يلي:
var homeMarker = new google.maps.Marker({ //set marker
position: homeLatlng, //set marker position equal to the default coordinates
map: map, //set map to be used by the marker
draggable: true //make the marker draggable
});وهكذا ستظهر علامة حمراء في الخريطة, ولكن في وضعها الحالي لا فائدة منها إطلاقاً لأننا لم نأخذ الإحدائيات بعد.
فلننشأ مربع نص لتخزين الإحداثيات ومربع نص آخر لتخزين رابط الخريطة ورابط لتخزين رابط صورة الخريطة وذلك في قسم Body وإعطاء كل خانة ID مميز:
<input name="coords" id="coords" value=" " size="100" eadonly> <br> <input name="map_url" id="map_url" value=" " size="100" readonly> <br> <a id="map_img" target="_blank" href="">Get Image</a>
ولنعد إلى البرمجة ونضيف مستمع حدث للخريطة عند تحريكها ونجعلها تتطبق دالة تقوم بأخذ الإحداثيات الجديدة ومستوى التقريب الجديد ومن ثم وضعها في الخانات السابقة كما يلي:
google.maps.event.addListener(map, 'center_changed', function(){
lat = homeMarker.getPosition().lat(); //set lat to current latitude where the marker is plotted
lng = homeMarker.getPosition().lng(); //set lng current latitude where the marker is plotted
zoom = map.getZoom();
document.getElementById('map_img').href="http://maps.google.com/maps/api/staticmap?center=" + lat + ',' + lng + "&zoom=" + zoom + "&size=600x400&maptype=roadmap&sensor=false&markers=color:red|label:none|" + lat+ ',' + lng;
document.getElementById('coords').value=lat+","+lng;
document.getElementById('map_url').value="http://maps.google.com/?q="+lat+","+lng+"&z="+zoom;
});ماذا إذا قام المستخدم بتحريك العلامة ولم يحرك الخريطة, طبعاً لن تتغير الإحداثيات ولحل هذه المشكلة نضيف مستمع حدث للعلامة ونجعلها تتطبق نفس الدالة السابقة:
google.maps.event.addListener(homeMarker, 'position_changed', function(){
lat = homeMarker.getPosition().lat(); //set lat current latitude where the marker is plotted
lng = homeMarker.getPosition().lng(); //set lat current longitude where the marker is plotted
zoom = map.getZoom();
document.getElementById('map_img').href="http://maps.google.com/maps/api/staticmap?center=" + lat + ',' + lng + "&zoom=" + zoom + "&size=600x400&maptype=roadmap&sensor=false&markers=color:red|label:none|" + lat + ',' + lng;
document.getElementById('coords').value=lat+","+lng;
document.getElementById('map_url').value="http://maps.google.com/?q="+lat+","+lng+"&z="+zoom;
});
وبهذا نحصل على الإحداثيات ومستوى التقريب ويمكن إرسالها إلى أي صفحة تطبيق ويب لإستخدامها.
بالمرفقات المثال الذي عملنا عليه: