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

نظرة عامة

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

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

الجمهور

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

تم تصميم هذه المستندات النظرية لتتيح لك بدء استكشاف التطبيقات وتطويرها سريعًا باستخدام Maps JavaScript API. وننشر أيضًا مرجع واجهة برمجة التطبيقات للغة JavaScript في "خرائط 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 CodeSandbox.io Google Cloud Shell

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

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

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

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

يُعدّ برنامج تحميل نظام التشغيل هو الطريقة المقترَحة لتحميل واجهة برمجة تطبيقات JavaScript من "خرائط Google". يتم أيضًا توفير برنامج تحميل واجهة برمجة تطبيقات 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_HERE",
    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

حزمة أداة تحميل js-api-NPM

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

npm install @googlemaps/js-api-loader

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

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

يعرِض القائم بالتحميل واجهة وعودًا واستدعاءً. يوضح ما يلي استخدام طريقة الوعد التلقائية 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 باستخدام إصدار HTML5 DOCTYPE البسيط كما هو موضّح أدناه:

<!DOCTYPE html>

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

يُرجى العِلم أنّ بعض خدمات CSS التي تعمل في وضع Quirks غير صالحة في الوضع Standard. وعلى وجه التحديد، يجب أن تكتسب جميع الأحجام المستندة إلى النسبة المئوية من عناصر الحظر الرئيسية، وإذا تعذّر على أي من هذه الأسلاف تحديد حجم معيّن، يُفترض أن يكون حجمها بحجم 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 للخرائط في ملف HTML مضمّن، أضِف علامة script كما هو موضّح أدناه.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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-bucket لتوفير تجربة تحميل أكثر سلاسة. ويمكن تثبيته من خلال برنامج NPM باتّباع الخطوات التالية:

npm install @googlemaps/js-api-loader

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

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

يعرِض القائم بالتحميل واجهة وعودًا واستدعاءً. يوضح ما يلي استخدام طريقة الوعد التلقائية 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 الذي يتم من خلاله تحميل Maps API API، بما في ذلك جميع الرموز والتعريفات التي تحتاجها لاستخدام Maps API API. يشتمل عنوان URL في هذا المثال على مَعلمتَين: key، حيث يمكنك تقديم مفتاح واجهة برمجة التطبيقات وcallback حيث يمكنك تحديد اسم دالة عامة سيتم طلبها بعد تحميل واجهة برمجة تطبيقات JavaScript لخدمة "خرائط Google" بالكامل. اطّلِع على مزيد من المعلومات عن معلّمات عناوين URL.
async: يطلب من المتصفّح تنزيل النص البرمجي وتنفيذه بشكل غير متزامن. عند تنفيذ النص البرمجي، سيطلب الدالة المحدّدة باستخدام المعلَمة callback.

المكتبات

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

ربط عناصر DOM

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

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

في المثال أعلاه، استخدمنا لغة 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" وMaps JavaScript API إلى "مربّعات" و"مستويات تكبير/تصغير" للخريطة. عند مستويات التكبير المنخفضة، تغطي مجموعة صغيرة من مربّعات الخريطة منطقة واسعة. وفي مستويات التكبير أو التصغير، تكون الأقسام بدقة أعلى وتغطي مساحة أصغر. تعرض القائمة التالية المستوى التقريبي للتفاصيل التي يمكنك الاطّلاع عليها في كل مستوى من مستويات التكبير أو التصغير:

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

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

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

عنصر الخريطة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

رائع! لنبدأ في التحقّق مما إذا كان حساب الفوترة مرتبطًا بمشروعك.

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

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

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

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

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

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

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

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

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

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

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

هل هناك حدّ أقصى يومي تفرضه واجهة برمجة التطبيقات؟

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

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

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

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

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

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

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

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