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

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

نظرة عامة

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

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

الجمهور

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

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

أَهْلًا بِالْعَالَمْ

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

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 Google Cloud Shell

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

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

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

تحميل Maps JavaScript API

برنامج الإقلاع هو الطريقة الموصى بها لتحميل Maps JavaScript API. يتم أيضًا توفير برنامج تحميل واجهة برمجة تطبيقات JavaScript كبديل. وننصحك بمراجعة المنهجَين واختيار الأسلوب الأكثر ملاءمةً لبنية الرمز في مشروعك.

لمزيد من التفاصيل، راجِع تحميل Maps JavaScript API.

آلات تحميل التمهيد

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

<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 لتحميل واجهة Maps JavaScript API. ثبِّته من خلال 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 باستخدام HTML5 DOCTYPE البسيط، كما هو موضّح أدناه:

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

تحميل Maps JavaScript API

يتم تحميل Maps JavaScript API باستخدام علامة script يمكن إضافتها بشكلٍ مضمّن في ملف HTML أو بشكلٍ ديناميكي باستخدام ملف JavaScript منفصل. نوصي بمراجعة كِلا الأسلوبين واختيار الأسلوب الأنسب لكيفية هيكلة التعليمات البرمجية في مشروعك.

تحميل مضمّن

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

المكتبات

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

عناصر DOM للربط

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

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

في المثال أعلاه، استخدمنا CSS لضبط ارتفاع عنصر div للخريطة على "100%". وسيتم توسيع هذا الإطار ليلائم الحجم على الأجهزة الجوّالة. قد تحتاج إلى ضبط قيمتَي العرض والارتفاع استنادًا إلى حجم الشاشة والمساحة المتروكة في المتصفّح. يُرجى العلم أنّ عناصر div تأخذ عرضها عادةً من العنصر الذي يتضمّنها، وتكون قيمة div الفارغة عادةً صفر ارتفاع. لهذا السبب، يجب دائمًا ضبط ارتفاع على <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 بلغة JavaScript، ونحصل على إشارة إلى هذا العنصر من خلال الإجراء 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 بشكلٍ سليم.
إذا كنت تستخدم مكتبة أو مكوّنًا إضافيًا لتحميل Maps JavaScript API، راجِع إعدادات تلك المكتبة وابحث عن خيار مفتاح واجهة برمجة التطبيقات.
تحقَّق من الأخطاء في المتصفح. إذا ظهرت لك الرسائل التالية، يعني ذلك أنّك لا تستخدم مفتاح واجهة برمجة التطبيقات بشكل صحيح:

تحذير بشأن JavaScript API في "خرائط 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. ستظهر لك هنا طلبات الشبكة التي أجراها موقعك الإلكتروني. ستظهر الطلبات المقدّمة باستخدام واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" ضمن المسار 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 عليها إلا مع خدمات الويب المخصّصة للاستخدام من جانب الخادم (مثل واجهة برمجة التطبيقات للترميز الجغرافي وواجهات برمجة تطبيقات خدمات الويب الأخرى). تشتمل معظم خدمات الويب هذه على خدمات مكافئة ضمن Maps JavaScript API (على سبيل المثال، يمكنك الاطّلاع على خدمة الترميز الجغرافي). لاستخدام الخدمات من جهة العميل لواجهة برمجة تطبيقات JavaScript للخرائط، يجب إنشاء مفتاح واجهة برمجة تطبيقات منفصل يمكن تأمينه بتقييد مُحيلات HTTP (راجِع الحصول على مفتاح واجهة برمجة تطبيقات وإضافته وتقييده).

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

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

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