הצבת אובייקט
אובייקט Place, שמכיל מידע על מקום, מוחזר באופן דינמי על ידי Text Search, Nearby Search ו-Place Autocomplete. אפשר גם ליצור אובייקט Place
ממזהה מקום או משם משאב (שם המשאב הוא מזהה המקום עם הקידומת places/). בקטע הקוד הבא מוצג אובייקט Place שנוצר באמצעות מזהה מקום:
// Use a place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo });
אפשר גם ליצור אובייקט Place משם של משאב מקום:
// Use a place resource name to create a new Place instance. const place = new Place({ resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo });
מידע נוסף זמין במאמר בנושא PlaceOptions.
אחזור שדות
אם יש לכם אובייקט Place קיים, מזהה מקום או שם משאב, אתם יכולים להשתמש בשיטה Place.fetchFields() כדי לקבל פרטים על המקום הזה. מזינים רשימה של שדות נתוני מקום שרוצים לקבל, מופרדים בפסיקים. צריך לציין את שמות השדות בפורמט CamelCase. משתמשים באובייקט Place שמוחזר כדי לקבל נתונים של השדות המבוקשים.
בדוגמה הבאה נעשה שימוש במזהה מקום כדי ליצור Place חדש, מתבצעת קריאה ל-Place.fetchFields() כדי לבקש את השדות displayName ו-formattedAddress, ומוסיפים סמן למפה.
TypeScript
async function getPlaceDetails() { const { Place } = (await google.maps.importLibrary( 'places' )) as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = (await google.maps.importLibrary( 'marker' )) as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
JavaScript
async function getPlaceDetails() { const { Place } = (await google.maps.importLibrary('places')); const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker')); // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
Map ו-Place הוגדרו לפני הפונקציה הזו:
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");