המדריך הזה מראה איך להטמיע מפה אינטראקטיבית בדף האינטרנט.
יצירת כתובת האתר של ה-API להטמעה של מפות Google
הנה כתובת URL לדוגמה שטוענת את ה-API להטמעה של מפות Google:
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS
מחליפים את:
- MAP_MODE במצב המפה.
- YOUR_API_KEY במפתח ה-API שלך. מידע נוסף זמין במאמר קבלת מפתח API.
- PARAMETERS עם הפרמטרים הנדרשים והאופציונליים למצב המפה.
הוספת כתובת ה-URL ל-iframe
על מנת להשתמש ב-Maps embed API בדף האינטרנט שלך, עליך להגדיר את כתובת ה-URL שבנית כערך המאפיין src
של iframe. אפשר לשלוט בגודל המפה באמצעות המאפיינים height
ו-width
של ה-iframe, לדוגמה:
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
allowfullscreen>
</iframe>
דוגמת ה-iframe שלמעלה משתמשת במאפיינים הנוספים:
- הנכס
allowfullscreen
כדי לאפשר לחלקים מסוימים במפה לעבור למסך מלא. - המאפיינים
frameborder="0"
ו-style="border:0"
להסרת הגבול הסטנדרטי של iframe מהמפה. - המאפיין
referrerpolicy="no-referrer-when-downgrade"
שמאפשר לדפדפן לשלוח את כתובת ה-URL המלאה ככותרתReferer
עם הבקשה, כדי שההגבלות על מפתחות API יפעלו כמו שצריך.
אתם יכולים לשנות את גודל ה-iframe כך שיתאים למבנה ולעיצוב של האתר שלכם, אבל גילינו שלרוב קל יותר למבקרים ליצור אינטראקציה עם מפות גדולות יותר. שים לב שמפות מוטמעות אינן נתמכות מתחת לגודל של 200 פיקסלים באף אחד מהמימדים.
הגבלות על מפתחות API
אם באתר המארח יש מטא תג referrer
המוגדר ל-no-referrer
או
same-origin
, הדפדפן לא ישלח את הכותרת Referer
ל-Google. במקרה כזה, ההגבלה של מפתח ה-API עלולה לדחות את הבקשות. כדי שההגבלה תפעל כמו שצריך, צריך להוסיף נכס referrerpolicy
ל-iframe, כמו בדוגמה שלמעלה, כדי לאפשר באופן מפורש שליחה של כותרות Referer
ל-Google.
מודעות במפה
ה-API להטמעה של מפות Google עשוי לכלול פרסום במפה. פורמט המודעה וקבוצת המודעות המוצגות בכל מפה נתונה עשויים להשתנות ללא הודעה מוקדמת.
בחירת מצבי מפה
ניתן לציין אחד ממצבי המפה הבאים לשימוש בכתובת ה-URL של הבקשה:
place
: הצגה של סיכה במפה במקום או בכתובת ספציפיים, כמו ציון דרך, עסק, מיקום גיאוגרפי או יישוב.view
: החזרת מפה ללא סמנים או מסלול הגעה.directions
: הצגת הנתיב בין שתי נקודות או יותר שצוינו במפה, וכן המרחק וזמן ההגעה.streetview
: הצגת תצוגות פנורמיות אינטראקטיביות ממיקומים ייעודיים.search
: הצגת תוצאות לחיפוש באזור שמוצג במפה.
מצב place
בכתובת ה-URL הבאה נעשה שימוש במצב המפה place
כדי להציג סמן מפה במגדל אייפל:
https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=Eiffel+Tower,Paris+France
אפשר להשתמש בפרמטרים הבאים:
פרמטר | סוג | תיאור | ערכים קבילים |
---|---|---|---|
q |
חובה | מגדיר את מיקום הסמן במפה. | שם המקום, הכתובת והקוד או מזהה המקום שמסומנים בתו בריחה (escape) באמצעות כתובת URL.
ה-API להטמעה של מפות Google תומך גם ב-+ וגם ב-%20
בעת חילוץ מרחבים משותפים. לדוגמה, ממירים את הביטוי 'בניין עירייה, ניו יורק, ניו יורק' לערך City+Hall,New+York,NY , או מוסיפים את הקודים '849VCWC8+R9' ל-849VCWC8%2BR9 . |
center |
אופציונלי | מגדיר את המרכז של תצוגת המפה. | אפשר להזין קווי אורך ורוחב מופרדים בפסיקים. לדוגמה:
37.4218,-122.0840 . |
zoom |
אופציונלי | מגדיר רמה ראשונית של מרחק מתצוגה של המפה. | ערכים שנעים בין 0 (העולם כולו) עד 21
(מבנים בודדים). הגבול העליון עשוי להשתנות בהתאם לנתוני המפה הזמינים במיקום שנבחר. |
maptype |
אופציונלי | הגדרת הסוג של אריחי המפה לטעינה. | roadmap (ברירת המחדל) או satellite |
language |
אופציונלי | מגדיר את השפה לשימוש ברכיבי ממשק משתמש ובהצגת תוויות על גבי אריחי מפה. כברירת מחדל, תוצג למבקרים מפה בשפה שלהם. הפרמטר הזה נתמך רק במשבצות מסוימות של מדינות. אם השפה הספציפית המבוקשת לא נתמכת בקבוצת המשבצות, המערכת תשתמש בשפת ברירת המחדל של אותה קבוצת אריחים. | |
region |
אופציונלי | מגדיר את הגבולות והתוויות המתאימים להצגה, על סמך רגישויות גיאו-פוליטיות. | מקבל קוד אזור שצוין כמיפוי תג משנה של אזור Unicode בן שני תווים (לא מספרי) לערכים מוכרים של ccTLD ("דומיין ברמה העליונה") בשני תווים. אפשר לעיין בפרטי הכיסוי בפלטפורמה של מפות Google לגבי האזורים הנתמכים. |
מצב view
בדוגמה הבאה נשתמש במצב view
ובפרמטר maptype
האופציונלי כדי להציג תמונת לוויין של המפה:
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
אפשר להשתמש בפרמטרים הבאים:
פרמטר | סוג | תיאור | ערכים קבילים |
---|---|---|---|
center |
חובה | מגדיר את המרכז של תצוגת המפה. | אפשר להזין קווי אורך ורוחב מופרדים בפסיקים. לדוגמה:
37.4218,-122.0840 . |
zoom |
אופציונלי | מגדיר רמה ראשונית של מרחק מתצוגה של המפה. | ערכים שנעים בין 0 (העולם כולו) עד 21
(מבנים בודדים). הגבול העליון עשוי להשתנות בהתאם לנתוני המפה הזמינים במיקום שנבחר. |
maptype |
אופציונלי | הגדרת הסוג של אריחי המפה לטעינה. | roadmap (ברירת המחדל) או satellite |
language |
אופציונלי | מגדיר את השפה לשימוש ברכיבי ממשק משתמש ובהצגת תוויות על גבי אריחי מפה. כברירת מחדל, תוצג למבקרים מפה בשפה שלהם. הפרמטר הזה נתמך רק במשבצות מסוימות של מדינות. אם השפה הספציפית המבוקשת לא נתמכת בקבוצת המשבצות, המערכת תשתמש בשפת ברירת המחדל של אותה קבוצת אריחים. | |
region |
אופציונלי | מגדיר את הגבולות והתוויות המתאימים להצגה, על סמך רגישויות גיאו-פוליטיות. | מקבל קוד אזור שצוין כמיפוי תג משנה של אזור Unicode בן שני תווים (לא מספרי) לערכים מוכרים של ccTLD ("דומיין ברמה העליונה") בשני תווים. אפשר לעיין בפרטי הכיסוי בפלטפורמה של מפות Google לגבי האזורים הנתמכים. |
מצב directions
הדוגמה הבאה משתמשת במצב directions
כדי להציג את הנתיב בין אוסלו
ל-Telemark שבנורווגיה, את המרחק ואת זמן ההגעה כדי להימנע מכבישי אגרה וכבישים מהירים.
https://www.google.com/maps/embed/v1/directions
?key=YOUR_API_KEY
&origin=Oslo+Norway
&destination=Telemark+Norway
&avoid=tolls|highways
אפשר להשתמש בפרמטרים הבאים:
פרמטר | סוג | תיאור | ערכים קבילים |
---|---|---|---|
origin |
חובה | הגדרת נקודת ההתחלה שממנה יוצגו המסלול. | שם המקום, הכתובת והקוד, קווי האורך והרוחב או מזהה המקום שמסומנים בתו בריחה (escape)
ה-API להטמעה של מפות Google תומך גם ב-+ וגם ב-%20
בעת חילוץ מרחבים משותפים. לדוגמה, ממירים את הביטוי 'בניין עירייה, ניו יורק, ניו יורק' לערך City+Hall,New+York,NY , או מוסיפים את הקודים '849VCWC8+R9' ל-849VCWC8%2BR9 . |
destination |
חובה | מגדיר את נקודת הסיום של המסלול. | שם המקום, הכתובת והקוד, קווי האורך והרוחב או מזהה המקום שמסומנים בתו בריחה (escape)
ה-API להטמעה של מפות Google תומך גם ב-+ וגם ב-%20
בעת חילוץ מרחבים משותפים. לדוגמה, ממירים את הביטוי 'בניין עירייה, ניו יורק, ניו יורק' לערך City+Hall,New+York,NY , או מוסיפים את הקודים '849VCWC8+R9' ל-849VCWC8%2BR9 . |
waypoints |
אופציונלי | מציין מקום ביניים אחד או יותר לניתוב הוראות בין נקודת המוצא ליעד. | השם, הכתובת או מזהה המקום של המקום.
אפשר לציין כמה ציוני דרך באמצעות התו המפריד (|) בין מקומות (למשל, Berlin,Germany|Paris,France ). אפשר לציין עד 20 ציוני דרך. |
mode |
אופציונלי | מגדיר את שיטת הנסיעה. אם לא צוין מצב, ה-API של מפות Google יציג אחד או יותר מהמצבים הרלוונטיים ביותר למסלול שצוין. | driving , walking (עם עדיפות למדרכות ומדרכות להולכי רגל, אם יש), bicycling (שמסלולים שעוברים דרך שבילי אופניים ורחובות מועדפים אם הם זמינים), transit או flying . |
avoid |
אופציונלי | מציינת תכונות שיש להימנע מהן במסלול. חשוב לדעת שהאפשרות הזו לא מונעת הצגה של מסלולים שכוללים את התכונות המוגבלות, אלא מטה את התוצאה למסלולים מועדפים יותר. | tolls , ferries ו/או highways .
יש להפריד בין ערכים באמצעות קו אנכי (למשל, avoid=tolls|highways ). |
units |
אופציונלי | מציין את שיטת המדידה, המטרית או האימפריאלית, כשמציגים מרחקים בתוצאות. אם לא מציינים units , המדינה origin של השאילתה קובעת באילו יחידות להשתמש. |
metric או imperial |
center |
אופציונלי | מגדיר את המרכז של תצוגת המפה. | אפשר להזין קווי אורך ורוחב מופרדים בפסיקים. לדוגמה:
37.4218,-122.0840 . |
zoom |
אופציונלי | מגדיר רמה ראשונית של מרחק מתצוגה של המפה. | ערכים שנעים בין 0 (העולם כולו) עד 21
(מבנים בודדים). הגבול העליון עשוי להשתנות בהתאם לנתוני המפה הזמינים במיקום שנבחר. |
maptype |
אופציונלי | הגדרת הסוג של אריחי המפה לטעינה. | roadmap (ברירת המחדל) או satellite |
language |
אופציונלי | מגדיר את השפה לשימוש ברכיבי ממשק משתמש ובהצגת תוויות על גבי אריחי מפה. כברירת מחדל, תוצג למבקרים מפה בשפה שלהם. הפרמטר הזה נתמך רק במשבצות מסוימות של מדינות. אם השפה הספציפית המבוקשת לא נתמכת בקבוצת המשבצות, המערכת תשתמש בשפת ברירת המחדל של אותה קבוצת אריחים. | |
region |
אופציונלי | מגדיר את הגבולות והתוויות המתאימים להצגה, על סמך רגישויות גיאו-פוליטיות. | מקבל קוד אזור שצוין כמיפוי תג משנה של אזור Unicode בן שני תווים (לא מספרי) לערכים מוכרים של ccTLD ("דומיין ברמה העליונה") בשני תווים. אפשר לעיין בפרטי הכיסוי בפלטפורמה של מפות Google לגבי האזורים הנתמכים. |
מצב streetview
ה-API להטמעה של מפות מאפשר לכם להציג תמונות Street View כתמונות פנורמה אינטראקטיביות ממיקומים ייעודיים בכל אזור הכיסוי שלו. יש גם תמונות פנורמיות ב-360° ואוספים מיוחדים של Street View.
כל תמונת פנורמה של Street View מספקת תצוגה מלאה ב-360 מעלות ממיקום יחיד. בתמונות יש תצוגה אופקית של 360 מעלות (זווית היקפית מלאה) ו-180 מעלות של תצוגה אנכית (מישר למעלה עד ישר למטה). מצב streetview
מספק צופה שמציג את הפנורמה שמתקבלת ככדור עם מצלמה במרכזה. אפשר להזיז את המצלמה כדי לשלוט בזום ובכיוון של המצלמה.
צפה בפנורמה הבאה של מצב streetview
:
https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=46.414382,10.013988
&heading=210
&pitch=10
&fov=35
אחד מהפרמטרים הבאים של כתובת האתר חובה:
ב-
location
אפשר להזין קווי אורך ורוחב כערכים מופרדים בפסיקים (46.414382,10.013988
). ממשק ה-API יציג את התמונה הפנורמית שצולמה הכי קרוב למיקום הזה. מכיוון שהתמונות של Street View עוברות רענון מעת לעת, ותמונות עשויות להיות מצולמות במיקומים מעט שונים בכל פעם, ייתכן שהמיקום שלך יצולם לפנורמה אחרת במהלך עדכון התמונות.pano
הוא מזהה פנורמה ספציפי. אם מצייניםpano
, אפשר לציין גםlocation
. ייעשה שימוש ב-location
רק אם ה-API לא מצליח למצוא את מזהה הפנורמה.
הפרמטרים הבאים של כתובות אתרים הם אופציונליים:
פרמטר | סוג | תיאור | ערכים קבילים |
---|---|---|---|
heading |
אופציונלי | מציין את כיוון המצפן של המצלמה במעלות בכיוון השעון מצפון. | ערך במעלות מ-180° עד 360° |
pitch |
אופציונלי | מציין את הזווית, למעלה או למטה, של המצלמה. ערכים חיוביים יפנו את המצלמה למעלה, וערכים שליליים יפנו את המצלמה כלפי מטה. גובה הצלילה שמוגדר כברירת מחדל של 0° נקבע על סמך מיקום המצלמה בזמן צילום התמונה. לכן, גובה של 0° הוא לרוב אופקי, אבל לא תמיד. לדוגמה, סביר להניח שבתמונה שמצולמת על גבעה יוצג גובה-רוחב שאינו אופקי כברירת מחדל. | ערך במעלות מ-90°- עד 90° |
fov |
אופציונלי | קובע את שדה הראייה האופקי של התמונה. ברירת המחדל היא 90°. כשמדובר באזור תצוגה בגודל קבוע, שדה התצוגה יכול להיחשב כרמת הזום, ומספרים קטנים יותר מציינים רמה גבוהה יותר של מרחק מתצוגה. | ערך במעלות, עם טווח של 10°-100° |
center |
אופציונלי | מגדיר את המרכז של תצוגת המפה. | אפשר להזין קווי אורך ורוחב מופרדים בפסיקים. לדוגמה:
37.4218,-122.0840 . |
zoom |
אופציונלי | מגדיר רמה ראשונית של מרחק מתצוגה של המפה. | ערכים שנעים בין 0 (העולם כולו) עד 21
(מבנים בודדים). הגבול העליון עשוי להשתנות בהתאם לנתוני המפה הזמינים במיקום שנבחר. |
maptype |
אופציונלי | הגדרת הסוג של אריחי המפה לטעינה. | roadmap (ברירת המחדל) או satellite |
language |
אופציונלי | מגדיר את השפה לשימוש ברכיבי ממשק משתמש ובהצגת תוויות על גבי אריחי מפה. כברירת מחדל, תוצג למבקרים מפה בשפה שלהם. הפרמטר הזה נתמך רק במשבצות מסוימות של מדינות. אם השפה הספציפית המבוקשת לא נתמכת בקבוצת המשבצות, המערכת תשתמש בשפת ברירת המחדל של אותה קבוצת אריחים. | |
region |
אופציונלי | מגדיר את הגבולות והתוויות המתאימים להצגה, על סמך רגישויות גיאו-פוליטיות. | מקבל קוד אזור שצוין כמיפוי תג משנה של אזור Unicode בן שני תווים (לא מספרי) לערכים מוכרים של ccTLD ("דומיין ברמה העליונה") בשני תווים. אפשר לעיין בפרטי הכיסוי בפלטפורמה של מפות Google לגבי האזורים הנתמכים. |
מצב search
מצב Search
מציג תוצאות לחיפוש באזור שמוצג במפה.
מומלץ להגדיר מיקום לחיפוש על ידי הוספת מיקום למונח החיפוש (record+stores+in+Seattle
) או על ידי הוספת הפרמטר center
והפרמטר zoom
כדי לקשר את החיפוש.
https://www.google.com/maps/embed/v1/search
?key=YOUR_API_KEY
&q=record+stores+in+Seattle
אפשר להשתמש בפרמטרים הבאים:
פרמטר | סוג | תיאור | ערכים קבילים |
---|---|---|---|
q |
חובה | מגדיר את מונח החיפוש. | זה יכול לכלול הגבלה גיאוגרפית, כמו in+Seattle או near+98033 . |
center |
אופציונלי | מגדיר את המרכז של תצוגת המפה. | אפשר להזין קווי אורך ורוחב מופרדים בפסיקים. לדוגמה:
37.4218,-122.0840 . |
zoom |
אופציונלי | מגדיר רמה ראשונית של מרחק מתצוגה של המפה. | ערכים שנעים בין 0 (העולם כולו) עד 21
(מבנים בודדים). הגבול העליון עשוי להשתנות בהתאם לנתוני המפה הזמינים במיקום שנבחר. |
maptype |
אופציונלי | הגדרת הסוג של אריחי המפה לטעינה. | roadmap (ברירת המחדל) או satellite |
language |
אופציונלי | מגדיר את השפה לשימוש ברכיבי ממשק משתמש ובהצגת תוויות על גבי אריחי מפה. כברירת מחדל, תוצג למבקרים מפה בשפה שלהם. הפרמטר הזה נתמך רק במשבצות מסוימות של מדינות. אם השפה הספציפית המבוקשת לא נתמכת בקבוצת המשבצות, המערכת תשתמש בשפת ברירת המחדל של אותה קבוצת אריחים. | |
region |
אופציונלי | מגדיר את הגבולות והתוויות המתאימים להצגה, על סמך רגישויות גיאו-פוליטיות. | מקבל קוד אזור שצוין כמיפוי תג משנה של אזור Unicode בן שני תווים (לא מספרי) לערכים מוכרים של ccTLD ("דומיין ברמה העליונה") בשני תווים. אפשר לעיין בפרטי הכיסוי בפלטפורמה של מפות Google לגבי האזורים הנתמכים. |
פרמטרים של מזהה מקום
ה-API להטמעה של מפות Google תומך בשימוש במזהי מקומות במקום לציין שם או כתובת של מקום. מזהי מקומות הם דרך יציבה לזיהוי ייחודי של מקום. למידע נוסף, עיין במסמכי התיעוד של API של מקומות Google.
ה-API להטמעה של מפות Google מקבל מזהי מקומות לפרמטרים הבאים של כתובות URL:
q
origin
destination
waypoints
כדי להשתמש במזהה מקום, קודם צריך להוסיף את הקידומת place_id:
. הקוד הבא מציין את בניין העירייה של ניו יורק בתור המקור של הבקשה לקבלת מסלול: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
מגדיר רדיוס שצוין במטרים, שבו יש לחפש פנורמה, במרכז קו הרוחב וקו האורך שצוינו. הערכים החוקיים הם מספרים שלמים לא שליליים. ערך ברירת המחדל הוא 50.source
מגביל את החיפושים ב-Street View למקורות שנבחרו. הערכים החוקיים כוללים:default
משתמש במקורות ברירת המחדל ל-Street View. החיפושים לא מוגבלים למקורות ספציפיים.outdoor
מגביל את החיפושים לאוספים בחוץ. אוספים בתוך מבנים לא נכללים בתוצאות החיפוש. שימו לב שייתכן שלא קיימות תמונות פנורמיות חוץ במיקום שצוין. כמו כן, שימו לב שהחיפוש מחזיר תמונות פנורמה רק כאשר ניתן לקבוע אם הן בפנים או בחוץ. לדוגמה, תמונות פנורמיות ב-360° לא מוחזרות כי לא ידוע אם הם בפנים או בחוץ.