البحث في الموقع

لا يكاد يخلو أي موقع ويب من وجود خرائط Google فمن خلال وضع خريطة على الموقع الخاص بك فإنك تعطي تأثيرًا غنيًا ومستوى أعلى للتفاعل بين المستخدمين. سأقوم في هذا المقال بشرح كيفيّة استخدام خرائط غوغل وإضافتها إلى صفحة الويب بالإضافة إلى كيفيّة تحديد أكثر من موقع بنفس الوقت على نفس الخريطة، وشرح بعض المزايا الـتي يمكنك إضافتها إلى خريطتك. يمكنك تحميل الملف المصدري للمثال الموضح في هذا الدرس. إستخدام مكتبة Google APIمكتبة Google Maps API هي عبارة عن مكتبة جافاسكربت ولنتمكن من إستخدام مكتبة Google API قم بإضافة الـسكربت الـخاص بذلك. <script src ="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> إنشاء الخريطةقم الآن بإنشاء div بالأبعاد الـتي تريد أن تظهر بها الـخريطة وقم بإعطاءه "id="map. <div id="map" style="width: 600px; height: 400px;" ></div>الآن لنقم بإنشاء السكربت لإظهار الخريطة، يجب عليك عند وضع أي خريطة أن تقوم بتحديد الإحداثيات: خط الطول longitude وخط العرض latitude ضمن الخاصية center. يمكنك معرفة الإحداثيات لمنطقة ما بالدخول لموقع LatLong وكتابة اسم المدينة أو المنطقة. في هذا المثال ستعرض الخريطة موقع تركيا Turkey. لنقم الآن ضمن الدالة {} ()function initialize، بتحديد خصائص الـخريطة ضمن الـمتغير mapProp، مثل: الموقع الذي سيظهر عند تحميلها، نوعها، وحجم الـتكبير الذي نريده zoom. كما هو موضح في الـكود الـتالـي: <script type="text/javascript"> function initialize() { var mapProp = { center: new google.maps.LatLng(38.963745, 35.243322), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; } </script> نستخدم الخاصية zoom لتحديد البعد الذي نريده للمكان (قريب – بعيد).الخاصية mapTypeId تحدد نوع الخريطة الذي سيظهر:ROADMAP ( الخريطة العادية 2D map)SATELLITE (خريطة مصورة)HYBRID (خريطة مصورة بالإضافة الى أسماء الطرق والمدن)TERRAIN (خريطة تتضمن الجبال والأنهار…الـخ)لنقم الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div: var map = new google.maps.Map(document.getElementById("map"), mapProp);ثم إضافة الحدث DOM listener الذي يقوم بتنفيذ الدالة ()initialize عند تحميل صفحة الويب: google.maps.event.addDomListener(window, 'load', initialize);ليصبح الكود على هذا الشكل: <script type="text/javascript"> function initialize() { var mapProp = { center: new google.maps.LatLng(38.963745, 35.243322), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script>ستظهر لك الخريطة بهذا الشكل: وضع محددات Markersإضافة محدد واحدلنقم الآن بتحديد موقع معين ووضع محدد (marker). أولًا قم بتعريف مصفوفة تحتوي على الإحداثيات (خط الـطول وخط الـعرض) للمدينة أو البلد أو الموقع المعين الذي تريد تحديده. مثلًا مدينة اسطنبول Istanbul: var myLatLng = {lat: 41.008238, lng: 28.978359 };هنا سأقوم بإضافة محدد واحد ثم سأشرح كيف يمكننا إضافة أكثر من محدد. الآن نعطي للخاصية center الـمتغير myLatLng: var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng });ثم نقوم بتعريف الـمحدد وإعطاء للخاصية position الـمتغير myLatLng: var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' });سيظهر بهذا الشكل: إضافة أكثر من محدد على نفس الـخريطةقم بتعريف مصفوفة تحتوي على إحداثيات المواقع الـتي تود تحديدها، سأقوم بتحديد 6 مدن: Istanbul, Antalya, Ankara, Trabzon, Bursa, Adana كما هو موضح أدناه: var myLocations = [ ['Istanbul', 41.008238, 28.978359, 1], ['Antalya', 36.896891, 30.713323, 2], ['Ankara', 39.933363, 32.859742, 3], ['Trabzon', 41.002697, 39.716763, 4], ['Bursa', 40.188528, 29.060964, 5], ['Adana', 36.991419, 35.330829, 6] ];الآن عند تعريف المحدد قم بعمل for loop حلقة تكرار وتعريف متغير i ومن ثم إعطاء الـمصفوفة myLocations للخاصية position: var marker, i; for (i = 0; i < myLocations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(myLocations[i][1], myLocations[i][2]), map: map }); }وهذه هي المواقع التي قمنا بتحديدها: وضع محدد مع لصيقة (label) عند الـنقر على مكان معينسأقوم هنا بشرح فكرة عن الـevents في Google map ثم سأتطرق فيما بعد لشرح الـevents بالتفصيل في مقال مقبل إن شاء الله. الآن لنرى كيف يمكننا عند الضغط على مكان معين على الخريطة إظهار محدد مع لصيقة. مثال: marker A, marker B. أولاً يجب تعريف متغير Labels نضع فيه القيم الـتي نريد إظهارها في اللصيقة. مثال: الأحرف من A-Z. ونحتاج أيضًا إلى تعريف متغير labelIndex لتحديد الـقيمة الـتي نريد إظهارها. var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var labelIndex = 0;الآن قم بتحديد المكان الـذي ستفتح عنده الخريطة. مثال: تركيا. var Turkey = { lat: 38.963745 , lng: 35.243322 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: Turkey });الدالة ()addMarkerيقوم الحدث event.addListener باستدعاء التابع ()addMarker عند الضغط على الخريطة. كما في المثال التالي: google.maps.event.addListener(map, ‘click’, function(event) { addMarker(event.latLng, map); });وليكون هناك marker محدد عند فتح الخريطة قم بإضافة محدد إلى Turkey: addMarker(Turkey, map);لنكتب الآن الدالة ()addMarker: نحتاج لتعريف 2 parameters (معاملين) هما الـخريطة والـموقع map & location ثم نقوم بتعريف marker وإعطاء المعامل location للخاصية position. ولإظهار label نقوم بإعطاء الـمتغير labels الـذي يحتوي على الأحرف من A-Z للخاصية label مع تحديد ++index لكي ينتقل عند كل نقرة جديدة لحرف جديد وإظهاره على الـ marker كما هو موضح في الكود الـتالي: function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map }); }ستظهر لك الخريطة بهذا الشكل: وعند النقر على الخريطة: إضافة تأثير Marker Animationيمكنك إضافة تأثير حركي على المحدد ليبدو وكأنه يقفز ، فقط باستخدام خاصية animation:google.maps.Animation.BOUNCE كما هو موضح في الكود الـتالـي: var marker = new google.maps.Marker({ position: myCenter, animation: google.maps.Animation.BOUNCE });إضافة أيقونة للمحدد يمكنك تغيير الأيقونة الخاصة بالمحدد ووضع أيقونة من اختيارك عن طريق الخاصية icon، حيث تقوم بإعطاء مسار الصورة للخاصية icon. كما هو موضح في الكود التالي: var marker = new google.maps.Marker({ position: myCenter, icon:'pin.png' });ستظهر لك الخريطة بهذا الشكل: إضافة شكل متعدد الخطوط Polyline تتيح لك ميزة polyline رسم خط يصل بين سلسلة إحداثيات على الخريطة بشكل متسلسل، على سبيل المثال يمكنك رسم مسار رحلة عبر مجموعة من المدن ويمكنك التحكم بخصائص عديدة للخط مثل اللون والشفافية والحجم. خصائص الميزة Polyline: path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا. لنقم الآن بتحديد مجموعة إحداثيات لمدن ونصل فيما بينها عن طريق polyline، سأستخدم نفس الإحداثيات التي استخدمتها في تحديد المدن عندما وضعت أكثر من محدد، سأقوم برسم خط بين ثلاث مدن: اسطنبول، انطالـيا، طرابزون. أولاً: تحديد إحداثيات الـمدن: var istanbul = new google.maps.LatLng(41.008238, 28.978359); var antalya = new google.maps.LatLng(36.896891, 30.713323); var trabzon = new google.maps.LatLng(41.002697, 39.716763);ثانيًا: نقوم بتعريف مصفوفة myTrip وتعبئتها بأسماء المتغيرات (المدن الـتي نريد تحديد المسار عليها ): var myTrip = [ istanbul, antalya, trabzon];وثم نعطي المصفوفة للخاصية path: path: myTrip,ثالثًا: نقوم بتعريف متغير flightPath لاختيار الـخاصية polyline: كما هو موضح في الكود الـتالي: var map = new google.maps.Map(document.getElementById(“map”),mapProp); var myTrip = [ istanbul, antalya, trabzon]; var flightPath = new google.maps.Polyline({ path:myTrip, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2 }); flightPath.setMap(map); }ستظهر لك الخريطة بهذا الشكل: إضافة مضلع Polygonتتيح لك هذه الـميزة إنشاء مضلع تكون زواياه عبارة عن سلسلة الإحداثيات التي تريد الوصل بينها. لا تختلف ميزة polygon كثيراً عن polyline من حيث كتابة الـتعليمات فقط نقم باستبدالـ polyline بـpolygon. خصائص الـميزة polygon: path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.fillColor - يحدد لون المضلع بالـHex كود.fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا. كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”),mapProp); var myTrip = [istanbul, antalya, trabzon]; var flightPath = new google.maps.Polygon({ path: myTrip, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2 }); flightPath.setMap(map); }ستظهر لك الـخريطة بهذا الـشكل: إضافة دائرة Circleتتيح لك هذه الميزة إحاطة منطقة معينة على الخريطة بدائرة، يمكنك التحكم بقطر الدائرة ولونها وشفافيتها. خصائص الميزة Circle: center - تحديد إحداثيات مركز الدائرة. radius - تحديد قطر الدائرة بالمتر المربع. strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.fillColor - يحدد لون المضلع بالـHex كود.fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا.كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”), mapProp); var flightPath = new google.maps.Circle({ center: istanbul, radius: 20000, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#0000FF", fillOpacity: 0.4 }); flightPath.setMap(map); ستظهر لك الخريطة بهذا الشكل: إضافة نافذة نصية InfoWindowتتيح لك ميزة infoWindow إظهار نافذة على موقع معين محدد باسم بحيث يمكنك كتابة اسم الموقع المحدد بداخلها. كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”), mapProp); var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.963745, 35.243322), }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:”Hello World!” }); infowindow.open(map, marker); }ستظهر لك الخريطة بهذا الشكل: هكذا نكون قد استعرضنا أهم النقاط والميزات التي تتيح لك استخدام خرائط Google Maps بسهولة في موقعك الخاص. هل أنت جاهز الآن لإضافة Google Maps إلى موقعك والإستفادة من مزاياها؟ الـمصدر: Google Developers.حقوق الصورة البارزة: Designed by Freepik.

تناولنا في المقال السابق أساسيات التعامل مع مكتبة Google Maps JavaScript API لإنشاء الخرائط والرسم عليها والتفاعل معها مثل خاصية النقر على الخريطة وتحديد الأماكن. في هذا المقال سأتوسع في الشرح عن أنواع خرائط غوغل وخصائص كل نوع وعن كيفيّة رسم أشكال قابلة للتعديل والسحب على الخريطة، بالإضافة إلى خدمة street view منظور الشارع التي تتيح لك رؤية تفاصيل طرق وشوارع منطقتك، وسأختم بالحديث عن أهم وأكثر الخدمات المستخدمة وهي خدمة تحديد المواقع Geolocation. أنواع الخرائط Maps Typeتُوفّر مكتبة غوغل أربع أنواع خرائط رئيسية: ROADMAP ( الخريطة اإفتراضية العادية 2D map ).SATELLITE (خريطة مصورة).HYBRID (خريطة مصورة بالإضافة إلى أسماء الطرق والمدن).TERRAIN (خريطة تضمن الجبال والأنهار…الخ).يمكنك تحديد نوع الخريطة عن طريق الخاصية mapTypeId كما شرحنا في الدرس السابق. حيث يمكنك تحديدها إما عن طريق الـ Constructor المنشئ كما في الشيفرة التّالية: var myLatlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map"), mapOptions);أو تعديلها عن طريق الدالة setMapTypeId: map.setMapTypeId(google.maps.MapTypeId.TERRAIN);الخريطة المصورة SATELLITE الخريطة المصورة مع أسماء المدن والطرق HYBRID الخريطة الجغرافية تتضمن جبال وأنهار.. الخ TERRAIN الخريطة التصويرية منظور 45° Imagery1. منظور 45° Imageryتتيح لك مكتبة غوغل إنشاء خريطة تصويرية بدقة عالية من منظور جغرافي معين، أنواع الخرائط التي تدعم الخريطة التصويرية من منظور 45 درجة هما: SATELLITE و HYBRID. يجب أن تكون قيمة التكبير zoom عالية أي أكثر من 17 لكي يظهر المنظور واضحًا. سأعرض الآن خريطتين لنفس المكان الأولى بدون خاصية منظور 45° درجة والأخرى مع خاصية منظور. لقد لاحظت من تجربتي أن هناك بعض المناطق لا تدعم خاصية المنظور مثل تركيا، لذا سيكون المثال هنا إيطاليا - فينيسيا وقصر دوجي بالتحديد: قصر دوجي من دون خاصية منظور 45°: قصر دوجي مع خاصية منظور 45°: الآن لتفعيل خاصية المنظور فقط قم بإضافة: setTilt(45)أما لتعطيل الخاصية نقوم بوضع القيمة 0 بدل 45: setTilt(0)كما في الشيفرة التّالية: function initialize() { var mapProp = { center: new google.maps.LatLng(45.434046, 12.340284), zoom: 18, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map"), mapProp); map.setTilt(45); } google.maps.event.addDomListener(window, 'load', initialize); 2. خاصية التدوير في الاتجاهات الأربعةإن الخريطة التصويرية Imagery 45 تتضمن مجموعة من الصور لأربعة إتجاهات (شرق، غرب، شمال وجنوب). يمكنك تدوير المنظور تلقائيًا لتشاهد المكان من جميع الإتجاهات باستخدام الدالة ()setHeading وتمرير قيمة درجة التدوير ابتداءً من الشمال. أولًا نحدد للخاصية heading القيمة 90 جهة الشمال، ونعطي القيمة 45 درجة للخاصية tilt لتشغيل المنظور.نحن الآن بحاجة إلى زر Auto Rotate لنقوم بتشغيل التدوير التلقائي عند الضغط عليه. نعرف div ونعطيه التنسيق المناسب ليظهر وسط وأعلى الخريطة ثم نقوم بإنشاء زر داخل الـ div كما في الشيفرة التّالية:<style type="text/css"> #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } </style>الآن لنقم بكتابة دالة ()rotate90 مهمتها هي أخذ قيمة درجة التدوير الحالية heading وإضافة 90 درجة. سنستفيد من هذه الدالة عند استدعائها في كل مرة تدوير. function rotate90() { var heading = map.getHeading() || 0; map.setHeading(heading + 90); }ثم لنكتب الدالة المسؤولة عن التدوير التلقائي التي تقوم باستدعاء الدالة ()rotate90، هذه الدالة هي التي ستنفذ عندما نقوم بالضغط على الزر Auto Rotate function autoRotate() { // Determine if we're showing aerial imagery. if (map.getTilt() !== 0) { window.setInterval(rotate90, 3000); } } يمكننا التحكم بسرعة التدوير (الإنتقال بين الصور) عن طريق الدالة window.setInterval بتحديد قيمة المعامل الثاني (كلما كانت القيمة أصغر كلما كانت سرعة التدوير أكبر) تتحدد القيمة بالـmilliseconds. لنرى الآن قصر دوجي من الإتجاهات الأربعة: إضافة أشكال قابلة للتحرير والسحب على الخريطة editable and draggable shapesإن إضافة أشكال قابلة للتعديل والسحب تتيح للمستخدم التفاعل مع الخريطة بشكل أكبر وتحديد أماكن مختلفة بطريقته الخاصة. 1. إنشاء شكل قابل للتعديلإن أي شكل من الأشكال التي يمكن إضافتها ورسمها على الخريطة (polyline, polygon, circle) كما شرحناها في الدرس السابق يمكن أن تصبح أشكال قابلة للتعديل (تغيير حجمها، موضعها وشكلها) فقط قم بإسناد القيمة true للخاصية editable ضمن خصائص الشكل كما في الشيفرة التّالية: function initialize() { var mapProp = { center: new google.maps.LatLng(41.008238, 28.978359), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapProp); var flightPath = new google.maps.Circle({ center: new google.maps.LatLng(41.008238, 28.978359), radius: 20000, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#045B45", fillOpacity: 0.4, editable: true }); flightPath.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); 2. إنشاء شكل قابل للسحب والتحريكيمكنك جعل الشكل قابل للسحب عن طريق تفعيل الخاصية draggable ضمن خصائص الشكل. ملاحظة: في حال كنت تطبق خاصية السحب على الشكل متعدد الخطوط polyline أو على المضلع polygon فإن عليك تفعيل الخاصية geodesic ليتم الإحتفاظ بالشكل الجغرافي الصحيح أثناء تحريك الشكل. كما في الشيفرة التّالية: var istanbul = new google.maps.LatLng(41.008238, 28.978359); var antalya = new google.maps.LatLng(36.896891, 30.713323); var trabzon = new google.maps.LatLng(41.002697, 39.716763); function initialize() { var mapProp = { center: istanbul, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapProp); var redCoords = [ istanbul, antalya, trabzon ]; // إنشاء مثلث أحمر قابل للتحريك مع تفعيل الخاصية geodesic new google.maps.Polygon({ map: map, paths: redCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, draggable: true, geodesic: true }); } قبل التحريك: بعد التحريك: منظور الشارع Street Viewتوفر مكتبة Google Maps JavaScript API خدمة عرض الشوارع سأقوم هنا بشرح كيفية تفعيل خاصية عرض الشوارع الإفتراضية على خريطتك. 1. البانوراما Panorama:يتم دعم خدمة عرض الشوارع من خلال استخدام الكائن StreetViewPanorama،الذي يوفر واجهة API لعرض الشوارع. إن كل خريطة تحتوي على خاصية عرض شوارع إفتراضية panorama بانوراما، والتي يمكنك الحصول عليها عن طريق استدعاء الدالة للخريطة ()getStreetView. عند تفعيلك للخاصية streetViewControl فإنك تلقائيًا تكون قد فعلت خاصية عرض الشوارع الإفتراضية. يمكنك أيضًا إنشاء كائن StreetViewPanorama خاص بك لاستخدامه بدلًا من الإفتراضي. var panorama; function initialize() { panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), { position: { lat: 41.008238, lng: 28.978359 }, pov: { heading: 165, pitch: 0 }, zoom: 1 }); } google.maps.event.addDomListener(window, 'load', initialize);سأقوم الآن بعرض الخريطة وبجانبها بانوراما (عرض الشوارع). قم بإنشاء div وإعطاءه "id= "pano: <div id="map"></div> <div id="pano"></div>لنقوم الآن بتحديد التنسيقات لتظهر الخريطة بجانب البانوراما كما في الشيفرة التّالية: #map, #pano { float: left; height: 100%; width: 45%; }نقوم الآن بتحديد إحداثيات المكان (خط الطول وخط العرض) للمكان الذي نريد إظهاره مثلاً مدينة اسطنبول، ونقوم بتحديد الخصائص للبانوراما عن طريق StrrtViewPanorama: كما في الشيفرة التّالية: function initialize() { var fenway = {lat: 42.345573, lng: -71.098326}; var map = new google.maps.Map(document.getElementById('map'), { center: fenway, zoom: 14 }); var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), { position: fenway, pov: { heading: 34, pitch: 10 } }); map.setStreetView(panorama); } خدمة تحديد المواقع Geolocationإن خدمة تحديد المواقع تتيح لك تحديد موقع المستخدم الذي يزور موقعك مثلاً وذلك عن طريق عنوان الـIP الخاص به. إن تحديد الموقع الجغرافي يعتمد أساساً على الجهاز والمتصفح الذي يستخدمه الزائر لذا فإن هنالك بعض الأجهزة والمتصفحات لا تدعم خدمة تحديد المواقع، فلا يمكننا القول أن هذه الخدمة هي خدمة ممكنة ومتاحة دائمًا في موقعك أو تطبيق الويب الخاص بك. تستخدم بعض المتصفحات عنوان IP لكشف مكان وجود المستخدم، وبما أن عنوان IP ليس إلا تقدير تقريبي لموقع المستخدم فلا يمكنك الإعتماد عليها في تحديد المواقع بدقة، كما أنها خدمة يمكن للمستخدم تعطيلها في المتصفح الخاص به. لنرى الآن كيف يمكننا تحديد موقع الجهاز الخاص بنا عن طريق Geolocation. سنقوم أولًا بأخذ الإحداثيات (خط الطول وخط العرض) للمستحدم عن طريق الدالة getCurrentPosition وتخزينها بالمتغير pos: navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; وبما أن هذه الخدمة يمكن ألا يدعمها المتصفح أو أن يقوم بتعطيلها المستخدم فإن علينا أن نتأكد من أن الخاصية مفعلة أولًا: if (navigator.geolocation) {…………}في حال أن المتصفح يدعم الخدمة وأنها مفعلة يتم إظهار موقع المستخدم وإلا ستظهر رسالة خطأ ولن يتم عرض موقع المستخدم. infoWindow.setPosition(pos); infoWindow.setContent('Location found.'); map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); }الآن لاحظ أن المتصفح عرض نافذة للمستخدم ليخبره بأن صفحة الويب الحالية تريد أن تعرف موقعه هل تسمح بذلك؟ كانت هذه أبرز المواضيع والأدوات الأكثر شيوعاً في التعامل مع خرائط Google Maps لمن لم يسبق له استخدامها.