הודעת אבטחה: נודע לנו על בעיית אבטחה שעשויה להשפיע על אתרים שמשתמשים בספריות ספציפיות של צד שלישי (כולל polyfill.io). בעיה זו עלולה לפעמים להפנות מבקרים אל מחוץ לאתר המיועד ללא ידיעתו או אישור של בעלי האתר. רבות מדוגמאות ה-JavaScript שלנו כללו בעבר הצהרה של סקריפט polyfill.io. הסרנו את הדוגמאות האלה מהדוגמאות. אם השתמשת בדוגמאות JavaScript שלנו שמכילות את ההצהרה הזו, מומלץ להסיר את ההצהרה.

דף זה תורגם על ידי Cloud Translation API.

סקירה כללית

בחירת פלטפורמה: Android iOS JavaScript

ממשק ה-API של JavaScript של מפות Google מאפשר לך להתאים אישית מפות עם תוכן ותמונות משלך, לתצוגה בדפי אינטרנט ובמכשירים ניידים. ה-JavaScript API של מפות Google כולל ארבעה סוגי מפות בסיסיים (מפת דרכים, לוויין, היברידי ופני השטח) שאותם ניתן לשנות באמצעות שכבות וסגנונות, אמצעי בקרה ואירועים, וכן באמצעות ספריות ושירותים שונים.

קהל

מאמרי העזרה האלה מיועדים לאנשים שמכירים את מושגי התכנות של JavaScript ותכנות מוכוון אובייקטים. חשוב להכיר גם את מפות Google מנקודת המבט של המשתמש. יש הרבה מדריכי JavaScript זמינים באינטרנט.

התיעוד הרעיוני הזה נועד לאפשר לכם להתחיל במהירות לחקור ולפתח אפליקציות באמצעות Maps JavaScript API. אנחנו מפרסמים גם את חומר העזר בנושא 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>

    <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 API של מפות Google באמצעות טוען ה-Bootstrap.

שלבים אלה מוסברים להלן.

טעינת Maps JavaScript API

הדרך המומלצת לטעינה של ממשק ה-API של JavaScript של מפות Google היא ה-Boot-loader. גם טוען ה-JS API מסופק כחלופה. מומלץ לבדוק את שתי הגישות ולבחור את זו שהכי מתאימה לאופן שבו בנוי הקוד בפרויקט.

למידע נוסף, קראו את המאמר טעינת ה-API של JavaScript של מפות Google.

Loader אתחול

כדי לטעון את JavaScript API של מפות Google, מוסיפים את ה-builder המוטבע ל-boottrap לקוד האפליקציה, כמו שמוצג בקטע הקוד הבא:

<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

חבילת js-api-loader של NPM

משתמשים ב-@googlemaps/js-api-loader כדי להשתמש ב-NPM כדי לטעון את JavaScript API של מפות Google. מתקינים אותו דרך NPM באמצעות הפקודה הבאה:

npm install @googlemaps/js-api-loader

ניתן לייבא את החבילה הזו לאפליקציה באמצעות:

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

ה-Loader חושף ממשק Promise ו-callback. ההדגמה הבאה ממחישה את השימוש בשיטת ברירת המחדל של 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 mode) כדי להציג את התוכן.

שימו לב שחלק משירותי ה-CSS שפועלים במצב תאימות (quirks mode) לא חוקיים במצב סטנדרטי. באופן ספציפי, כל הגדלים המבוססים על אחוזים צריכים לעבור בירושה מרכיבי בלוק ההורה. אם אחד מאבות האב האלה לא מציין את הגודל, ההנחה היא שגודלם הוא 0 x 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

ממשק ה-API של JavaScript של מפות Google נטען באמצעות תג script, שאותו אפשר להוסיף בתוך קובץ ה-HTML או באופן דינמי באמצעות קובץ JavaScript נפרד. מומלץ לסקור את שתי הגישות ולבחור את זו שהכי מתאימה לאופן שבו בנוי הקוד בפרויקט.

טעינה מוטבעת

כדי לטעון את ממשק ה-API של JavaScript של מפות Google בתוך קובץ HTML, צריך להוסיף תג script כפי שמוצג בהמשך.

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

טעינה דינמית

כדי לטעון באופן דינמי את ממשק ה-API של JavaScript של מפות Google בתוך שורה, באמצעות קובץ JavaScript נפרד, עיינו בדוגמה שבהמשך. הגישה הזו מאפשרת לטפל בכל הקוד לצורך עבודה עם ה-API מקובץ .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"

ה-Loader חושף ממשק Promise ו-callback. ההדגמה הבאה ממחישה את השימוש בשיטת ברירת המחדל של 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, שבו אתם מספקים את מפתח ה-API, ו-callback, שבו מציינים את השם של פונקציה גלובלית שאליה תתבצע קריאה אחרי שה-API של JavaScript של מפות Google ייטען לחלוטין. מידע נוסף על פרמטרים של כתובות URL
async: בקשה מהדפדפן להוריד ולהפעיל את הסקריפט באופן אסינכרוני. לאחר הרצת הסקריפט, הוא יקרא לפונקציה שצוינה באמצעות הפרמטר callback.

ספריות

כשטוענים את Maps JavaScript API דרך כתובת ה-URL, אפשר לטעון ספריות נוספות באמצעות האופרטור await כדי לקרוא ל-importLibrary() מתוך פונקציה אסינכרונית. ספריות הן מודולים של קוד שמספקים פונקציונליות נוספת לממשק ה-API הראשי של Maps JavaScript, אבל הן לא נטענות, אלא אם ביקשתם אותן באופן ספציפי. מידע נוסף זמין במאמר ספריות ב-Maps JavaScript API.

מיפוי רכיבי DOM

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

כדי שהמפה תופיע בדף אינטרנט, אנחנו צריכים לשריין לה מקום. בדרך כלל, אנחנו עושים זאת על ידי יצירת רכיב div בעל שם וקבלת הפניה לרכיב הזה במודל אובייקט המסמך של הדפדפן (DOM).

בדוגמה שלמעלה השתמשנו ב-CSS כדי להגדיר את גובה ה-div במפה כ-'100%'. השם הזה יורחב כדי להתאים לגודל במכשירים ניידים. יכול להיות שיהיה צורך להתאים את ערכי הרוחב והגובה בהתאם לגודל המסך ולמרווח הפנימי של הדפדפן. חשוב לשים לב ש-div בדרך כלל לוקח את הרוחב שלו מהרכיב שמכיל את הפונקציה, ו-divs ריקים הם בדרך כלל 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.

למידע על האופן שבו ממשק ה-API של JavaScript של מפות Google טוען משבצות על סמך רמת הזום הנוכחית, עיינו במדריך למיפוי וקואורדינטות של משבצות.

אובייקט המפה

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

המחלקה של JavaScript שמייצגת מפה היא המחלקה Map. אובייקטים מהמחלקה הזו מגדירים מפה יחידה בדף. (אפשר ליצור יותר ממופע אחד במחלקה הזו – כל אובייקט יגדיר מפה נפרדת בדף). אנחנו יוצרים מכונה חדשה של המחלקה הזו באמצעות האופרטור new של JavaScript.

כשיוצרים מופע מפה חדש, צריך לציין רכיב HTML <div> בדף כמאגר תגים של המפה. צמתים ב-HTML הם צאצאים של אובייקט document ב-JavaScript, ואנחנו מקבלים הפניה לרכיב הזה באמצעות ה-method document.getElementById().

הקוד מגדיר משתנה (בשם map) ומקצה את המשתנה לאובייקט Map חדש. הפונקציה Map() נקראת constructor, וההגדרה שלה מוצגת כאן:

יצרן	תיאור
`Map(mapDiv:Node, opts?:MapOptions )`	יוצר מפה חדשה בתוך מאגר ה-HTML הנתון – שהוא בדרך כלל רכיב DIV – באמצעות כל פרמטר (אופציונלי) שמועבר.

פתרון בעיות

שגיאות שקשורות למפתח API ולחיוב

בנסיבות מסוימות ייתכן שיוצגו מפה כהה, או תמונת Street View 'שלילית', שכוללת סימן מים עם הטקסט 'למטרות פיתוח בלבד'. ההתנהגות הזו מצביעה בדרך כלל על בעיות במפתח API או בחיוב. כדי להשתמש במוצרי הפלטפורמה של מפות Google צריך להפעיל את החיוב בחשבון וכל הבקשות חייבות לכלול מפתח API תקין. התהליך הבא יעזור לפתור את הבעיה:

האם השתמשת במפתח API?

אין לי מושג איך אפשר לבדוק אם משתמשים במפתח API?

מפתח API מועבר בתור הפרמטר key בכתובת ה-URL שמשמש לטעינת API של JavaScript של מפות Google. יש כמה דרכים לבדוק אם אתם משתמשים במפתח API:

אפשר להשתמש בתוסף ל-Chrome Google Maps Platform API Checker. כך אפשר לקבוע אם האתר מטמיע באופן תקין את ממשקי ה-API של מפות Google ברישיון של Google.
אם משתמשים בספרייה או בפלאגין כדי לטעון את ממשק ה-API של JavaScript של מפות Google, צריך לבדוק את ההגדרות של הספרייה הזו ולחפש אפשרות למפתח API.
בודקים שגיאות בדפדפן. אם אתם רואים את ההודעות הבאות, סימן שלא השתמשתם במפתח ה-API בצורה נכונה:

אזהרה לגבי JavaScript API של מפות Google : NoApiKeys
שגיאת JavaScript API של מפות Google : MissingKeyMapError

למפתחי אתרים:

אם יש לכם גישה לקוד המקור של האפליקציה, עליכם לחפש את התג <script> שמשמש לטעינת ממשק ה-API של JavaScript של מפות Google. כשטוענים את ממשק ה-API של JavaScript של מפות Google, צריך להחליף את הערך YOUR_API_KEY בקוד שבהמשך במפתח ה-API שלך.
```
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
```
לבדוק את התנועה ברשת שנוצרה על ידי האתר בדפדפן. אפשר לראות את ההגדרות האלה ב-Chrome בכרטיסייה רשת של DevTools. כאן יופיעו בקשות הרשת שנשלחו על ידי האתר שלכם. בקשות שמבוצעות באמצעות API של JavaScript של מפות Google יופיעו בנתיב maps/api/js. כאן אפשר לבדוק אם הבקשות משתמשות בפרמטר key. כדאי לסנן את התנועה ברשת לפי maps/api/js כשמעיינים בכרטיסייה רשת.

לא, אין לי מפתח API.

כדי לקבל מפתח API יש ללחוץ על הלחצן שלמטה. אם לא מופיעה הגדרה מודרכת, יש לפעול לפי ההוראות המלאות במאמר תחילת העבודה עם הפלטפורמה של מפות Google.
שנתחיל?

כן, יש לי מפתח API.

נהדר! בואו נמשיך ונבדוק אם משויך לפרויקט חשבון לחיוב.

האם מצורף חשבון לחיוב לפרויקט שלכם?

אין לי מושג איך אפשר לבדוק אם חשבון לחיוב מצורף לפרויקט?

נכנסים ל דף Billing במסוף Google Cloud ובוחרים את הפרויקט שבו נוצר מפתח ה-API. כדי לוודא שהמפתח משויך לפרויקט:

עוברים לקטע Credentials, שאליו אפשר להיכנס מהסרגל הצד השמאלי בקטע Google Maps Platform > Credentials (הפלטפורמה של מפות Google > פרטי כניסה).
בודקים שמפתח ה-API שבו אתם משתמשים כרגע באתר מופיע. אם זה לא המצב, עליכם לעבור לפרויקט אחר ולבדוק את פרטי הכניסה שם.
אם לא הצלחתם לאתר את הפרויקט עבור מפתח ה-API, יכול להיות שאיבדתם את הגישה לפרויקט הזה. תוכלו לבקש עזרה ממשתמשים אחרים בארגון. אם לא ניתן לאתר את הפרויקט המקורי, מבצעים את הפעולות הבאות:
1. יוצרים פרויקט חדש. כדי לעשות את זה, בוחרים באפשרות New Project (פרויקט חדש) ברשימת הפרויקטים, או בוחרים באפשרות Create Project בדף 'מנהל המשאבים'.
2. יוצרים מפתח API חדש. אפשר לעשות את זה בדף Credentials. אחרי שנכנסים לדף, לוחצים על Create credentials ואז על API key.

אחרי שמאתרים את הפרויקט במסוף Cloud, בודקים אם החשבון לחיוב מצורף לקטע Billing בתפריט השמאלי.

לא, לא מצורף חשבון לחיוב לפרויקט שלי.

נכנסים לדף Enable Billing במסוף Cloud ומוסיפים לפרויקט חשבון לחיוב. מידע נוסף זמין במאמר תחילת העבודה עם הפלטפורמה של מפות Google.

כן, משויך לפרויקט שלי חשבון לחיוב.

נהדר! עליך לוודא שאמצעי החיוב שסיפקת חוקי.

האם שיטת החיוב שסיפקתם לא תקפה יותר (לדוגמה, כרטיס אשראי שפג תוקפו)?

אפשר להוסיף, להסיר ולעדכן אמצעי תשלום במסוף Cloud.

האם יש חריגה מהמגבלה היומית שאתם מגדירים ב-API?

אם הגדרתם מגבלה יומית לאחד מממשקי ה-API שלכם, והיא מקובלת כדי למנוע עליות בלתי צפויות, אפשר לפתור את הבעיה על ידי הגדלת המגבלה היומית.

תוכלו לבדוק את המגבלות היומיות שלכם במרכז הבקרה של ממשקי ה-API והשירותים במסוף Cloud. אחרי שנכנסים לשם:

אם מוצגת הנחיה, בוחרים פרויקט.
בוחרים API מהרשימה ולאחר מכן לוחצים על הכרטיסייה Quotas.

האם במפתח ה-API יש הגבלה על כתובות IP?

אפשר להשתמש במפתחות API עם הגבלה על כתובות IP רק בשירותי אינטרנט שמיועדים לשימוש בצד השרת (כמו Geocoding API וממשקי API אחרים של שירותי אינטרנט). לרוב שירותי האינטרנט האלה יש שירותים מקבילים במסגרת Maps JavaScript API (לדוגמה, אפשר לעיין בשירות Geocoding). כדי להשתמש בשירותים בצד הלקוח של Maps JavaScript API, צריך ליצור מפתח API נפרד שאפשר לאבטח באמצעות הגבלה על גורמים מפנים מסוג HTTP (מידע נוסף זמין במאמר קבלה, הוספה והגבלה של מפתח API).

אם הקוד לא עובד:

כדי לעזור לך להפעיל את קוד המפות שלך, ברנדן קני ומאנו מארק (Mano Marks) מציינים בסרטון הזה כמה טעויות נפוצות ואיך לתקן אותן.

מחפשים שגיאות הקלדה. חשוב לזכור ש-JavaScript היא שפה תלוית אותיות רישיות (case-sensitive).
כדאי לבדוק את הפרטים הבסיסיים – חלק מהבעיות הנפוצות ביותר מתרחשות במהלך יצירת המפה הראשונית. למשל:
- חשוב לוודא שציינתם את המאפיינים של zoom ו-center באפשרויות המפה שלכם.
- חשוב לוודא שהצהרת על רכיב div שבו המפה תופיע במסך.
- יש לוודא שרכיב ה-div במפה כולל גובה. כברירת מחדל, רכיבי div נוצרים בגובה 0 ולכן הם לא נראים.
ריכזנו כאן דוגמאות להטמעה של קובצי עזר.
אפשר להשתמש בכלי לניפוי באגים של JavaScript כדי לזהות בעיות, כמו הבעיה שזמינה בכלים למפתחים ב-Chrome. בתור התחלה, מומלץ לבדוק אם יש שגיאות בלוח JavaScript.
מפרסמים שאלות ב-Stack Overflow. הנחיות לפרסום שאלות מעולות זמינות בדף Support.