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

איך ליצור שירות לחיפוש עסקים בקרבת מקום באמצעות Google Maps Platform (JavaScript)

1. לפני שמתחילים

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

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

ידע בסיסי ב-HTML,‏ CSS ו-JavaScript
פרויקט עם חשבון לחיוב (אם אין לכם חשבון כזה, פועלים לפי ההוראות בשלב הבא).
בשלב ההפעלה שבהמשך, תצטרכו להפעיל את Maps JavaScript API ואת Places API.
מפתח API לפרויקט שלמעלה.

תחילת העבודה עם הפלטפורמה של מפות Google

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

יוצרים חשבון לחיוב.
יוצרים פרויקט.
מפעילים את ממשקי ה-API וערכות ה-SDK של הפלטפורמה של מפות Google (שמופיעים בקטע הקודם).
יוצרים מפתח API.

מה עושים

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

מה צריך להכין

דפדפן אינטרנט, כמו Google Chrome (מומלץ), Firefox,‏ Safari או Internet Explorer
עורך הטקסט או הקוד המועדף עליכם

קבלת קוד לדוגמה

פותחים את ממשק שורת הפקודה (Terminal ב-MacOS או Command Prompt ב-Windows) ומורידים את קוד הדוגמה באמצעות הפקודה הבאה:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

אם זה לא עובד, לוחצים על הלחצן הבא כדי להוריד את כל הקוד של ה-codelab הזה, ואז מחלצים את הקובץ:

הורדת הקוד

עוברים לספרייה ששיבטתם או הורדתם.

cd google-maps-nearby-search-js

התיקיות stepN מכילות את מצב הסיום הרצוי של כל שלב ב-codelab הזה. הן מופיעות שם לצורך השוואה. מבצעים את כל עבודת הקידוד בספרייה שנקראת work.

2. יצירת מפה עם מרכז ברירת מחדל

יש שלושה שלבים ליצירת מפה של Google בדף אינטרנט:

יצירת דף HTML
הוספת מפה
מדביקים את מפתח ה-API

1. יצירת דף HTML

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

עוברים לתיקייה work/. בהמשך ה-codelab, מבצעים את העריכות בגרסה שבתיקייה work/.

cd work

בספרייה work/, משתמשים בכלי לעריכת טקסט כדי ליצור קובץ ריק בשם index.html.
מעתיקים את הקוד הבא אל index.html.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

פותחים את הקובץ index.html בדפדפן האינטרנט.

open index.html

2. הוספת מפה

בקטע הזה מוסבר איך לטעון את Maps JavaScript API לדף אינטרנט ואיך לכתוב קוד JavaScript משלכם שמשתמש ב-API כדי להוסיף מפה לדף האינטרנט.

מוסיפים את קוד הסקריפט הזה במקום שבו מופיע  אחרי התג map div ולפני תג הסגירה </body>.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. הדבקה של מפתח ה-API

בשורה שאחרי , מעתיקים את הערך של פרמטר המפתח בכתובת ה-URL של מקור הסקריפט ומחליפים אותו במפתח ה-API שיצרתם בשלב הקודם.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

שומרים את קובץ ה-HTML שעליו עבדתם.

רוצים לנסות?

טוענים מחדש את תצוגת הדפדפן של הקובץ שערכתם. עכשיו אמורה להופיע מפה במקום שבו היה קודם המלבן האפור. אם מופיעה הודעת שגיאה, צריך לוודא שהחלפתם את המחרוזת YOUR_API_KEY בתג <script> הסופי במפתח ה-API שלכם. אם אין לכם מפתח API, למעלה מוסבר איך לקבל אותו.

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

הקוד המלא של הפרויקט עד לנקודה הזו זמין ב-GitHub.

3. מיקום גיאוגרפי של המשתמש

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

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

מהו מיקום גיאוגרפי?

מיקום גיאוגרפי הוא זיהוי המיקום הגיאוגרפי של משתמש או של מכשיר מחשוב באמצעות מגוון מנגנונים לאיסוף נתונים. בדרך כלל, רוב שירותי המיקום הגיאוגרפי משתמשים בכתובות ניתוב ברשת או במכשירי GPS פנימיים כדי לקבוע את המיקום. האפליקציה הזו משתמשת במאפיין navigator.geolocation של תקן המיקום הגיאוגרפי של W3C בדפדפן האינטרנט כדי לקבוע את מיקום המשתמש.

רוצים לנסות?

מחליפים את הקוד שבין ההערות TODO: Step 2, Geolocate your user ו-END TODO: Step 2, Geolocate your user בקוד הבא:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

רוצים לנסות?

שומרים את הקובץ.
טוענים מחדש את הדף.

הדפדפן אמור לבקש מכם עכשיו הרשאה לשתף את המיקום עם האפליקציה.

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

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

ב-Chrome, לוחצים על דף זה עוקב אחר המיקום שלך בסרגל הכתובות.

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

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

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

הקוד המלא של הפרויקט עד לנקודה הזו זמין ב-GitHub.

4. חיפוש מקומות קרובים

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

אובייקט LatLngBounds שמגדיר אזור חיפוש מלבני
אזור מעגלי שמוגדר כשילוב של המאפיין location – שבו מצוין מרכז המעגל כאובייקט LatLng – ורדיוס שנמדד במטרים

מפעילים חיפוש בקרבת מקום באמצעות קריאה ל-method‏ PlacesService nearbySearch(), שמחזירה מערך של אובייקטים מסוג PlaceResult.

א. טעינה של ספריית המקומות

קודם כל, כדי לגשת לשירותים של Places Library, צריך לעדכן את כתובת ה-URL של מקור הסקריפט כדי להוסיף את הפרמטר libraries ולהוסיף את הערך places.

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

ב. התקשרות אל בקשת החיפוש של מקומות בסביבה וטיפול בתגובה

לאחר מכן, יוצרים בקשת PlaceSearch. שדות החובה המינימליים הם:

שדות החובה המינימליים הם:

‫bounds, שחייב להיות אובייקט google.maps.LatLngBounds שמגדיר את אזור החיפוש המלבני, או location ו-radius. האפשרות הראשונה מקבלת אובייקט google.maps.LatLng, והאפשרות השנייה מקבלת מספר שלם פשוט שמייצג את רדיוס העיגול במטרים. הרדיוס המקסימלי המותר הוא 50,000 מטרים. שימו לב: אם הערך של rankBy הוא DISTANCE, אתם צריכים לציין מיקום, אבל לא תוכלו לציין רדיוס או גבולות.
‫keyword כדי להתאים לכל השדות הזמינים, כולל, בין היתר, שם, סוג וכתובת, וגם ביקורות של לקוחות ותוכן אחר של צד שלישי, או type, שמגביל את התוצאות למקומות שתואמים לסוג שצוין. אפשר לציין רק סוג אחד (אם מציינים יותר מסוג אחד, המערכת מתעלמת מכל הסוגים אחרי הערך הראשון). כאן אפשר לעיין ברשימת הסוגים הנתמכים.

ב-codelab הזה, תשתמשו במיקום הנוכחי של המשתמש כמיקום לחיפוש ולדירוג התוצאות לפי מרחק.

מוסיפים את הטקסט הבא לתגובה TODO: Step 3B1 כדי לכתוב שתי פונקציות לקריאה לחיפוש ולטיפול בתגובה.

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

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

מוסיפים את השורה הזו לסוף הפונקציה initMap בתגובה TODO: Step 3B2.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

מוסיפים את השורה הזו לסוף הפונקציה handleLocationError בתגובה TODO: Step 3B3.

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

ג. יצירת סמנים לתוצאות חיפוש

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

הקונסטרוקטור google.maps.Marker מקבל אובייקט ליטרלי יחיד Marker options, שמציין את המאפיינים הראשוניים של הסמן.

השדות הבאים חשובים במיוחד ומוגדרים בדרך כלל כשיוצרים סמן:

‫position (חובה) מציין LatLng שמזהה את המיקום הראשוני של הסמן.
‫map (אופציונלי) מציין את המפה שבה רוצים למקם את הסמן. אם לא מציינים את המפה כשיוצרים את הסמן, הסמן נוצר אבל הוא לא מצורף למפה (או מוצג בה). אפשר להוסיף את הסמן מאוחר יותר על ידי קריאה לשיטה setMap() של הסמן.
מוסיפים את הקוד הבא אחרי ההערה TODO: Step 3C כדי להגדיר את המיקום, המפה והשם של כל סמן שמוחזר בתגובה. בנוסף, משתמשים בשיטה extend של המשתנה bounds כדי לוודא שהמרכז וכל הסמנים גלויים במפה.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

רוצים לנסות?

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

אמורים להופיע עד 20 סמנים אדומים סביב מיקום המרכז במפה.

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

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

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

הקוד המלא של הפרויקט עד לנקודה הזו זמין ב-GitHub.

5. הצגת פרטי המקום לפי דרישה

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

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

מוסיפים את הקוד הבא לתג style אחרי התגובה TODO: Step 4A1:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

בקטע body, ממש לפני התג map div, מוסיפים div לחלונית הפרטים.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

בפונקציה initMap() אחרי ההערה TODO: Step 4A3, מאתחלים את המשתנה infoPane כך:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

ב. הוספת מאזינים לקליקים לסמנים

בפונקציה createMarkers, מוסיפים מאזין ללחיצות לכל סמן כשיוצרים אותו.

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

מדביקים את הקוד הבא בתוך הפונקציה createMarkers בתגובת הקוד TODO: Step 4B.

השיטה showDetails מיושמת בקטע הבא.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

בבקשה addListener, המאפיין placeId מציין מקום יחיד לבקשת הפרטים, והמאפיין fields הוא מערך של שמות שדות למידע שרוצים לקבל על המקום. רשימה מלאה של השדות שאפשר לבקש מופיעה במאמר בנושא ממשק PlaceResult.

ג. הצגת פרטי מקום בחלון מידע

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

מוסיפים את הקוד הבא בתגית התגובה TODO: Step 4C כדי ליצור InfoWindow שמציג את השם והדירוג של העסק, ומצרף את החלון הזה לסמן.

בקטע הבא מוסבר איך מגדירים את showPanel כדי להציג פרטים בסרגל צד.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

משתמשים באותם פרטים שמוחזרים באובייקט PlaceResult כדי לאכלס עוד תג div. בדוגמה הזו, משתמשים ב-infoPane, שהוא שם משתנה שרירותי לתג div עם המזהה panel. בכל פעם שהמשתמש לוחץ על סמן חדש, הקוד הזה סוגר את סרגל הצד אם הוא כבר היה פתוח, מוחק את הפרטים הישנים, מוסיף את הפרטים החדשים ופותח את סרגל הצד.

מוסיפים את הקוד הבא אחרי התגובה TODO: Step 4D.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

ה. הצגת תמונה של מקום עם פרטי המקום

התוצאה getDetails מחזירה מערך של עד 10 תמונות שמשויכות ל-placeId. כאן, התמונה הראשונה מוצגת מעל שם המקום בסרגל הצד.

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

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

רוצים לנסות?

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

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

הקוד המלא של הפרויקט עד לנקודה הזו זמין ב-GitHub.

6. מזל טוב

מעולה! השתמשתם בהרבה תכונות של Maps JavaScript API, כולל בספרייה Places.

מה נכלל

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

מידע נוסף

כדי להפיק עוד יותר ממפות, כדאי לעיין בתיעוד של Maps JavaScript API ובתיעוד של ספריית המקומות. בשני המקורות האלה תמצאו מדריכים, הדרכות, הפניות ל-API, דוגמאות קוד נוספות וערוצי תמיכה. בין התכונות הפופולריות: ייבוא נתונים למפות, התאמה אישית של הסגנון של המפה והוספה של שירות Street View.

איזה סוג של Codelab הכי היית רוצה שנבנה בהמשך?

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

עוד סדנאות קוד לשימוש ב-JavaScript API של הפלטפורמה של מפות Google

עוד סדנאות קוד ל-Android

עוד סדנאות קוד ל-iOS

הדמיה של נתונים מבוססי-מיקום במפות

התאמה אישית של סגנון המפות

שימוש ב-Street View

האם ה-codelab שרצית לא מופיע ברשימה שלמעלה? כאן אפשר לשלוח בקשה בנושא בעיה חדשה.

איך ליצור שירות לחיפוש עסקים בקרבת מקום באמצעות Google Maps Platform (JavaScript) קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

1. לפני שמתחילים

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

תחילת העבודה עם הפלטפורמה של מפות Google

מה עושים

מה צריך להכין

קבלת קוד לדוגמה

2. יצירת מפה עם מרכז ברירת מחדל

1. יצירת דף HTML

2. הוספת מפה

3. הדבקה של מפתח ה-API

רוצים לנסות?

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

3. מיקום גיאוגרפי של המשתמש

מהו מיקום גיאוגרפי?

רוצים לנסות?

רוצים לנסות?

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

4. חיפוש מקומות קרובים

א. טעינה של ספריית המקומות

ב. התקשרות אל בקשת החיפוש של מקומות בסביבה וטיפול בתגובה

ג. יצירת סמנים לתוצאות חיפוש

רוצים לנסות?

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

5. הצגת פרטי המקום לפי דרישה

א. יצירת סרגל צד כללי

ב. הוספת מאזינים לקליקים לסמנים

ג. הצגת פרטי מקום בחלון מידע

ד. טעינת פרטי מקום בסרגל צד

ה. הצגת תמונה של מקום עם פרטי המקום

רוצים לנסות?

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

6. מזל טוב

מה נכלל

מידע נוסף

איזה סוג של Codelab הכי היית רוצה שנבנה בהמשך?

איך ליצור שירות לחיפוש עסקים בקרבת מקום באמצעות Google Maps Platform (JavaScript)