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

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

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

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

סקירה כללית

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

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

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

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

מוסיפים רכיב 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

בדף ה-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 initMap(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();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>
        <!-- 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>
    </head>

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

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

JSFiddle.net

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

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

מוסיפים רכיב 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

בדף ה-HTML, מוסיפים רכיב div שיכיל את המפה.
```
<div id="map"></div>
```
ב-CSS, מגדירים את גובה המפה ל-100%. המאפיין height של CSS הוא חובה כדי שהמפה תהיה גלויה.
```
#map {
  height: 100%;
}
```

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

TypeScript

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

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

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();index.js

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

TypeScript

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

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

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
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>

    <!-- 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>
</head>

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

</html>index.html

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

JSFiddle.net

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

כדי לבצע פעולות במפה, בוחרים את הרכיב שמכיל אותה. הקוד שצריך להשתמש בו תלוי אם השתמשתם ברכיב 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`