‫ Places UI Kit: ספרייה מוכנה לשימוש שמאפשרת למפתחים להתאים אישית ולשלוט. כדאי לנסות ולשתף את המשוב שלך על חוויית השימוש בערכת ממשק המשתמש.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

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

הוספת מפה באמצעות רכיב gmp-map
הוספת מפה באמצעות רכיב div ו-JavaScript
הגדרה וקבלת מאפיינים במופע של המפה

סקירה כללית

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

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

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

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

מוסיפים רכיב script שמכיל את ה-bootstrap לדף HTML, או מוסיפים אותו לקובץ מקור של JavaScript או TypeScript בלי הרכיב script. מגדירים את ה-bootstrap עם מפתח ה-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>

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

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

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>index.html

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

TypeScript

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();index.ts

JavaScript

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();index.js

CSS

/* 
 * 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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>index.html

הוספת מפה באמצעות רכיב `div` ו-JavaScript

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

מוסיפים רכיב script שמכיל את ה-bootstrap לדף HTML, או מוסיפים אותו לקובץ מקור של JavaScript או TypeScript בלי הרכיב script. מגדירים את ה-bootstrap עם מפתח ה-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>

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

בדף ה-HTML, מוסיפים רכיב div שיכיל את המפה.
```
<div id="map"></div>
```
ב-CSS, מגדירים את הגובה של html, body ו-#map ל-100%. המאפיין height של CSS נדרש כדי שהמפה תהיה גלויה, כי רכיבי div ריקים מוגדרים כברירת מחדל לגובה 0. מכיוון שהגבהים שמבוססים על אחוזים מועברים בירושה מהאלמנטים של ההורה במצב קפדני, הגדרת height: 100% ב-html וב-body וגם ב-#map מבטיחה שרשרת רציפה של ירושת גובה מאזור התצוגה ועד למאגר המפה בכל הדפדפנים.
```
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
```

בקובץ JS או TS, יוצרים פונקציה כדי לטעון את הספרייה maps ולהפעיל את המפה. מציינים את הקואורדינטות של קו הרוחב וקו האורך של center, ואת רמת הזום של zoom. אם צריך, מוסיפים מזהה מפה באמצעות המאפיין mapId. כברירת מחדל, המפה תהיה מפת רסטר, לכן צריך לבקש מפה וקטורית על ידי ציון האפשרות "VECTOR". מומלץ להשתמש בסוג המפה הווקטורית כדי לספק את חוויית המשתמש הטובה ביותר, כי היא מספקת נאמנות חזותית משופרת וגם את היכולת לשלוט בהטיה ובכיוון במפה.

TypeScript

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();index.ts

JavaScript

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();index.js

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

TypeScript

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();index.ts

JavaScript

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();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>

        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY" 
            });
        </script>
    </head>

    <body>
        <div id="map"></div>
    </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,
});

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

סקירה כללית

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

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

TypeScript

JavaScript

CSS

HTML

הוספת מפה באמצעות רכיב div ו-JavaScript

TypeScript

JavaScript

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

TypeScript

JavaScript

CSS

HTML

הגדרה וקבלת מאפיינים במופע של המפה

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

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

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

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

הוספת מפה באמצעות רכיב `div` ו-JavaScript

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

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