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

בניית שירות חיפוש עסקים בקרבת מקום באמצעות מפות Google (JavaScript)

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

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

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

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

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

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

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

מה צריך לעשות

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

מה צריך?

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

מקבלים את הקוד לדוגמה

פותחים את הממשק של שורת הפקודה (מסוף ב-MacOS או שורת הפקודה ב-Windows) ומורידים את הקוד לדוגמה באמצעות הפקודה הבאה:

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

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

להורדת הקוד

משנים לספרייה ששכפול או הורדתם.

cd google-maps-nearby-search-js

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

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

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

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

1. יצירת דף HTML

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

החלפת ספריות לתיקייה work/. במהלך שאר הקוד של ה-Lab, מבצעים את השינויים בגרסה 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. הוספת מפה

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

צריך להוסיף את קוד הסקריפט הזה, במקום שבו מופיע  אחרי התג div map ולפני תג הסגירה </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 בדפדפן שלך, יחד עם ממשק ה-API של JavaScript במפות Google.

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

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

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

רוצים לנסות?

יש להחליף את הקוד בין התגובות 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 */

לבדיקה

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

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

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

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

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

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

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

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

ניתן לבצע חיפוש בקרבת מקום באמצעות קריאה לשיטה nearbySearch() של PlacesService. פעולה זו תחזיר מערך של PlaceResult אובייקטים.

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

ראשית, כדי לגשת לשירותים של ספריית המקומות, יש לעדכן את כתובת ה-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 והשני מקבל מספר שלם פשוט שמייצג את רדיוס העיגול במטרים. הרדיוס המקסימלי הוא 50000 מ'. חשוב לשים לב שכאשר מגדירים את rankBy ל-DISTANCE, צריך לציין מיקום אבל לא ניתן לציין רדיוס או גבולות.
keyword להתאמה לכל השדות הזמינים, כולל, בין היתר, שם, סוג וכתובת, כמו גם ביקורות של לקוחות ותוכן של צד שלישי אחר, או type, שמגביל את התוצאות למקומות שתואמים לסוג שצוין. ניתן לציין רק סוג אחד (אם מציינים יותר מסוג אחד, המערכת מתעלמת מכל הסוגים שמופיעים אחרי הערך הראשון). כדאי לעיין ברשימת הסוגים הנתמכים.

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

יש להוסיף את התגובה הבאה בתגובה 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);

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

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

ה-constructor של 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. הצגת פרטי מקום על פי דרישה

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

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

יש להוסיף את הקוד הבא לתג 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 ממש לפני ה-div map, מוסיפים Dive עבור חלונית הפרטים.

<!-- 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, מוסיפים פונקציות event listener לכל סמן בזמן שיוצרים אותן.

event 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 הוא מערך של שמות שדות עבור המידע שרוצים להחזיר לגבי המקום. להצגת הרשימה המלאה של השדות שבאפשרותך לבקש, יש לעיין בממשק למקום.

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

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

יש להוסיף את הקוד הבא בהערה 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. מזל טוב

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

מה כללנו?

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

מידע נוסף

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

איזה סוג של קוד Lab היית רוצה לפתח עכשיו?

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

נתונים נוספים על קוד ה-Codelab ב-Maps Platform JavaScript

אפשרויות נוספות של Codelabs ל-Android

תכונות קוד נוספות ב-iOS

תצוגה חזותית של נתונים מבוססי-מיקום במפות

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

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

בניית שירות חיפוש עסקים בקרבת מקום באמצעות מפות Google (JavaScript)

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

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

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

מה צריך לעשות

מה צריך?

מקבלים את הקוד לדוגמה

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

1. יצירת דף HTML

2. הוספת מפה

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

לבדיקה

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

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

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

רוצים לנסות?

לבדיקה

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

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

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

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

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

לבדיקה

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

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

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

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

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

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

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

לבדיקה

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

6. מזל טוב

מה כללנו?

מידע נוסף

איזה סוג של קוד Lab היית רוצה לפתח עכשיו?