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

מבוא

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

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

תחילת העבודה

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

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

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

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

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

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

  1. נכנסים אל מסוף Google Cloud.

  2. יוצרים או בוחרים פרויקט.

  3. לוחצים על המשך כדי להפעיל את ה-API ואת השירותים הקשורים.

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

  5. כדי למנוע גניבת מכסות ולאבטח את מפתח ה-API: שימוש במפתחות API.

  6. הפעלת החיוב. למידע על שימוש וחיוב אפשר לקבל מידע נוסף.

  7. אחרי שמקבלים מפתח 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

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

הסבר על הקוד

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

  • הצהרת על האפליקציה כ-HTML5 באמצעות ההצהרה !DOCTYPE html.
  • נוצר רכיב div בשם 'מפה' כדי להחזיק את המפה.
  • טעינת ה-JavaScript API של מפות Google באמצעות ה-Bootstraploader.

להצהיר על האפליקציה כ-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>

יצירת רכיב div

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

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

  • 1: עולם
  • 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

כדאי לנסות דוגמה

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

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

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

  • פועלים לפי השלבים הבאים כדי לקבל את קו הרוחב קו האורך של מיקום במפות Google.

    1. פותחים את מפות Google בדפדפן.
    2. יש ללחוץ לחיצה ימנית על המיקום המדויק במפה שעבורו נדרשת של הקואורדינטות.
    3. בוחרים באפשרות מה יש כאן בתפריט ההקשר שמופיע. המפה מציגה כרטיס בתחתית המסך. חיפוש קו הרוחב וקו האורך בשורה האחרונה של הכרטיס.

  • ניתן להמיר כתובת לקואורדינטות של קו אורך וקו רוחב באמצעות שירות קידוד גיאוגרפי. המדריכים למפתחים מספקים מידע מפורט על התחלת השימוש בשירות המרת כתובות לקואורדינטות (geocoding).