reviewsהשקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.
מעבר לפרטי המקום החדשים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
מפתחים באזור הכלכלי האירופי (EEA)
Places API יכול להחזיר מידע מפורט על מקום מסוים. בדף הזה מוסברים ההבדלים בין פרטי מקומות כפי שמשתמשים בהם במחלקה Place
(חדש) ובמחלקה PlacesService
(מהדור הקודם), ומוצגים כמה קטעי קוד להשוואה. בטבלה הבאה מפורטים כמה מההבדלים העיקריים בשימוש בפרטי מקום בין המחלקה Place
לבין PlacesService
:
השוואת קוד
בקטע הזה מוצגות שתי דוגמאות דומות לקוד, כדי להמחיש את ההבדלים בין Places Service לבין Place class. בקטעי הקוד מוצג הקוד שנדרש בכל API כדי לשלוח בקשה לפרטי מקום, ואז להשתמש בנתוני המקום שמתקבלים כדי להוסיף סמן למפה.
Places Service (דור קודם)
בקטע הקוד הבא מוצגת בקשה מצומצמת לפרטי מקום באמצעות PlacesService
. הבקשה משתמשת בקריאה חוזרת וכוללת בדיקה מותנית נדרשת של PlacesServiceStatus
. שדות הנתונים של המקום שנדרשים מצוינים בגוף הבקשה.
function getPlaceDetails() {
// Instantiate the Places Service.
const service = new google.maps.places.PlacesService(map);
// Make a request using the Place ID.
const request = {
placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
fields: ["name", "formatted_address", "place_id", "geometry"],
};
// Request place details.
service.getDetails(request, (place, status) => {
// Check whether PlacesServiceStatus is OK.
if (
status === google.maps.places.PlacesServiceStatus.OK &&
place &&
place.geometry &&
place.geometry.location
) {
// Log the result.
console.log(place.name);
console.log(place.formatted_address);
// Add a marker for the place.
const marker = new google.maps.Marker({
map,
position: place.geometry.location,
title: place.name,
});
}
});
}
מידע נוסף
סוג המקום (חדש)
בקטע הקוד הבא מוצגת בקשה מצומצמת לפרטי מקום באמצעות המחלקה Place
. הבקשה היא אסינכרונית ולא כוללת בדיקת סטטוס (אפשר להשתמש בטיפול שגיאות רגיל). מזהה מקום משמש ליצירת מופע חדש של Place
, שמשמש לשליחת הבקשה (fetchFields()
). שדות הנתונים של המקום הנדרשים לא מועברים עד שמתבצעת קריאה ל-fetchFields()
, מה שמאפשר גמישות רבה יותר. מכיוון שהשיטה fetchFields()
משתמשת באופרטור await, אפשר להשתמש בה רק בתוך פונקציית async
.
async function getPlaceDetails() {
// Use place ID to create a new Place instance.
const place = new google.maps.places.Place({
id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
requestedLanguage: "en", // optional
});
// Call fetchFields, passing the needed data fields.
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
// Log the result.
console.log(place.displayName);
console.log(place.formattedAddress);
// Add an Advanced Marker.
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
}
מידע נוסף
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-31 (שעון UTC).
[null,null,["עדכון אחרון: 2025-08-31 (שעון UTC)."],[],[],null,["# Migrate to the new Place Details\n\n\u003cbr /\u003e\n\n**European Economic Area (EEA) developers** If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](/maps/comms/eea/faq).\n\nThe Places API can return detailed information about a specific place. This page\nexplains the differences between place details as used in the `Place` class\n(new) and `PlacesService` (legacy), and provides some code snippets for\ncomparison. The following table lists some of the main differences in the use of\nplace details between the `Place` class and `PlacesService`:\n\n| [`PlacesService`](/maps/documentation/javascript/reference/places-service) (Legacy) | [`Place`](/maps/documentation/javascript/reference/place) (New) |\n|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [`getDetails()`](/maps/documentation/javascript/reference/places-service#PlacesService.getDetails) | [`fetchFields()`](/maps/documentation/javascript/reference/place#Place.fetchFields) |\n| [`PlaceDetailsRequest`](/maps/documentation/javascript/reference/places-service#PlaceDetailsRequest) | [`FetchFieldsRequest`](/maps/documentation/javascript/reference/place#FetchFieldsRequest) |\n| Methods require the use of a callback to handle the results object and `google.maps.places.PlacesServiceStatus` response. | Uses Promises, and works asynchronously. |\n| Methods require a `PlacesServiceStatus` check. | No required status check, can use standard error handling. [Learn more](/maps/documentation/javascript/reference/errors). |\n| [Place data fields](/maps/documentation/javascript/place-data-fields) are formatted using snake case. | [Place data fields](/maps/documentation/javascript/place-class-data-fields) are formatted using camel case. |\n| Limited to a fixed set of [place types](/maps/documentation/javascript/supported_types) and [place data fields](/maps/documentation/javascript/place-data-fields). | Provides an expanded selection of regularly updated [place types](/maps/documentation/javascript/place-types) and [place data fields](/maps/documentation/javascript/place-class-data-fields). |\n\nCode comparison\n---------------\n\nThis section compares two similar pieces of code to illustrate the differences\nbetween the Places Service and the\nPlace class. The code snippets show the code\nrequired on each respective API to make a place details request, and then use\nthe resulting place data to add a marker to the map.\n\n### Places Service (Legacy)\n\nThe following condensed code snippet shows making a place details request using\n`PlacesService`. The request uses a callback, and includes a required\nconditional check on `PlacesServiceStatus`. The needed place data fields are\nspecified in the request body. \n\n function getPlaceDetails() {\n // Instantiate the Places Service.\n const service = new google.maps.places.PlacesService(map);\n\n // Make a request using the Place ID.\n const request = {\n placeId: \"ChIJN1t_tDeuEmsRUsoyG83frY4\",\n fields: [\"name\", \"formatted_address\", \"place_id\", \"geometry\"],\n };\n\n // Request place details.\n service.getDetails(request, (place, status) =\u003e {\n // Check whether PlacesServiceStatus is OK.\n if (\n status === google.maps.places.PlacesServiceStatus.OK &&\n place &&\n place.geometry &&\n place.geometry.location\n ) {\n\n // Log the result.\n console.log(place.name);\n console.log(place.formatted_address);\n\n // Add a marker for the place.\n const marker = new google.maps.Marker({\n map,\n position: place.geometry.location,\n title: place.name,\n });\n }\n });\n }\n\n#### Learn more\n\n- [See the complete code example](/maps/documentation/javascript/examples/place-details)\n- [Place Details](/maps/documentation/javascript/places#place_details) documentation\n- [`getDetails` reference](/maps/documentation/javascript/reference/places-service#PlacesService.getDetails)\n\n### Place class (New)\n\nThe following condensed code snippet shows making a place details request using\nthe `Place` class. The request is asynchronous, and does not include a status\ncheck (standard error handling can be used). A place ID is used to create a new\n`Place` instance, which is used to make the request (`fetchFields()`). The\nneeded place data fields are not passed until `fetchFields()` is called, which\nlends greater flexibility. Because the `fetchFields()` method uses the await\noperator it can only be used inside an `async` function. \n\n async function getPlaceDetails() {\n // Use place ID to create a new Place instance.\n const place = new google.maps.places.Place({\n id: \"ChIJN5Nz71W3j4ARhx5bwpTQEGg\",\n requestedLanguage: \"en\", // optional\n });\n\n // Call fetchFields, passing the needed data fields.\n await place.fetchFields({\n fields: [\"displayName\", \"formattedAddress\", \"location\"],\n });\n\n // Log the result.\n console.log(place.displayName);\n console.log(place.formattedAddress);\n\n // Add an Advanced Marker.\n const marker = new google.maps.marker.AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n }\n\n#### Learn more\n\n- [See the complete code example](/maps/documentation/javascript/examples/place-class)\n- [Place Details](/maps/documentation/javascript/place-details) documentation\n- [`fetchFields()` reference](/maps/documentation/javascript/reference/place#Place.fetchFields)"]]