ما هي منصة Google Maps Api ؟

raheel · 07-04-2019, 06:11 PM

تعتبر Geocode من أهم الخدمات التي تقدمها لنا منصة خرائط غوغل (Google Maps Api) كونها تمكننا من الحصول معلومات جغرافية هامة كإحداثيات موقع ما (Latitude & Longitude) انطلاقا من العنوان أو اسم المنطقة، والعكس صحيح، أي أن Geocoding Api تمكننا كذلك من الحصول على عنوان نقطة ما على الخريطة انطلاقا من إحداثياتها.

الحصول على الإحداثيات انطلاقا من العنوان

يتم الحصول على هذه المعلومات من geocode بطريقة غير متزامنة (Asynchronous) وبالتالي فدالة geocode تقبل عاملين (بارامترين) الأول عبارة عن كائن (litteral object) يحتوي على المعلومات التي نود إرسالها لمنصة geocode api، أما البارامتر الثاني فهو عبارة عن دالة callback وفي داخلها نقوم باستقبال المعلومات التي أتتنا من geocode.
هذه الإجابة تأتينا على شكل مصفوفة (Array) تضم العديد من المعلومات كالعنوان الكامل، الإحداثيات، إسم المكان، …إلخ
ونحن ما يهمنا الآن هي الإحدثيات (Latitude & Longitude) ويتم استخراجها من المصفوفة كالتالي :
var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } <body onload="initialize()"> <div id="map-canvas" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="codeAddress()"> </div> </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}

<body onload="initialize()">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>

أولا قمنا بإنشاء خريطة جديدة كما تعلمنا في الدرس الأول وذلك وسط الدالة initialize حيث أنشأنا كذلك كائن اسمه geocoder من الكلاس google.maps.Geocoder. بعد ذلك أنشأنا دالة أسميناها codeAddress تنفذ عند الضغط على الزر (inupt button) بعد أن نقوم بأخذ النص الموجود داخل حقل العنوان (input address) ونقوم بتمريره لدالة geocoder.geocode.
بعد ذلك، في داخل دالة الرد (callback) نقوم بعمل شرط من أجل التأكد من نجاح عملية اتصال geocoder بخوادم غوغل، ثم نأخذ الإحداثيات من المصفوفة التي تأتينا في الجواب ونستعملها حسب الحاجة.
*في هذا المثال، أضفنا علامة(Marker) إلى الخريطة مستغلين الإحداثيات التي حصلنا عليها، والنتيجة في هذا الرابط.
الحصول على العنوان انطلاقا من الإحداثيات

خدمة Geocoding تمكننا كذلك من عكس العملية، أي الحصول على عنوان نصي لمكان معين (human-readable address) انطلاقا من إحداثياته.
var geocoder; var map; var infowindow = new google.maps.InfoWindow(); var marker; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(40.730885,-73.997383); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function codeLatLng() { var input = document.getElementById("latlng").value; var latlngStr = input.split(",",2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(11); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } } else { alert("Geocoder failed due to: " + status); } }); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

function codeLatLng() {
var input = document.getElementById("latlng").value;
var latlngStr = input.split(",",2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}

نلاحظ في المثال الثاني، أننا مررنا هذه المرة بارامتر الإحداثيات (Latitude & Longitude) عوض العنوان في المثال الأول، وداخل دالة الرد callback نقوم مرة أخرى بالتأكد من نجاح عملية الإتصال، تماما كما رأينا في المثال الأول، وبعد ذلك نقوم باسترجاع العنوان الذي يأتينا على عدة هيئات وأشكال نختار منها الشكل الذي يناسبنا.
المثال السابق يعطينا لائحة عناوين كما يلي :
results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA", results[1].formatted_address: "Williamsburg, NY, USA", results[2].formatted_address: "New York 11211, USA", results[3].formatted_address: "Kings, New York, USA", results[4].formatted_address: "Brooklyn, New York, USA", results[5].formatted_address: "New York, New York, USA", results[6].formatted_address: "New York, USA", results[7].formatted_address: "United States"
1
2
3
4
5
6
7
8

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",
results[1].formatted_address: "Williamsburg, NY, USA",
results[2].formatted_address: "New York 11211, USA",
results[3].formatted_address: "Kings, New York, USA",
results[4].formatted_address: "Brooklyn, New York, USA",
results[5].formatted_address: "New York, New York, USA",
results[6].formatted_address: "New York, USA",
results[7].formatted_address: "United States"

ونحن اخترنا منها العنوان الثاني :
results[1].formatted_address
1

results[1].formatted_address

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

07-04-2019, 06:11 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 ما هي منصة Google Maps Api ؟ ما هي منصة Google Maps Api ؟ تعتبر Geocode من أهم الخدمات التي تقدمها لنا منصة خرائط غوغل (Google Maps Api) كونها تمكننا من الحصول معلومات جغرافية هامة كإحداثيات موقع ما (Latitude & Longitude) انطلاقا من العنوان أو اسم المنطقة، والعكس صحيح، أي أن Geocoding Api تمكننا كذلك من الحصول على عنوان نقطة ما على الخريطة انطلاقا من إحداثياتها. الحصول على الإحداثيات انطلاقا من العنوان يتم الحصول على هذه المعلومات من geocode بطريقة غير متزامنة (Asynchronous) وبالتالي فدالة geocode تقبل عاملين (بارامترين) الأول عبارة عن كائن (litteral object) يحتوي على المعلومات التي نود إرسالها لمنصة geocode api، أما البارامتر الثاني فهو عبارة عن دالة callback وفي داخلها نقوم باستقبال المعلومات التي أتتنا من geocode. هذه الإجابة تأتينا على شكل مصفوفة (Array) تضم العديد من المعلومات كالعنوان الكامل، الإحداثيات، إسم المكان، …إلخ ونحن ما يهمنا الآن هي الإحدثيات (Latitude & Longitude) ويتم استخراجها من المصفوفة كالتالي : var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } <body onload="initialize()"> <div id="map-canvas" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="codeAddress()"> </div> </body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } <body onload="initialize()"> <div id="map-canvas" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="codeAddress()"> </div> </body> أولا قمنا بإنشاء خريطة جديدة كما تعلمنا في الدرس الأول وذلك وسط الدالة initialize حيث أنشأنا كذلك كائن اسمه geocoder من الكلاس google.maps.Geocoder. بعد ذلك أنشأنا دالة أسميناها codeAddress تنفذ عند الضغط على الزر (inupt button) بعد أن نقوم بأخذ النص الموجود داخل حقل العنوان (input address) ونقوم بتمريره لدالة geocoder.geocode. بعد ذلك، في داخل دالة الرد (callback) نقوم بعمل شرط من أجل التأكد من نجاح عملية اتصال geocoder بخوادم غوغل، ثم نأخذ الإحداثيات من المصفوفة التي تأتينا في الجواب ونستعملها حسب الحاجة. في هذا المثال، أضفنا علامة(Marker) إلى الخريطة مستغلين الإحداثيات التي حصلنا عليها، والنتيجة في هذا الرابط. الحصول على العنوان انطلاقا من الإحداثيات* خدمة Geocoding تمكننا كذلك من عكس العملية، أي الحصول على عنوان نصي لمكان معين (human-readable address) انطلاقا من إحداثياته. var geocoder; var map; var infowindow = new google.maps.InfoWindow(); var marker; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(40.730885,-73.997383); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function codeLatLng() { var input = document.getElementById("latlng").value; var latlngStr = input.split(",",2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(11); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } } else { alert("Geocoder failed due to: " + status); } }); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 var geocoder; var map; var infowindow = new google.maps.InfoWindow(); var marker; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(40.730885,-73.997383); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function codeLatLng() { var input = document.getElementById("latlng").value; var latlngStr = input.split(",",2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(11); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } } else { alert("Geocoder failed due to: " + status); } }); } نلاحظ في المثال الثاني، أننا مررنا هذه المرة بارامتر الإحداثيات (Latitude & Longitude) عوض العنوان في المثال الأول، وداخل دالة الرد callback نقوم مرة أخرى بالتأكد من نجاح عملية الإتصال، تماما كما رأينا في المثال الأول، وبعد ذلك نقوم باسترجاع العنوان الذي يأتينا على عدة هيئات وأشكال نختار منها الشكل الذي يناسبنا. المثال السابق يعطينا لائحة عناوين كما يلي : results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA", results[1].formatted_address: "Williamsburg, NY, USA", results[2].formatted_address: "New York 11211, USA", results[3].formatted_address: "Kings, New York, USA", results[4].formatted_address: "Brooklyn, New York, USA", results[5].formatted_address: "New York, New York, USA", results[6].formatted_address: "New York, USA", results[7].formatted_address: "United States" 1 2 3 4 5 6 7 8 results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA", results[1].formatted_address: "Williamsburg, NY, USA", results[2].formatted_address: "New York 11211, USA", results[3].formatted_address: "Kings, New York, USA", results[4].formatted_address: "Brooklyn, New York, USA", results[5].formatted_address: "New York, New York, USA", results[6].formatted_address: "New York, USA", results[7].formatted_address: "United States" ونحن اخترنا منها العنوان الثاني : results[1].formatted_address 1 results[1].formatted_address المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
ما هي اساليب وتقنيات سيو 2019 ؟	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	27-07-2019 11:01 AM
كل شء تريد معرفته عن جوجل Google	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	10-04-2019 09:36 PM
كل ما تريد معرفته حول استخدام خرائط جوجل في التسويق	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	08-04-2019 06:57 PM
ما هي مميزات تحليلات جوجل ( Google Analytics ) ؟	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	08-04-2019 06:49 PM
ما هي طريقة استخدام محرك تطبيقات جوجل Google App Engine مثل CDN	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	07-04-2019 06:49 PM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)