إشعار الأمان: نما إلى علمنا بمشكلة أمنية قد تؤثر في المواقع الإلكترونية التي تستخدم مكتبات معيّنة تابعة لجهات خارجية (بما في ذلك polyfill.io). وقد تؤدي هذه المشكلة في بعض الأحيان إلى إعادة توجيه الزائرين بعيدًا عن الموقع الإلكتروني المقصود بدون معرفة مالك الموقع أو إذنه. وفي السابق، كان يتضمّن العديد من نماذج JavaScript تعريف النص البرمجي polyfill.io. تمت إزالة هذا المحتوى من نماذجنا. إذا كنت قد استخدمت نماذج JavaScript التي تحتوي على هذا التعريف، ننصحك بإزالة التعريف.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

نظرة عامة

اختيار النظام الأساسي: Android iOS JavaScript

تتيح لك واجهة برمجة تطبيقات JavaScript للخرائط تخصيص الخرائط بالمحتوى والصور لعرضها على صفحات الويب والأجهزة الجوّالة. تعرض واجهة برمجة تطبيقات JavaScript للخرائط أربعة أنواع أساسية من الخرائط (خريطة الطريق، والقمر الصناعي، والمختلطة، والتضاريس)، ويمكنك تعديلها باستخدام الطبقات والأنماط وعناصر التحكّم والأحداث ومختلف الخدمات والمكتبات.

الجمهور

تم تصميم هذا المستند للمستخدمين الذين لديهم دراية ببرمجة JavaScript ومفاهيم البرمجة الكائنة التوجيه. ويجب أن تكون على دراية بخرائط Google من منظور المستخدم. تتوفّر على الويب العديد من البرامج التعليمية حول JavaScript.

تم تصميم هذا المستند المفاهيمي للسماح لك ببدء استكشاف التطبيقات وتطويرها بسرعة باستخدام Maps JavaScript API. وننشر أيضًا مرجع JavaScript API في "خرائط Google".

مرحبًا بالجميع

إنّ أسهل طريقة لبدء التعرّف على واجهة برمجة تطبيقات JavaScript للخرائط هي الاطّلاع على مثال بسيط. يعرض المثال التالي خريطة تتمركز حول سيدني، نيو ساوث ويلز، أستراليا.

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();index.ts

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();index.js

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;
}
style.css

HTML

<html>
  <head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <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>index.html

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

حتى في هذا المثال البسيط، هناك بعض الأشياء التي يجب ملاحظتها:

نعلن عن التطبيق كـ HTML5 باستخدام تعريف <!DOCTYPE html>.
ننشئ عنصر div باسم "خريطة" للاحتفاظ بالخريطة.
نعرّف دالة JavaScript التي تنشئ خريطة في div.
نحمّل واجهة برمجة تطبيقات JavaScript للخرائط باستخدام برنامج الإقلاع.

نوضح في ما يلي هاتين الخطوتين.

تحميل واجهة برمجة تطبيقات JavaScript للخرائط

يُعد برنامج الإقلاع طريقة التنفيذ الموصى بها لتحميل واجهة برمجة تطبيقات JavaScript للخرائط. يتم أيضًا توفير أداة تحميل واجهة برمجة التطبيقات JS كبديل. وننصحك بمراجعة كِلا الأسلوبين واختيار الأسلوب الأنسب لكيفية تنظيم الرمز البرمجي في مشروعك.

لمزيد من التفاصيل، راجِع تحميل واجهة برمجة تطبيقات JavaScript للخرائط.

أداة تحميل التمهيد

يمكنك تحميل واجهة برمجة تطبيقات JavaScript للخرائط عن طريق إضافة برنامج الإقلاع المضمّن إلى رمز تطبيقك، كما هو موضّح في المقتطف التالي:

<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>

لتحميل المكتبات في وقت التشغيل، استخدِم عامل التشغيل await لطلب importLibrary() من داخل دالة غير متزامنة، كما هو موضّح أدناه:

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();index.ts

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();index.js

حزمة NPM js-api-loader

استخدِم @googlemaps/js-api-loader لاستخدام NPM لتحميل واجهة برمجة تطبيقات JavaScript للخرائط. ثبِّته من خلال NPM باستخدام الأمر التالي:

npm install @googlemaps/js-api-loader

يمكن استيراد هذه الحزمة إلى التطبيق باستخدام:

import { Loader } from "@googlemaps/js-api-loader"

تعرض أداة التحميل واجهة Promise وواجهة معاودة الاتصال. يوضّح ما يلي استخدام طريقة الوعد التلقائية load().

TypeScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});index.ts

JavaScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});
index.js

تعريف تطبيقك على أنّه 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>

يشير بيان CSS هذا إلى أنّ حاوية الخريطة <div> (التي تحمل رقم التعريف map) يجب أن تشغل 100% من ارتفاع نص HTML. يُرجى العِلم أنّه يجب أن نعلن أيضًا عن هاتَين النِسب المئوية للسمتَين <body> و<html>.

تحميل واجهة برمجة تطبيقات JavaScript للخرائط

يتم تحميل واجهة برمجة تطبيقات JavaScript للخرائط باستخدام علامة script التي يمكن إضافتها مضمّنة في ملف HTML أو بشكل ديناميكي باستخدام ملف JavaScript منفصل. نوصي بمراجعة كلا النهجين، واختيار الأسلوب الأنسب لكيفية هيكلة التعليمة البرمجية في مشروعك.

التحميل المضمّن

لتحميل واجهة برمجة التطبيقات JavaScript API للخرائط بشكل مضمّن في ملف HTML، أضِف علامة script كما هو موضّح أدناه.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

التحميل الديناميكي

لتحميل واجهة برمجة تطبيقات JavaScript للخرائط بشكل ديناميكي بشكل مضمّن باستخدام ملف JavaScript منفصل، اطّلِع على المثال أدناه. تتيح لك هذه الطريقة معالجة كل الرموز البرمجية للعمل باستخدام واجهة برمجة التطبيقات من ملف .js منفصل، ويعادل هذا الإجراء إضافة علامة النص البرمجي بشكل مضمّن.

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

التحميل الديناميكي

تتوفر حزمة @googlemaps/js-api-loader لجعل تجربة التحميل الديناميكي أكثر سلاسة. يمكن تثبيته من خلال NPM باستخدام ما يلي:

npm install @googlemaps/js-api-loader

يمكن استيراد هذه الحزمة إلى التطبيق باستخدام:

import { Loader } from "@googlemaps/js-api-loader"

تعرض أداة التحميل واجهة Promise وواجهة معاودة الاتصال. يوضّح ما يلي استخدام طريقة الوعد التلقائية load().

TypeScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});index.ts

JavaScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});
index.js

سمات علامة النص البرمجي

لاحِظ في الأمثلة أعلاه أنّه تم ضبط عدة سمات في العلامة script، وهي سمات يُنصح بها. فيما يلي شرح لكل سمة.

src: عنوان URL الذي تم تحميل واجهة برمجة تطبيقات JavaScript للخرائط منه، بما في ذلك جميع الرموز والتعريفات التي تحتاجها لاستخدام واجهة برمجة تطبيقات JavaScript للخرائط يحتوي عنوان URL في هذا المثال على مَعلمتَين: key، تقدّم فيه مفتاح واجهة برمجة التطبيقات، وcallback حيث يمكنك تحديد اسم دالة عمومية سيتم طلبها بعد تحميل واجهة برمجة تطبيقات JavaScript الخرائط بالكامل. اطّلِع على مزيد من المعلومات عن مَعلمات عناوين URL.
async: تطلب من المتصفّح تنزيل النص البرمجي وتنفيذه بشكل غير متزامن. عند تنفيذ النص البرمجي، سيتم استدعاء الدالة المحدّدة باستخدام المعلمة callback.

المكتبات

عند تحميل واجهة برمجة تطبيقات JavaScript للخرائط عبر عنوان URL، يمكنك اختياريًا تحميل مكتبات إضافية باستخدام عامل التشغيل await لاستدعاء importLibrary() من داخل دالة غير متزامنة. المكتبات هي وحدات من الرموز البرمجية توفّر وظائف إضافية لواجهة برمجة تطبيقات JavaScript لـ "خرائط Google" الرئيسية، ولكن لا يتم تحميلها ما لم تطلبها على وجه التحديد. لمزيد من المعلومات، يُرجى الاطّلاع على المكتبات في واجهة برمجة تطبيقات JavaScript للخرائط.

ربط عناصر DOM

<div id="map"></div>

لعرض الخريطة على صفحة ويب، يجب أن نحجز مكانًا لها. يتم ذلك عادةً من خلال إنشاء عنصر div باسم والحصول على إشارة إلى هذا العنصر في نموذج كائن المستند (DOM) في المتصفّح.

في المثال أعلاه، استخدمنا CSS لضبط ارتفاع الخريطة div على "100%". وسيتم توسيعها ليناسب الحجم على الأجهزة الجوّالة. قد تحتاج إلى ضبط قيم العرض والارتفاع استنادًا إلى حجم الشاشة والمساحة المتروكة في المتصفّح. تجدر الإشارة إلى أنّ عناصر div تأخذ عادةً عرضها من العنصر الذي تحتويها، وعادةً ما يكون ارتفاع div الفارغة 0. لهذا السبب، يجب دائمًا ضبط الارتفاع على <div> بشكل واضح.

خيارات الخريطة

هناك خياران مطلوبان لكل خريطة: center وzoom.

map = new Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

مستويات التكبير/التصغير

يتم تحديد درجة الدقة الأوّلية التي يتم عرض الخريطة بها من خلال السمة zoom، حيث يتوافق رمز التكبير/التصغير 0 مع خريطة الأرض التي تم تكبيرها بالكامل، بينما تزداد مستويات التكبير/التصغير بدقة أعلى.

zoom: 8

إنّ تقديم خريطة للأرض بكاملها كصورة واحدة قد يتطلّب خريطة ضخمة أو خريطة صغيرة ذات دقة منخفضة للغاية. ونتيجةً لذلك، يتم تقسيم صور الخرائط في "خرائط Google" وواجهة برمجة تطبيقات JavaScript للخرائط إلى "مربّعات" و"مستويات تكبير". في مستويات التكبير/التصغير المنخفضة، تغطي مجموعة صغيرة من مربّعات الخرائط منطقة واسعة، وفي مستويات التكبير الأعلى، تكون المربّعات عالية الدقة وتغطي مساحة أصغر. تعرض القائمة التالية المستوى التقريبي للتفاصيل التي يمكنك توقّع رؤيتها في كل مستوى من مستويات التكبير أو التصغير:

1: العالم
5: مساحة اليابسة/القارة
10: المدينة
15: الشوارع
20: مبانٍ

تعكس الصور الثلاث التالية الموقع الجغرافي نفسه لمدينة طوكيو بمستويات التكبير أو التصغير 0 و7 و18.

للحصول على معلومات عن كيفية تحميل واجهة برمجة تطبيقات JavaScript للخرائط للمربّعات استنادًا إلى مستوى التكبير الحالي، يمكنك الاطّلاع على دليل إحداثيات الخريطة والمربّعات.

كائن الخريطة

map = new Map(document.getElementById("map"), {...});

فئة JavaScript التي تمثل الخريطة هي الفئة Map. تحدد كائنات هذه الفئة خريطة واحدة على الصفحة. (يمكنك إنشاء أكثر من مثيل واحد من هذه الفئة، وسيحدّد كل كائن خريطة منفصلة على الصفحة). ننشئ مثيلاً جديدًا من هذه الفئة باستخدام عامل التشغيل new في JavaScript.

عند إنشاء مثيل خريطة جديد، عليك تحديد عنصر HTML <div> في الصفحة كحاوية للخريطة. عُقد HTML هي عناصر ثانوية لكائن document، ونحصل على مرجع إلى هذا العنصر من خلال الطريقة document.getElementById().

يحدّد هذا الرمز متغيّرًا (باسم map) ويعيّن هذا المتغيّر إلى عنصر Map جديد. تُعرف الدالة Map() باسم الدالة الإنشائية، وإليك تعريفها أدناه:

الشركة المصنِّعة	الوصف
`Map(mapDiv:Node, opts?:MapOptions )`	تنشئ خريطة جديدة داخل حاوية HTML المحدّدة التي تكون عادةً عنصر DIV باستخدام أي معلَمات (اختيارية) يتم تمريرها.

تحديد المشاكل وحلّها

مفتاح واجهة برمجة التطبيقات وأخطاء الفوترة

في حالات معيّنة، قد يتم عرض خريطة داكنة أو صورة "تجوّل افتراضي" "سلبية" تحمل علامة مائية بالنص "لأغراض التطوير فقط". يشير هذا السلوك عادةً إلى مشاكل في مفتاح واجهة برمجة التطبيقات أو الفوترة. لاستخدام منتجات "منصة خرائط Google"، يجب تفعيل الفوترة في حسابك، ويجب أن تتضمن جميع الطلبات مفتاح واجهة برمجة تطبيقات صالحًا. ستساعدك الخطوات التالية في تحديد هذه المشكلة وحلّها:

هل تستخدم مفتاح واجهة برمجة تطبيقات؟

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

يتم ضبط مفتاح واجهة برمجة التطبيقات كمَعلمة key في عنوان URL المستخدَم لتحميل Maps JavaScript API. في ما يلي بعض الخيارات للتحقّق ممّا إذا كنت تستخدم مفتاح واجهة برمجة التطبيقات:

استخدِم إضافة Chrome Google Maps Platform API Checker. ويتيح لك ذلك تحديد ما إذا كان موقعك الإلكتروني ينفّذ بشكل صحيح واجهات برمجة التطبيقات لخرائط Google المرخَّصة من Google.
إذا كنت تستخدم مكتبة أو مكوّنًا إضافيًا لتحميل واجهة برمجة تطبيقات JavaScript للخرائط، تحقَّق من إعدادات تلك المكتبة وابحث عن خيار مفتاح واجهة برمجة التطبيقات.
تحقَّق من الأخطاء في متصفحك. إذا ظهرت لك الرسائل التالية، يعني هذا أنّك لا تستخدم مفتاح واجهة برمجة التطبيقات بشكل صحيح:

تحذير بشأن واجهة برمجة التطبيقات JavaScript في "خرائط Google": NoApiKeys
خطأ في واجهة برمجة تطبيقات JavaScript لـ "خرائط Google": MissingKeyMapError

لمطوّري البرامج على الويب:

إذا كان بإمكانك الوصول إلى رمز المصدر الخاص بتطبيقك، ابحث عن العلامة <script> المستخدَمة لتحميل Maps JavaScript API. عند تحميل Maps JavaScript API، استبدِل YOUR_API_KEY في الرمز أدناه بمفتاح واجهة برمجة التطبيقات الخاص بك.
```
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
```
تحقق من حركة بيانات الشبكة الناتجة عن موقعك الإلكتروني في المتصفح. في Chrome، يمكن الاطّلاع على هذا القسم باستخدام علامة التبويب DevTools الشبكة. هنا ستظهر لك طلبات الشبكة التي يرسلها موقعك الإلكتروني. ستكون الطلبات التي يتم إجراؤها باستخدام Maps JavaScript API ضمن المسار maps/api/js. ويمكنك هنا التأكّد مما إذا كانت الطلبات تستخدم المَعلمة key. قد يكون من المفيد فلترة حركة بيانات الشبكة حسب maps/api/js عند عرض علامة التبويب الشبكة.

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

للحصول على مفتاح واجهة برمجة التطبيقات، انقر على الزر أدناه. في حال لم تظهر لك عملية إعداد إرشادية، اتّبِع التعليمات الكاملة الواردة في مقالة بدء استخدام "منصة خرائط Google".
البدء

نعم، أستخدم مفتاح واجهة برمجة تطبيقات.

رائع. لننتقل ونتحقق مما إذا كان حساب الفوترة قد تم إرفاقه بمشروعك.

هل حساب الفوترة مرفق بمشروعك؟

ليس لدي جواب أكيد. كيف يمكنني التحقّق من إرفاق حساب الفوترة بمشروعي؟

انتقِل إلى صفحة الفوترة في Google Cloud Console واختَر المشروع الذي تم إنشاء مفتاح واجهة برمجة التطبيقات بموجبه. للتأكد من ارتباط المفتاح بالمشروع:

انتقِل إلى قسم Credentials (بيانات الاعتماد) الذي يمكن الوصول إليه من الشريط الجانبي الأيمن ضمن Google Maps Platform > بيانات الاعتماد.
تحقَّق من أنّ مفتاح واجهة برمجة التطبيقات الذي تستخدمه حاليًا في موقعك الإلكتروني مُدرَج. وإذا لم يكن الأمر كذلك، يمكنك الانتقال إلى مشروع مختلف والتحقق من بيانات الاعتماد هناك.
إذا لم تتمكّن من تحديد موقع مشروع مفتاح واجهة برمجة التطبيقات الخاص بك، يُحتمَل أنّك فقدت إمكانية الوصول إلى هذا المشروع. اطلب المساعدة من المستخدمين الآخرين في مؤسستك. في حال عدم إمكانية تحديد موقع المشروع الأصلي، عليك تنفيذ ما يلي:
1. أنشِئ مشروعًا جديدًا. يمكن إجراء ذلك من خلال اختيار مشروع جديد من قائمة المشاريع، أو من خلال اختيار إنشاء مشروع في صفحة "مدير الموارد".
2. أنشِئ مفتاح واجهة برمجة تطبيقات جديدًا. ويمكنك إجراء ذلك من صفحة بيانات الاعتماد. بعد ذلك، انقر على إنشاء بيانات اعتماد ثم اختَر مفتاح واجهة برمجة التطبيقات.

بعد تحديد موقع مشروعك في Cloud Console، تحقَّق مما إذا كان حساب الفوترة مرفقًا من خلال الانتقال إلى قسم الفوترة في القائمة الجانبية اليمنى.

لا، لم يتم إرفاق حساب فوترة بمشروعي.

انتقِل إلى صفحة تفعيل الفوترة في Cloud Console وأضِف حساب فوترة إلى مشروعك. للحصول على معلومات إضافية، يُرجى الاطّلاع على مقالة بدء استخدام "منصة خرائط Google".

نعم، تم إرفاق حساب فوترة بمشروعي.

رائع. لنتأكّد من أنّ طريقة الفوترة المقدَّمة صالحة.

هل طريقة الفوترة المقدمة لم تعد صالحة (على سبيل المثال، بطاقة ائتمان منتهية الصلاحية)؟

يمكنك إضافة طريقة دفع أو إزالتها أو تعديلها في Cloud Console.

هل تم تجاوز الحد اليومي الذي تفرضه واجهة برمجة التطبيقات بشكل ذاتي؟

إذا كنت قد ضبطت حدًا يوميًا لأي من واجهات برمجة التطبيقات، وهو أمر شائع لمنع حدوث الزيادات غير المتوقعة، يمكنك حلّ هذه المشكلة من خلال زيادة الحد اليومي.

يمكنك مراجعة الحدود اليومية من خلال الانتقال إلى لوحة بيانات واجهات برمجة التطبيقات والخدمات في Cloud Console. من هنا، يُرجى اتّباع الخطوات التالية:

اختَر مشروعًا إذا طُلب منك ذلك.
اختَر واجهة برمجة تطبيقات من القائمة، ثم انقر على علامة التبويب الحصص.

هل هناك قيود على عناوين IP في مفتاح واجهة برمجة التطبيقات؟

لا يمكن استخدام مفاتيح واجهة برمجة التطبيقات ذات القيود عناوين IP إلا مع خدمات الويب المخصّصة للاستخدام من جهة الخادم (مثل Geocoding API وغيرها من واجهات برمجة تطبيقات خدمات الويب). لدى معظم خدمات الويب هذه خدمات مكافئة ضمن Maps JavaScript API (على سبيل المثال، يمكنك الاطّلاع على خدمة الترميز الجغرافي). لاستخدام الخدمات من جهة العميل لواجهة برمجة تطبيقات JavaScript API، عليك إنشاء مفتاح واجهة برمجة تطبيقات منفصل يمكن تأمينه باستخدام أحد قيود مُحيلي HTTP (راجِع الحصول على مفتاح واجهة برمجة تطبيقات وإضافته وتقييده).

إذا كان الرمز لا يعمل:

يوضّح "بريندان كيني" و"مانو ماركس" بعض الأخطاء الشائعة وكيفية إصلاحها في هذا الفيديو، لمساعدتك في تنفيذ الرموز البرمجية للخرائط وتشغيلها.

ابحث عن الأخطاء الإملائية. تذكَّر أنّ لغة JavaScript هي لغة حساسة لحالة الأحرف.
اطّلِع على الأساسيات، لأنّ بعض المشاكل الأكثر شيوعًا التي تحدث في عملية الإنشاء الأوّلي للخريطة. على سبيل المثال:
- تأكَّد من تحديد السمتَين zoom وcenter في خيارات الخريطة.
- تأكد من الإعلان عن عنصر div الذي ستظهر فيه الخريطة على الشاشة.
- تأكد من أن عنصر div للخريطة له ارتفاع. بشكل تلقائي، يتم إنشاء عناصر div بارتفاع 0، وبالتالي تكون غير مرئية.
يمكنك مراجعة الأمثلة لمعرفة تنفيذ المراجع.
استخدِم برنامج تصحيح أخطاء JavaScript للمساعدة في تحديد المشاكل، مثل المشاكل المتاحة في أدوات مطوّري برامج Chrome. ابدأ بالبحث في وحدة تحكم JavaScript عن الأخطاء.
انشر الأسئلة في Stack Overflow. تتوفّر إرشادات حول كيفية نشر أسئلة رائعة على صفحة الدعم.