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

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

השלמה אוטומטית למקומות (תצוגה מקדימה)

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

דרישות מוקדמות

כדי להשתמש בהשלמה אוטומטית של מקום (Preview), צריך להפעיל את Places API בפרויקט שלכם ב-Google Cloud, ולציין את ערוץ הבטא (v: "beta") בטוען האתחול. פרטים נוספים זמינים במאמר תחילת העבודה.

מה חדש

ההשלמה האוטומטית של מקומות (תצוגה מקדימה) שופרה בדרכים הבאות:

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

ניתן להוסיף ווידג'ט של השלמה אוטומטית לדף אינטרנט או למפת Google. הווידג'ט של ההשלמה האוטומטית יוצר שדה להזנת קלט, מספק חיזויים של מקומות ברשימת בחירה של ממשק משתמש, ומחזיר פרטי מקום בתגובה ללחיצה של משתמש באמצעות ה-listener gmp-placeselect. בקטע הזה מוסבר איך להוסיף ווידג'ט של השלמה אוטומטית לדף אינטרנט או למפת Google.

כדי להוסיף את הווידג'ט של ההשלמה האוטומטית לדף אינטרנט, צור google.maps.places.PlaceAutocompleteElement חדש וצרף אותו לדף, כפי שמוצג בדוגמה הבאה:

TypeScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
    google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);
index.js

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

כדי להוסיף למפה ווידג'ט של השלמה אוטומטית, צריך ליצור מופע חדש של google.maps.places.PlaceAutocompleteElement, לצרף את PlaceAutocompleteElement ל-div ולדחוף אותו למפה כפקד בהתאמה אישית, כפי שמוצג בדוגמה הבאה:

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

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

הגבלת חיזויים של השלמה אוטומטית

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

הגבלת התוצאות גורמת לווידג'ט ההשלמה האוטומטית להתעלם מתוצאות שלא נמצאות בתחום ההגבלה. שיטה נפוצה היא להגביל את התוצאות לגבולות המפה. תוצאות הטייה גורמים לווידג'ט ההשלמה האוטומטית להציג תוצאות בתוך האזור שצוין, אך ייתכן שהתאמות מסוימות יהיו מחוץ לאזור הזה.

הגבלה של חיפוש מקומות לפי מדינה

כדי להגביל את חיפוש המקום למדינה ספציפית אחת או יותר, צריך להשתמש בנכס componentRestrictions כדי לציין את קודי המדינות, כפי שמוצג בקטע הקוד הבא:

const pac = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['us', 'au']},
});

הגבילו את החיפוש של מקום לגבולות המפה

כדי להגביל את חיפוש המקום לגבולות המפה, משתמשים בנכס locationRestrictions כדי להוסיף את הגבולות, כפי שמוצג בקטע הקוד הבא:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

כשמגבילים לגבולות המפה, חשוב להוסיף מאזין כדי לעדכן את הגבולות כשהם משתנים:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

כדי להסיר את locationRestriction, צריך להגדיר אותו לערך null.

תוצאות חיפוש של מקומות עם הטיה

הטייה של תוצאות החיפוש לאזור מעגלי על ידי שימוש במאפיין locationBias והעברת רדיוס, כפי שמוצג כאן:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

כדי להסיר את locationBias, צריך להגדיר אותו לערך null.

הגבלת תוצאות החיפוש של מקומות לסוגים מסוימים

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

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  types: ['establishment'],
});

רשימה מלאה של הסוגים הנתמכים זמינה בטבלה 3: סוגים שנתמכים בבקשות להשלמה אוטומטית.

קבלת פרטים על המקום

כדי לקבל פרטים על המקום שנבחר, צריך להוסיף האזנה ל-gmp-place-select ל-PlaceAutocompleteElement, כמו בדוגמה הבאה:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});index.js

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

בדוגמה הקודמת, event listener מחזיר אובייקט של Place class. צריך להתקשר אל place.fetchFields() כדי לקבל את שדות הנתונים של פרטי המקום הנדרשים לאפליקציה שלך.

בדוגמה הבאה, ה-listener מבקש מידע על המקום ומציג אותו במפה.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        map.fitBounds(place.viewport);
    } else {
        map.setCenter(place.location);
        map.setZoom(17);
    }

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // If the place has a geometry, then present it on a map.
  if (place.viewport) {
    map.fitBounds(place.viewport);
  } else {
    map.setCenter(place.location);
    map.setZoom(17);
  }

  let content =
    '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' +
    place.displayName +
    "</span><br />" +
    '<span id="place-address">' +
    place.formattedAddress +
    "</span>" +
    "</div>";

  updateInfoWindow(content, place.location);
  marker.position = place.location;
});index.js

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

קבלת תוצאות של קואורדינטות עבור המקום הנבחר

על מנת לקבל תוצאות של קידוד גיאוגרפי עבור המקום שנבחר, השתמשו ב-google.maps.Geocoder על מנת לקבל את המיקום, כפי שמוצג בקטע הקוד הבא:

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.064192, lng: -130.605469},
  zoom: 3,
});

const marker = new google.maps.Marker({map});
const autocomplete = new google.maps.places.PlaceAutocompleteElement();
const geocoder = new google.maps.Geocoder();

autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
  const results = await geocoder.geocode({place.id});
  marker.setPlace({
    placeId: place.id,
    location: results[0].geometry.location,
  });
});

מפות לדוגמה

הקטע הזה מכיל את הקוד המלא של המפות לדוגמה שמופיעות בדף הזה.

רכיב של השלמה אוטומטית

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

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }] = await Promise.all([
        google.maps.importLibrary("places"),
    ]);
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  document.body.appendChild(placeAutocomplete);

  // Inject HTML UI.
  const selectedPlaceTitle = document.createElement("p");

  selectedPlaceTitle.textContent = "";
  document.body.appendChild(selectedPlaceTitle);

  const selectedPlaceInfo = document.createElement("pre");

  selectedPlaceInfo.textContent = "";
  document.body.appendChild(selectedPlaceInfo);
  // Add the gmp-placeselect listener, and display the results.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    selectedPlaceTitle.textContent = "Selected Place:";
    selectedPlaceInfo.textContent = JSON.stringify(
      place.toJSON(),
      /* replacer */ null,
      /* space */ 2,
    );
  });
}

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

p {
  font-family: Roboto, sans-serif;
  font-weight: bold;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete element</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>
    <p style="font-family: roboto, sans-serif">Search for a place here:</p>

    <!-- 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: "beta"});</script>
  </body>
</html>index.html

רוצה לנסות את הדוגמה

JSFiddle.net Google Cloud Shell

מפה להשלמה אוטומטית

בדוגמה הזו מוסבר איך להוסיף ווידג'ט של השלמה אוטומטית למפה של Google.

TypeScript

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

    // Create the marker and infowindow
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });

    infoWindow = new google.maps.InfoWindow({});

    // Add the gmp-placeselect listener, and display the results on the map.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            map.fitBounds(place.viewport);
        } else {
            map.setCenter(place.location);
            map.setZoom(17);
        }

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      "</span><br />" +
      '<span id="place-address">' +
      place.formattedAddress +
      "</span>" +
      "</div>";

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}

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

#place-autocomplete-card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px;
  padding: 5px;
  font-family: Roboto, sans-serif;
  font-size: large;
  font-weight: bold;
}

gmp-place-autocomplete {
  width: 300px;
}

#infowindow-content .title {
  font-weight: bold;
}

#map #infowindow-content {
  display: inline;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete 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>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <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: "beta"});</script>
  </body>
</html>index.html

רוצה לנסות את הדוגמה

JSFiddle.net Google Cloud Shell

שימוש ברכיב של בורר המקומות

הערה: הדוגמה הזו משתמשת בספריית קוד פתוח. אפשר לעיין בקובץ README כדי לקבל תמיכה ומשוב שקשורים לספרייה.

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

GIF עם תיבת חיפוש. המשתמש מתחיל להקליד כתובת כקלט ומופיע תפריט נפתח עם כתובות קשורות. המשתמש לוחץ על כתובת בתפריט הנפתח, ותיבת החיפוש ממלאת
את שאר הכתובת. — איור 1: קלט טקסט לחיפוש כתובת או מקום ספציפיים באמצעות השלמה אוטומטית

מהם רכיבי אינטרנט?

רכיבי האינטרנט מאפשרים ליצור תגי HTML מקוצרים, מותאמים אישית לשימוש חוזר, שאפשר להשתמש בהם בכל מקום ב-HTML של אפליקציית האינטרנט. הם נתמכים בכל הדפדפנים המודרניים, והם חושפים מנגנון שלא תלוי במסגרות (framework) למקיף של ממשק משתמש ופונקציונליות.

מהו הרכיב של בורר המקומות?

הרכיב של בוחר המקומות הוא קלט טקסט שמאפשר למשתמשי קצה לחפש כתובת או מקום ספציפיים באמצעות השלמה אוטומטית.

מהי ספריית הרכיבים המורחבת?

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

מתחילים

כדי להתחיל, צריך לטעון את ספריית הרכיבים המורחבים באמצעות npm.

להשגת הביצועים הטובים ביותר, מומלץ להשתמש במנהל חבילות ולייבא רק את הרכיבים הדרושים לכם. החבילה הזו רשומה ב-npm בתור @googlemaps/extended-component-library. יש להתקין אותה באמצעות:

  npm i @googlemaps/extended-component-library;

לאחר מכן ייבא את הרכיבים שבהם אתה משתמש באפליקציה.

  import '@googlemaps/extended-component-library/place_picker.js';

אחרי שטוענים את ספריית ה-npm, מקבלים מפתח API מ-Cloud Console.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>

שימוש בתג הרכיב של בוחר המקומות.

  <gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%">
  </gmpx-place-picker>

פרטים נוספים זמינים ב- GitHub או ב- npm. בדף examples ב-GitHub תוכלו לראות את הרכיבים שמופיעים בקוד לדוגמה.

השלמה אוטומטית למקומות (תצוגה מקדימה)

דרישות מוקדמות

מה חדש

הוספת ווידג'ט של השלמה אוטומטית

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

TypeScript

JavaScript

הוספת ווידג'ט של השלמה אוטומטית למפה

TypeScript

JavaScript

הגבלת חיזויים של השלמה אוטומטית

הגבלה של חיפוש מקומות לפי מדינה

הגבילו את החיפוש של מקום לגבולות המפה

תוצאות חיפוש של מקומות עם הטיה

הגבלת תוצאות החיפוש של מקומות לסוגים מסוימים

קבלת פרטים על המקום

TypeScript

JavaScript

TypeScript

JavaScript

קבלת תוצאות של קואורדינטות עבור המקום הנבחר

מפות לדוגמה

רכיב של השלמה אוטומטית

TypeScript

JavaScript

CSS

HTML

רוצה לנסות את הדוגמה

מפה להשלמה אוטומטית

TypeScript

JavaScript

CSS

HTML

רוצה לנסות את הדוגמה

שימוש ברכיב של בורר המקומות

מהם רכיבי אינטרנט?

מהו הרכיב של בורר המקומות?

מהי ספריית הרכיבים המורחבת?

מתחילים