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

הוספת מפה של Google עם סמן לאתר

מבוא

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

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

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

תחילת העבודה

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

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

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

שלב 1: יצירת דף HTML

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

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add 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>
    <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

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

הסבר על הקוד

הקוד הבא יוצר דף HTML שמכיל ראש וגוף.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

אפשר להוסיף כותרת ברמה שלוש מעל למפה באמצעות הקוד הבא.

<h3>My Google Maps Demo</h3>

הקוד הבא מגדיר אזור בדף עבור מפת 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 ליותר מ-0 פיקסלים. במקרה כזה, div מוגדר לגובה של 400 פיקסלים ולרוחב של 100% להצגת רוחב דף האינטרנט.

טוען האתחול מכין את ה-API של JavaScript למפות Google לטעינה (לא נטענות ספריות עד להפעלה של 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.

שלב 2: הוספת מפה עם סמן

בקטע הזה מוסבר איך לטעון את 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 ו-AdvancedMarkerView נטענות כשהפונקציה initMap() מופעלת.

הסבר על הקוד

הקוד הבא בונה אובייקט חדש של מפות 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

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

למידע נוסף על קבלת קואורדינטות של קווי אורך ורוחב, או המרת כתובת לקואורדינטות גיאוגרפיות.

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

הקוד שבהמשך מציב סמן על המפה. המאפיין 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

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

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

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

כך מקבלים מפתח API:

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

מחליפים את הערך של הפרמטר key שמופיע בכתובת ה-URL במפתח API משלכם (כלומר, מפתח ה-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>

שומרים את הקובץ הזה בשם שמסתיים ב-.html, כמו index.html.
טענו את קובץ ה-HTML בדפדפן אינטרנט על ידי גרירתו משולחן העבודה לדפדפן שלכם. לחלופין, לחיצה כפולה על הקובץ פועלת ברוב מערכות ההפעלה.

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

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