• 0
Fuad-Prince

استخدام خرائط Google

سؤال

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

 

إنشغلت بالفترة الأخيرة بمشروع تطبيق انترنت, الأمر الذي شغلني هو أنه كان يتطلب التعامل مع خرائط 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;	});

 

وبهذا نحصل على الإحداثيات ومستوى التقريب ويمكن إرسالها إلى أي صفحة تطبيق ويب لإستخدامها.

 

بالمرفقات المثال الذي عملنا عليه:

google map sample.rar

 

4

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

2 إجابة على هذا السؤال .

  • 0

السلام عليكم

 

بارك الله فيك على هذا الموضوع الهام فعلاً

 

لاحظت أن الإحداثيات عند تغيير موضع الخريطة لا تتغير بسبب أن الإحداثيات التي يتم جلبها هي إحداثيات العلامة وليس الخريطة , ولجلب إحداثيات نقطة المنتصف للخريطة يكون بإستخدام الدالة getCenter فتصبح الدالة على النحو التالي :

//if the center of the map has changedgoogle.maps.event.addListener(map, 'center_changed', function(){    lat = map.getCenter().lat(); //set lat to current latitude where the marker is plotted    lng = map.getCenter().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;});

- عذراً على المداخلة ولكن حتى تكتمل الفائدة من الموضوع

 

دمت بخير

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أخي ahmedsaoud31 شكراً جزيلاً على مداخلتك المفيدة.

ولاستخدامها أنت لست بحاجة أبداً للعلامة نهائياً.

 

لقد كنت مخطئاً باستخدامها في مثالي فلم يكن لها أي داع, ويمكن حذفها دون أن تؤثر على أداء الصفحة, حيث  أنني عندما عملت على مشروعي كان الهدف أخذ احداثيات نقطة محددة بواسطة العلامة, والاحداثيات التي يتم أخذها هي احدائيات العلامة.

و كما قلت من قبل, كنت مبتدأ في مجال خرائط Google

 

وبالتالي فإن الصفحة ممكن أن تكون بأحد الطريقتين,

اما أخذ الاحدائيات بواسطة العلامة (لتحديد نقطة محددة)

أو أخذ الاحداثيات بواسطة الخريطة فقط وذلك يفيد بتحديد مساحة بأخذ احداثيات نقطة الوسط لها.

 

بالمرفقات يوجد المثالين:

Google Map Sampels.rar

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .