הוספת מפה של Google לדף אינטרנט

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

סקירה כללית

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

  • טוענים את Maps JavaScript API באמצעות טוען bootstrap. כאן מועבר מפתח ה-API. אפשר להוסיף אותו לקובצי המקור של HTML או JavaScript.
  • מוסיפים את המפה לדף ה-HTML ומוסיפים את סגנונות ה-CSS הנדרשים.
  • טוענים את ספריית maps ומאתחלים את המפה.

הוספת מפה באמצעות רכיב gmp-map

השימוש ברכיב gmp-map הוא הדרך המומלצת להוספת מפת Google לדף אינטרנט. זהו רכיב HTML מותאם אישית שנוצר באמצעות רכיבי אינטרנט. כדי להוסיף מפה לדף אינטרנט באמצעות רכיב gmp-map, פועלים לפי השלבים הבאים.

  1. מוסיפים רכיב script שמכיל את ה-bootstrap לדף HTML, או מוסיפים אותו לקובץ מקור של JavaScript או TypeScript בלי רכיב script. מגדירים את האתחול באמצעות מפתח ה-API ואפשרויות נוספות. אפשר לבחור בין ייבוא דינמי של ספריות לבין טעינה ישירה של סקריפט. בדוגמה הזו מוצג איך מוסיפים את סקריפט האתחול לטעינה ישירה של סקריפט לדף HTML:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

    מידע נוסף על טעינת Google Maps JavaScript API

  2. בדף ה-HTML, מוסיפים רכיב gmp-map. מציינים קווי אורך ורוחב של center (חובה), ערך זום של zoom (חובה) ו-map-id אם צריך (חובה לתכונות מסוימות כמו סמנים מתקדמים). כדי שהמפה תהיה גלויה, צריך להשתמש במאפיין height של CSS. אפשר לציין אותו ב-HTML או ב-CSS. בדוגמה הזו, מאפיין הסגנון height מצוין ב-HTML כדי לשמור על פשטות.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

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

<html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></gmp-map>
   <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

הוספת מפה באמצעות רכיב div (גרסה קודמת) ו-JavaScript

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

  1. מוסיפים רכיב script שמכיל את ה-bootstrap לדף HTML, או מוסיפים אותו לקובץ מקור של JavaScript או TypeScript בלי רכיב script. מגדירים את האתחול באמצעות מפתח ה-API ואפשרויות נוספות. אפשר לבחור בין ייבוא דינמי של ספרייה לבין טעינה ישירה של סקריפט. בדוגמה הזו מוצג איך מוסיפים את ה-bootstrap הדינמי לדף HTML:

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

    מידע נוסף על טעינת Google Maps JavaScript API

  2. בדף ה-HTML, מוסיפים רכיב div שיכיל את המפה.

    <div id="map"></div>

  3. ב-CSS, מגדירים את גובה המפה ל-100%. המאפיין height של CSS הוא חובה כדי שהמפה תהיה גלויה.

    #map {
  height: 100%;
}

  4. בקובץ ה-JavaScript, יוצרים פונקציה לטעינת הספרייה maps ומאתחלים את המפה. מציינים את הקואורדינטות של קו הרוחב וקו האורך של center, ואת מרחק התצוגה שבו רוצים להשתמש עבור zoom. במקרה הצורך, מוסיפים מזהה מפה באמצעות המאפיין map-id property.

    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

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

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>

    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

דוגמה לניסיון

הגדרה ואחזור של מאפיינים במופע של המפה

כדי לבצע פעולות במפה, בוחרים את הרכיב שמכיל אותה. הקוד שצריך להשתמש בו משתנה בהתאם לרכיב gmp-map או לרכיב div שבהם השתמשתם.

קבלת מופע של מפה מרכיב gmp-map

כדי לקבל את מופע המפה כשמשתמשים באלמנט gmp-map, משתמשים ב-document.querySelector כדי לאחזר מופע mapElement, כמו שמוצג כאן.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

לאחר מכן מגדירים מאפיינים במופע mapElement:

mapElement.zoom = 8;

המחלקת MapElement משתמשת באופן פנימי במחלקת Map. אפשר לגשת למחלקת Map באמצעות המאפיין MapElement.innerMap, כמו שמוצג כאן:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

קבלת מופע של מפה מרכיב div

כשמשתמשים ברכיב div, מקבלים את מופע המפה ומגדירים אפשרויות בזמן האתחול:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

אחרי האתחול, מגדירים את האפשרויות במופע map כמו שמוצג כאן:

map.setOptions({
    zoom: 8,
});