سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

مكان التطبيق المصغّر للإكمال التلقائي (معاينة)

هذا المنتج أو هذه الميزة في مرحلة المعاينة (ما قبل التوفّر للجمهور العام). قد يتوفّر دعم محدود للمنتجات والميزات المتوفّرة في مرحلة ما قبل التوفّر للجمهور العام، وقد لا تتوافق التغييرات في المنتجات والميزات المتوفّرة في مرحلة ما قبل التوفّر للجمهور العام مع الإصدارات الأخرى المتاحة في مرحلة ما قبل التوفّر للجمهور العام. تخضع "عروض مرحلة ما قبل التوفّر للجمهور العام" للأحكام الخاصة بخدمة "منصة خرائط Google". لمزيد من المعلومات، يُرجى الاطّلاع على أوصاف مرحلة الإطلاق.

تنشئ أداة "الإكمال التلقائي" للمكان حقل إدخال نص، وتوفِّر توقعات في قائمة اختيارات واجهة المستخدم، وتعرض تفاصيل المكان استجابةً لاختيار المستخدم. استخدِم أداة "الإكمال التلقائي" للأماكن لتضمين واجهة مستخدم كاملة مستقلة مستقلّة للإكمال التلقائي في صفحتك على الويب.

المتطلّبات الأساسية

لاستخدام ميزة "الإكمال التلقائي" للأماكن (معاينة)، يجب تفعيل "واجهة برمجة التطبيقات للأماكن" في مشروعك على Google Cloud وتحديد القناة التجريبية (v: "beta") في برنامج الإقلاع. يمكنك الاطّلاع على البدء لمعرفة التفاصيل.

الجديد

تم تحسين الإكمال التلقائي للأماكن (معاينة) بالطرق التالية:

تتوافق واجهة المستخدم في أداة "الإكمال التلقائي" مع عملية الأقلمة على مستوى منطقة معيّنة (بما في ذلك اللغات التي تستخدم من اليمين إلى اليسار) للعنصر النائب لإدخال النص وشعار قائمة عبارات البحث المقترحة وتوقعات المكان.
إمكانية وصول محسّنة، بما في ذلك دعم برامج قراءة الشاشة والتفاعل باستخدام لوحة المفاتيح
تعرض أداة "الإكمال التلقائي" فئة المكان الجديدة لتبسيط معالجة العنصر المعروض.
دعم أفضل للأجهزة الجوّالة والشاشات الصغيرة.
أداء أفضل ومظهر رسومي محسَّن.

يمكنك إضافة أداة إكمال تلقائي إلى صفحة ويب أو خريطة Google. تنشئ تطبيق "الإكمال التلقائي" المصغّر حقلاً لإدخال النص، وتضع عبارات بحث مقترحة في قائمة خيارات محددة لواجهة المستخدم، وتعرض تفاصيل المكان استجابةً لنقرة أحد المستخدمين عن طريق أداة استماع 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

الاطّلاع على مثال الرمز الكامل

في المثال السابق، تعرض أداة معالجة الحدث كائنًا من فئة المكان (Place class). يمكنك الاتصال بالرقم place.fetchFields() للحصول على حقول بيانات تفاصيل المكان المطلوبة لطلبك.

يطلب المستمع في المثال التالي معلومات المكان ويعرضها على خريطة.

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

استخدام مكوِّن "منتقي الأماكن"

ملاحظة: يستخدم هذا النموذج مكتبة مفتوحة المصدر. يمكنك الاطّلاع على الدليل للحصول على الدعم والملاحظات المتعلقة بالمكتبة.

مكوِّن أداة اختيار الأماكن هو إدخال نصي يسمح للمستخدمين النهائيين بالبحث عن عنوان أو مكان محدد باستخدام الإكمال التلقائي. وهي جزء من مكتبة المكونات الموسعة، وهي مجموعة من مكونات الويب التي تساعد المطورين على إنشاء خرائط وميزات أفضل بشكل أسرع.

أداة ضبط أداة اختيار الأماكن

استخدِم أداة الضبط لإنشاء رمز قابل للتضمين لمكوّن "أداة اختيار الأماكن" المخصّص، ثم صدِّره ليتم استخدامه مع أُطر العمل الرائجة مثل React وAngular أو عدم استخدامه على الإطلاق.

البدء

للبدء، قم بتحميل مكتبة المكونات الموسعة مع npm.

للحصول على أفضل أداء، استخدم مدير الحزم وقم باستيراد المكونات التي تحتاجها فقط. يتم إدراج هذه الحزمة في npm على النحو التالي: @googlemaps/extended-component-library. التثبيت باستخدام:

  npm i @googlemaps/extended-component-library;

ثم قم باستيراد أي مكونات تستخدمها في التطبيق الخاص بك.

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

بعد تحميل مكتبة npm، احصل على مفتاح واجهة برمجة التطبيقات من 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. للاطّلاع على المكوّنات المستخدمة في نموذج الرمز، راجِع صفحة الأمثلة على GitHub.

مكان التطبيق المصغّر للإكمال التلقائي (معاينة)

المتطلّبات الأساسية

الجديد

إضافة تطبيق مصغّر للإكمال التلقائي

إضافة تطبيق مصغّر لميزة "الإكمال التلقائي" إلى صفحة ويب

TypeScript

JavaScript

إضافة أداة إكمال تلقائي إلى خريطة

TypeScript

JavaScript

تقييد توقعات الإكمال التلقائي

حظر البحث عن الأماكن حسب البلد

حصر البحث عن الأماكن على حدود الخريطة

الانحياز في نتائج البحث عن الأماكن

حصر نتائج البحث عن الأماكن على أنواع معيّنة

الحصول على تفاصيل المكان

TypeScript

JavaScript

TypeScript

JavaScript

يمكنك الحصول على نتائج ترميز المواقع الجغرافية للمكان المحدّد.

أمثلة على الخرائط

عنصر الإكمال التلقائي

TypeScript

JavaScript

CSS

HTML

تجربة "عيّنة"

الإكمال التلقائي للخريطة

TypeScript

JavaScript

CSS

HTML

تجربة "عيّنة"

استخدام مكوِّن "منتقي الأماكن"

أداة ضبط أداة اختيار الأماكن

البدء