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

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

סקירה כללית

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

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

קהל

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

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

שלום עולם

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

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

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

טעינת ה-API של JavaScript במפות

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

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

רכיב טעינה של אתחול

כדי לטעון את ה-API של JavaScript של מפות Google, צריך להוסיף את טוען האתחול המוטבע ל-Botstrap לקוד האפליקציה, כפי שמוצג בקטע הקוד הבא:

<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

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

npm install @googlemaps/js-api-loader

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

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

הטוען חושף ממשק של הבטחה וקריאה חוזרת (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 true באפליקציית האינטרנט. בדוגמאות הבאות הצהירנו על האפליקציות שלנו כ-HTML5 באמצעות HTML5 הפשוט DOCTYPE, כפי שמוצג כאן:

<!DOCTYPE html>

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

שימו לב ששירות CSS מסוים שפועל במצב תאימות (quirks) לא תקף במצב רגיל. באופן ספציפי, כל הגדלים שמבוססים על אחוזים צריכים לרשת מאלמנטים של בלוק הורה. אם אחד מאבות האב לא מציין גודל, ההנחה היא שגודלם הוא 0x0 פיקסלים. לכן אנחנו כוללים את ההצהרה הבאה: <style>:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

הצהרת ה-CSS הזו מציינת שמאגר המפה <div> (עם המזהה map) צריך לתפוס 100% מגוף ה-HTML. חשוב לשים לב שגם עלינו להצהיר באופן ספציפי על האחוזים האלה עבור <body> ו-<html>.

טעינת ה-API של JavaScript של מפות Google

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

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

1: עולם
5: קרקע/יבשת
10: עיר
15: רחובות
20: בניינים

שלוש התמונות הבאות משקפות את אותו המיקום של טוקיו ברמות הזום 0, 7 ו-18.

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

אובייקט המפה

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

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

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

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

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

פתרון בעיות

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

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

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

אני עדיין בהתלבטות. איך אפשר לבדוק אם משתמשים במפתח API?

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

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

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

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

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

לא, אני לא משתמש במפתח API.

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

כן, אני משתמש במפתח API.

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

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

אני עדיין בהתלבטות. איך אפשר לבדוק אם חשבון לחיוב מצורף לפרויקט שלי?

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

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

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

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

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

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

נהדר! חשוב לוודא ששיטת החיוב שסיפקת חוקית.

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

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

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

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

אפשר לבדוק את המגבלות היומיות דרך APIs & Services Dashboard ב-Cloud Console. אחרי הביקור שם:

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

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

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

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

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

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