مقدمة
يشرح لك هذا البرنامج التعليمي كيفية إضافة خريطة Google بسيطة باستخدام محدِّد إلى موقع ويب. . وهي تناسب الأشخاص الذين لديهم معرفة مبتدئة أو متوسطة بـ HTML وCSS، والقليل من المعرفة بلغة JavaScript.
فيما يلي الخريطة التي ستنشئها باستخدام هذا البرنامج التعليمي. يتم وضع العلامة في صخرة أولورو (المعروفة أيضًا باسم أيرز روك) منتزه أولورو - كاتا تجوتا الوطني.
الخطوات الأولى
هناك ثلاث خطوات لإنشاء خريطة Google باستخدام محدِّد على صفحة الويب الخاصة بك:
تحتاج إلى متصفح ويب. اختر اسمًا معروفًا مثل Google Chrome (يوصى به) أو Firefox أو Safari أو Edge، بناءً على نظامك الأساسي من قائمة المتصفّحات المتوافقة
الخطوة 1: الحصول على مفتاح واجهة برمجة التطبيقات
يوضح هذا القسم كيفية مصادقة تطبيقك على واجهة برمجة تطبيقات JavaScript للخرائط باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.
اتّبِع الخطوات التالية للحصول على مفتاح واجهة برمجة التطبيقات:
الانتقال إلى قسم Google Cloud Console:
إنشاء مشروع أو اختياره
انقر على متابعة لتفعيل واجهة برمجة التطبيقات وأي خدمات ذات صلة.
في صفحة Credentials (بيانات الاعتماد)، احصل على مفتاح واجهة برمجة التطبيقات (وضبط مفتاح واجهة برمجة التطبيقات). القيود). ملاحظة: إذا كان لديك مفتاح واجهة برمجة تطبيقات غير مقيّد أو مفتاح حالي مع قيود المتصفح، يمكنك استخدام هذا المفتاح.
لمنع سرقة الحصة وتأمين مفتاح واجهة برمجة التطبيقات، يمكنك الاطّلاع على استخدام مفاتيح واجهة برمجة التطبيقات:
تفعيل الفوترة راجِع الاستخدام والفوترة. لمزيد من المعلومات.
بعد الحصول على مفتاح واجهة برمجة تطبيقات، يمكنك إضافته إلى المقتطف التالي بالنقر على "YOUR_API_KEY". انسخ علامة النص البرمجي لبرنامج الإقلاع والصقها لاستخدامها بنفسك صفحة الويب.
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
الخطوة 2: إنشاء صفحة HTML
في ما يلي رمز صفحة ويب HTML أساسية:
<!doctype html> <!-- @license Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
لاحظ أن هذه صفحة أساسية للغاية بعنوان من المستوى الثالث (h3
)
عنصر div
واحد. يمكنك إضافة أي محتوى تريده إلى صفحة الويب.
فهم الرمز البرمجي
في هذه المرحلة في المثال، لدينا ما يلي:
- تم تعريف التطبيق على أنه HTML5 باستخدام تعريف
!DOCTYPE html
. - تم إنشاء عنصر div باسم "map" للاحتفاظ بالخريطة.
- تم تحميل واجهة برمجة تطبيقات JavaScript للخرائط باستخدام برنامج الإقلاع.
تعريف تطبيقك على أنّه HTML5
ننصحك بالإفصاح عن السمة DOCTYPE
الصحيحة ضمن تطبيق الويب.
في الأمثلة الواردة هنا، أعلنا عن تطبيقاتنا على أنها HTML5 باستخدام
DOCTYPE
HTML5 بسيط كما هو موضح أدناه:
<!DOCTYPE html>
ستعرض معظم المتصفحات الحالية المحتوى الذي تم تعريفه باستخدام DOCTYPE
هذا
في "وضع المعايير" مما يعني أن تطبيقك يجب أن يكون أكثر
عبر جميع المتصفحات. تم تصميم DOCTYPE
أيضًا للتقليص بسلاسة،
ستتجاهله المتصفحات التي لا تفهمها، وتستخدم "وضع Quirks" إلى
لعرض محتواها.
لاحظ أن بعض CSS الذي يعمل في وضع Quirks غير صالح في
وضع المعايير. وبشكل خاص، يجب أن تكتسب جميع الأحجام المستندة إلى النسبة المئوية
من عناصر الكتلة الأصلية، وإذا فشل أي من تلك الكيانات الأصل في
لتحديد حجم، يُفترض أن يكون حجمها 0 × 0 بكسل. بالنسبة
لهذا السبب، ندرج بيان style
التالي:
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>
إنشاء عنصر div
لعرض الخريطة على صفحة ويب، يجب أن نحجز مكانًا لها. بشكل عام،
نفعل ذلك من خلال إنشاء عنصر div
باسم والحصول على إشارة إلى هذا
عنصر في نموذج كائن مستند المتصفح (DOM).
يحدد الرمز أدناه منطقة من الصفحة لخريطة Google.
<!--The div element for the map --> <div id="map"></div>
وفي هذه المرحلة من البرنامج التعليمي، تظهر علامة div
ككتلة رمادية فقط، لأن
لم تقم بإضافة خريطة حتى الآن. تصف التعليمة البرمجية أدناه CSS التي تحدد
وحجم div
ولونه.
/* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ }
في الرمز أعلاه، يضبط عنصر style
حجم div
لخريطتك. ضبط
div
عرض وارتفاع أكبر من 0 بكسل حتى تكون الخريطة مرئية. في هذه الدورة،
حالة الأحرف، تم ضبط div
على ارتفاع 400 بكسل وعرض 100% لعرضه
بعرض صفحة الويب يُرجى ملاحظة أنّ عنصر div يأخذ عرضه عادةً
من العنصر الذي يحتوي عليها، وعادةً ما يكون ارتفاع divs الفارغة 0. لهذا الغرض
السبب، يجب دائمًا ضبط الارتفاع على div
بشكل واضح.
تحميل واجهة برمجة تطبيقات JavaScript للخرائط
يُعِدّ برنامج الإقلاع واجهة برمجة تطبيقات JavaScript للخرائط للتحميل
(لا يتم تحميل أي مكتبات حتى يتم استدعاء الدالة importLibrary()
).
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
راجِع الخطوة الثالثة: الحصول على مفتاح واجهة برمجة التطبيقات للحصول على تعليمات حول الحصول على مفتاح واجهة برمجة التطبيقات الخاص بها.
الخطوة 3: إضافة خريطة باستخدام محدِّد
يوضح هذا القسم كيفية تحميل واجهة برمجة تطبيقات JavaScript للخرائط في صفحة ويب، وكيفية كتابة لغة JavaScript التي تستخدم واجهة برمجة التطبيقات لإضافة خريطة مع علامة عليها.
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
في الرمز أعلاه، يتم تحميل المكتبتَين Map
وAdvancedMarkerView
عندما
فسيتم استدعاء الدالة initMap()
.
فهم الرمز البرمجي
في هذه المرحلة من البرنامج التعليمي، لدينا:
- تم تحديد دالة JavaScript تنشئ خريطة في div.
- تم إنشاء
AdvancedMarkerElement
لإضافة محدِّد موقع إلى الخريطة.
إضافة خريطة
تُنشئ التعليمة البرمجية أدناه كائن خرائط Google جديدًا، وتضيف الخصائص إلى بما في ذلك مستوى المركز ومستوى التكبير/التصغير. راجع وثائق موقع آخر الخيارات.
TypeScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );
JavaScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });
هناك خياران مطلوبان لكل خريطة: center
وzoom
. في ما سبق
الرمز، ينشئ new Map()
كائن خرائط Google جديدًا. تخبر السمة center
واجهة برمجة التطبيقات لتحديد مركز الخريطة.
تحدّد السمة zoom
مستوى التكبير/التصغير للخريطة. تكبير/تصغير: 0 هو أدنى قيمة
والتكبير/التصغير ويعرض الأرض بأكملها. اضبط قيمة التكبير/التصغير على مستوى أعلى للتكبير إلى
الأرض بدرجات دقة أعلى.
يتطلب تقديم خريطة للأرض بالكامل كصورة واحدة أو خريطة ضخمة، أو خريطة صغيرة ذات دقة منخفضة للغاية. نتيجةً لذلك، تسمح صور الخريطة ضمن خرائط Google وواجهة برمجة تطبيقات JavaScript للخرائط إلى "مربعات" للخرائط و"مستويات التكبير". في مستويات التكبير/التصغير المنخفضة، تغطي مجموعة صغيرة من مربعات الخرائط خريطة المنطقة؛ مع مستويات تكبير/تصغير أعلى، تكون المربعات ذات دقة أعلى وتغطي مساحة أصغر. تعرض القائمة التالية مستوى التفاصيل التقريبي الذي يمكنك. نتوقع أن تراها في كل مستوى تكبير/تصغير:
- 1: العالم
- 5: مساحة اليابسة أو القارة
- 10: المدينة
- 15: الشوارع
- 20: مبانٍ
تعكس الصور الثلاث التالية نفس موقع طوكيو بمستويات التكبير 0، 7 و18.
إضافة علامة
يضع الرمز أدناه علامة على الخريطة. تحدد السمة position
موضع العلامة.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
إكمال نموذج الرمز البرمجي
انظر مثال التعليمة البرمجية الكامل هنا:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Add Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
تجربة "عيّنة"
مزيد من المعلومات عن العلامات:
النصائح وتحديد المشاكل وحلّها
- مزيد من المعلومات حول الحصول على خطوط الطول/العرض أو تحويل عنوان إلى إحداثيات جغرافية.
- يمكنك تعديل خيارات مثل النمط والخصائص لتخصيص الخريطة. بالنسبة مزيد من المعلومات حول تخصيص الخرائط، واقرأ الأدلة التصميم، الرسم على الخريطة.
- استخدم وحدة تحكم أدوات المطوّرين في متصفح الويب لاختبار التعليمات البرمجية وقراءة تقارير الأخطاء وحل المشكلات المتعلقة بالتعليمات البرمجية.
- استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
Command+Option+J (على نظام التشغيل Mac)، أو Control+Shift+J (على نظام التشغيل Windows). اتبع الخطوات أدناه للحصول على خط العرض إحداثيات خط الطول لموقع ما على خرائط Google.
- افتح "خرائط Google" في متصفّح.
- انقر بزر الماوس الأيمن على الموقع الدقيق على الخريطة الذي تحتاج إليه الإحداثيات.
- اختَر ماذا هنا من قائمة السياقات التي تظهر. تعرض الخريطة بطاقة في أسفل الشاشة. البحث عن خط العرض وإحداثيات خطوط الطول والعرض في الصف الأخير من البطاقة.
يمكنك تحويل عنوان إلى إحداثيات خطي العرض والطول باستخدام خدمة ترميز جغرافي. توفر أدلة المطوِّرين معلومات مفصلة عن بدء استخدام خدمة الترميز الجغرافي.