השקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.

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

הוספת מפה של Google עם סמן באמצעות JavaScript

מבוא

במדריך הזה מוסבר איך להוסיף למסמך HTML פשוט מפת Google עם סמן. הוא מתאים לאנשים עם ידע ברמת מתחילים או ביניים ב-HTML וב-CSS, וידע בסיסי ב-JavaScript.

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

תחילת העבודה

כדי ליצור מפה של Google עם סמן בדף אינטרנט, צריך לבצע שלושה שלבים:

קבלת מפתח API
יצירת דף HTML
הוספת מפה עם סמן

צריך דפדפן אינטרנט. בוחרים דפדפן מוכר כמו Google Chrome (מומלץ), ‏ Firefox, ‏ Safari או Edge, בהתאם לפלטפורמה שלכם מרשימת הדפדפנים הנתמכים.

שלב 1: קבלת מפתח API

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

כדי לקבל מפתח API:

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

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

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

שלב 2: יוצרים דף HTML

זוהי דוגמה לקוד של דף אינטרנט בסיסי ב-HTML:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <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

שימו לב: זהו דף בסיסי מאוד עם כותרת ברמה 3 (h3) ורכיב div יחיד. אתם יכולים להוסיף לדף האינטרנט כל תוכן שתרצו.

הסבר על הקוד

בשלב הזה בדוגמה, יש לנו:

הצהרת על האפליקציה כאפליקציית HTML5 באמצעות ההצהרה !DOCTYPE html.
יצרנו רכיב div בשם map כדי להציג את המפה.
טעינה של Maps JavaScript API באמצעות טוען bootstrap.

הצהרה על האפליקציה כ-HTML5

מומלץ להצהיר על DOCTYPE אמיתי באפליקציית האינטרנט. בדוגמאות שבהמשך, הצהרנו על האפליקציות שלנו כ-HTML5 באמצעות DOCTYPE HTML5 פשוט, כמו שמוצג כאן:

<!DOCTYPE html>

רוב הדפדפנים העדכניים יעבדו תוכן שמוצהר באמצעות התג DOCTYPE ב'מצב תקנים', כלומר האפליקציה שלכם תהיה תואמת יותר לדפדפנים שונים. התג DOCTYPE גם נועד לפעול בצורה חלקה; דפדפנים שלא מבינים אותו יתעלמו ממנו וישתמשו ב'מצב מוזר' כדי להציג את התוכן שלהם.

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

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

יצירת רכיב div

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

הקוד שלמטה מגדיר אזור בדף עבור מפת Google.

<!--The div element for the map -->
<div id="map"></div>

בשלב הזה של המדריך, div מופיע כבלוק אפור בלבד, כי עדיין לא הוספתם מפה. בדוגמה הבאה מוצג קוד ה-CSS שקובע את הגודל והצבע של div.

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

בדוגמה שלמעלה, רכיב style מגדיר את הגודל div של המפה. כדי שהמפה תהיה גלויה, צריך להגדיר את הרוחב והגובה של div לערך שגדול מ-0px. במקרה הזה, הגובה של div מוגדר ל-400 פיקסלים, והרוחב מוגדר ל-100% כדי שהתמונה תוצג לרוחב של דף האינטרנט. שימו לב שרוחב של רכיבי div נקבע בדרך כלל לפי רכיב ההכלה שלהם, וגובה של רכיבי div ריקים הוא בדרך כלל 0. לכן, תמיד צריך להגדיר גובה באופן מפורש ב-div.

טעינת Maps JavaScript API

טוען ה-bootstrap מכין את Maps JavaScript API לטעינה (לא נטענות ספריות עד שמפעילים את importLibrary()).

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

הוראות לקבלת מפתח API משלכם מופיעות במאמר שלב 3: קבלת מפתח API.

שלב 3: מוסיפים מפה עם סמן

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

TypeScript

‫

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

בדוגמת הקוד שלמעלה, הספריות Map ו-AdvancedMarkerElement נטענות כשקוראים לפונקציה initMap().

הסבר על הקוד

בשלב הזה במדריך, יש לנו:

הגדרת פונקציית JavaScript שיוצרת מפה ב-div.
יצרנו AdvancedMarkerElement כדי להוסיף סמן למפה.

הוספת מפה

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

TypeScript

‫

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});
index.js

יש שתי אפשרויות שחובה להשתמש בהן בכל מפה: center ו-zoom. בדוגמת הקוד שלמעלה, הפונקציה new Map() יוצרת אובייקט חדש של מפות Google. המאפיין center מציין לממשק ה-API איפה למרכז את המפה.

המאפיין zoom מציין את רמת הזום של המפה. זום: 0 הוא הזום הנמוך ביותר, ומציג את כדור הארץ כולו. כדי להתקרב לכדור הארץ ברזולוציות גבוהות יותר, מגדירים ערך זום גבוה יותר.

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

‫1: World
‫5: מסת קרקע או יבשת
‫10: עיר
‫15: רחובות
‫20: בניינים

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

הוסף סמן

הקוד שלמטה מציב סמן במפה. המאפיין position מגדיר את מיקום הסמן.

TypeScript

‫

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});index.js

קוד לדוגמה מלא

דוגמת הקוד המלאה:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

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>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <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

מידע נוסף על סמנים:

טיפים ופתרון בעיות

מידע נוסף על קבלת קואורדינטות של קו רוחב וקו אורך או על המרה של כתובת לקואורדינטות גיאוגרפיות
אתם יכולים לשנות אפשרויות כמו סגנון ומאפיינים כדי להתאים אישית את המפה. למידע נוסף על התאמה אישית של מפות, אפשר לקרוא את המדריכים בנושא עיצוב וציור במפה.
אפשר להשתמש במסוף כלי הפיתוח בדפדפן האינטרנט כדי לבדוק ולהריץ את הקוד, לקרוא דוחות שגיאות ולפתור בעיות בקוד.
כדי לפתוח את המסוף ב-Chrome, משתמשים במקשי הקיצור הבאים:
Command+Option+J (ב-Mac) או Control+Shift+J (ב-Windows).
כדי לקבל את קואורדינטות קו הרוחב וקו האורך של מיקום במפות Google, פועלים לפי השלבים הבאים.
1. פותחים את מפות Google בדפדפן.
2. לוחצים לחיצה ימנית על המיקום המדויק במפה שרוצים לקבל את הקואורדינטות שלו.
3. בתפריט ההקשר שמופיע, בוחרים באפשרות מה יש כאן. בתחתית המסך מופיע כרטיס עם המפה. בשורת האחרונה בכרטיס מוצאים את הקואורדינטות של קו הרוחב וקו האורך.
אפשר להמיר כתובת לקואורדינטות של קו אורך וקו רוחב באמצעות שירות הגיאו-קידוד. במדריכים למפתחים מוסבר בפירוט איך מתחילים לעבוד עם שירות הקידוד הגיאוגרפי.

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

מבוא

תחילת העבודה

שלב 1: קבלת מפתח API

שלב 2: יוצרים דף HTML

הסבר על הקוד

הצהרה על האפליקציה כ-HTML5

יצירת רכיב div

טעינת Maps JavaScript API

שלב 3: מוסיפים מפה עם סמן

TypeScript

JavaScript

הסבר על הקוד

הוספת מפה

TypeScript

JavaScript

הוסף סמן

TypeScript

JavaScript

קוד לדוגמה מלא

TypeScript

JavaScript

CSS

HTML

לניסיון

מידע נוסף על סמנים:

טיפים ופתרון בעיות

הוספת מפה של Google עם סמן באמצעות JavaScript