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

הוספת מפה לאתר (JavaScript)

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

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

מה תפַתחו

ב-codelab הזה תבנו אפליקציית אינטרנט פשוטה שמבצעת את הפעולות הבאות:

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

מה תלמדו

תחילת העבודה עם הפלטפורמה של מפות Google
טעינה דינמית של Maps JavaScript API מקוד JavaScript
טעינת מפה
שימוש בסמנים, בסמנים מותאמים אישית ובקיבוץ סמנים
עבודה עם מערכת האירועים של Maps JavaScript API כדי לספק אינטראקציה עם המשתמש
שליטה דינמית במפה
ציור על המפה

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

כדי להשלים את ה-Codelab הזה, צריך להכיר את הפריטים הבאים. אם אתם כבר יודעים איך עובדים עם Google Maps Platform, אתם יכולים לדלג אל ה-Codelab.

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

ב-Codelab הזה תשתמשו במוצרים הבאים של הפלטפורמה של מפות Google:

‫Maps JavaScript API
MarkerClustererPlus – ספריית קוד פתוח לקיבוץ סמנים

דרישות נוספות ל-Codelab הזה

כדי להשלים את ה-codelab הזה, תצטרכו את החשבונות, השירותים והכלים הבאים:

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

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

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

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

3. טיפים להגדרה

הגדרת הפלטפורמה של מפות Google

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

בCloud Console, לוחצים על התפריט הנפתח של הפרויקט ובוחרים את הפרויקט שבו רוצים להשתמש ב-codelab הזה.

מפעילים ב-Google Cloud Marketplace את ממשקי ה-API וערכות ה-SDK של הפלטפורמה של מפות Google שנדרשים ל-codelab הזה. כדי לעשות זאת, פועלים לפי השלבים בסרטון הזה או בתיעוד הזה.
יוצרים מפתח API בדף Credentials במסוף Cloud. אפשר לפעול לפי השלבים שמפורטים בסרטון הזה או בתיעוד הזה. כל הבקשות אל הפלטפורמה של מפות Google מחייבות מפתח API.

הגדרת Node.js

אם עדיין לא התקנתם אותו, אפשר להיכנס לכתובת https://nodejs.org/ כדי להוריד ולהתקין את זמן הריצה של Node.js במחשב.

‫Node.js מגיע עם מנהל החבילות npm, שנדרש להתקנת יחסי תלות בשביל ה-codelab הזה.

הגדרת תבנית בסיס לפרויקט

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

מורידים או יוצרים עותק (fork) של מאגר GitHub של ה-codelab הזה בכתובת https://github.com/googlecodelabs/maps-platform-101-js.

פרויקט המתחילים נמצא בספרייה /starter והוא כולל את מבנה הקבצים הבסיסי שדרוש לכם כדי להשלים את ה-codelab. כל מה שצריך לעבודה נמצא בספרייה /starter/src. 2. אחרי שמורידים את פרויקט המתחילים, מריצים את הפקודה npm install בספרייה /starter. כל הרכיבים התלויים שנדרשים מפורטים ב-package.json. 3. אחרי שמתקינים את יחסי התלות, מריצים את הפקודה npm start בספרייה.

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

כדי לראות את קוד הפתרון המלא בפעולה, אפשר להשלים את שלבי ההגדרה שלמעלה בספרייה /solution.

4. טעינת Maps JavaScript API

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

הבסיס לשימוש בפלטפורמה של מפות Google לאינטרנט הוא Maps JavaScript API. ממשק ה-API הזה מספק ממשק JavaScript לשימוש בכל התכונות של הפלטפורמה של מפות Google, כולל המפה, הסמנים, כלי הציור ושירותים אחרים של הפלטפורמה של מפות Google, כמו Places.

אם יש לכם ניסיון קודם עם Maps JavaScript API, יכול להיות שאתם מכירים את הטעינה שלו על ידי הוספת תג script לקובץ HTML, כמו בדוגמה הבאה:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

זו עדיין דרך תקינה לחלוטין לטעינת ה-API, אבל ב-JavaScript מודרני, יחסי תלות נכללים בדרך כלל באופן דינמי מהקוד. כדי להשיג את אותה התוצאה של התג script שמוצג למעלה באמצעות קוד, צריך להשתמש במודול@googlemaps/js-api-loader. הכלי JS API Loader כבר כלול בתלות של קובץ package.json של הפרויקט, ולכן הוא הותקן כשמריצים את הפקודה npm install בשלב מוקדם יותר.

כדי להשתמש בטוען של JS API:

פתיחת /src/app.js. בקובץ הזה תבצעו את כל העבודה שלכם בסדנת הקוד הזו.
מייבאים את המחלקה Loader מ-‎ @googlemaps/js-api-loader.

מוסיפים את הטקסט הבא לחלק העליון של app.js:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
יוצרים אובייקט apiOptions. ‫

המחלקה Loader דורשת אובייקט JSON שמציין אפשרויות שונות לטעינת Maps JavaScript API, כולל מפתח API של פלטפורמת מפות Google, הגרסה של ה-API שרוצים לטעון וספריות נוספות שסופקו על ידי Maps JS API שרוצים לטעון. לצורך ה-codelab הזה, צריך רק לציין את מפתח ה-API על ידי הוספת המחרוזת הבאה ל-app.js:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
יוצרים מופע של Loader ומעבירים אליו את apiOptions.
```
 const loader = new Loader(apiOptions);
```
טוענים את Maps JavaScript API.

כדי לטעון את ה-API, קוראים ל-load() במופע Loader. ה-JS API Loader מחזיר הבטחה שמושלמת אחרי שה-API נטען ומוכן לשימוש. מוסיפים את ה-stub הבא כדי לטעון את ה-API ולטפל בהבטחה:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

אם הכול יפעל כמו שצריך, תראו את ההצהרה console.log במסוף הדפדפן. ב-Chrome, אפשר לגשת לחלון הנוסף הזה דרך תצוגה -> פיתוח -> מסוף Javascript.

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

קובץ app.js אמור להיראות כך:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.load().then(() => {
      console.log('Maps JS API Loaded');
    });

אחרי שממשק API של JavaScript במפות Google נטען, אפשר לטעון את המפה בשלב הבא.

5. הצגת מפה

הגיע הזמן להציג את המפה הראשונה!

החלק הנפוץ ביותר בממשק API של JavaScript במפות Google הוא google.maps.Map, שהוא המחלקה שמאפשרת לנו ליצור מופעים של מפות ולבצע בהם מניפולציות. כדי לראות איך עושים את זה, יוצרים פונקציה חדשה בשם displayMap().

קובעים את הגדרות המפה. ‫

Maps JavaScript API תומך במגוון הגדרות שונות למפה, אבל רק שתי הגדרות הן חובה:
- ‫center: מגדיר את קו הרוחב וקו האורך של מרכז המפה.
- ‫zoom: מגדיר את רמת הזום הראשונית של המפה.
משתמשים בקוד הבא כדי למרכז את המפה על סידני, אוסטרליה, ולהגדיר את רמת הזום ל-14, שהיא רמת הזום המתאימה להצגת מרכז העיר.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
משיגים את div שבו המפה אמורה להיות מוזרקת ל-DOM.

כדי להציג את המפה, צריך לציין לממשק Maps JavaScript API איפה רוצים שהיא תוצג בדף. אם תסתכלו במהירות ב-index.html, תראו שכבר יש div שנראה כך:
```
 <div id="map"></div>
```
כדי לציין לממשק API של JavaScript במפות Google שזה המקום שבו רוצים להחדיר את המפה, משתמשים ב-document.getElementById כדי לקבל את הפניה ל-DOM:
```
 const mapDiv = document.getElementById('map');
```
ליצור מופע של google.maps.Map.

כדי לבקש מ-Maps JavaScript API ליצור מפה חדשה שאפשר להציג, יוצרים מופע של google.maps.Map ומעבירים את mapDiv ו-mapOptions. הפונקציה מחזירה גם את מופע Map, כדי שתוכלו לבצע איתו פעולות נוספות בהמשך:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
הצגת המפה

אחרי שמגדירים את כל הלוגיקה ליצירת מופע של מפה, כל מה שנותר הוא לקרוא ל-displayMap() ממטפל ההבטחות של JS API, כדי שהקריאה תתבצע אחרי הטעינה של Maps JavaScript API:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

עכשיו אמורה להופיע בדפדפן מפה יפה של סידני:

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

הפונקציה displayMap() אמורה להיראות כך:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. עיצוב מפות מבוסס-ענן (אופציונלי)

אתם יכולים להתאים אישית את הסגנון של המפה באמצעות עיצוב מפות מבוסס-ענן.

יצירת מזהה מפה

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

יוצרים מזהה מפה.
משייכים מזהה מפה לסגנון מפה.

הוספת מזהה המפה לאפליקציה

כדי להשתמש במזהה המפה שיצרתם, משנים את הפונקציה displayMap בקובץ app.js ומעבירים את מזהה המפה במאפיין mapId של האובייקט mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

אחרי שמסיימים את התהליך, הסגנון שבחרתם אמור להופיע במפה.

7. הוספת סמנים למפה

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

בשלב הזה משתמשים ב-google.maps.Marker כדי להוסיף סמנים למפה.

מגדירים אובייקט למיקומי הסמנים.

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

בנוסף, חשוב לזכור שצריך להעביר את מופע Map לפונקציה. תשתמשו בזה בהמשך כשתיצרו את מופעי הסמן.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

יוצרים מופע של google.maps.Marker לכל סמן שרוצים להציג.

כדי ליצור את הסמנים, משתמשים בקוד שבהמשך כדי לבצע איטרציה באובייקט locations באמצעות לולאת for...in, ליצור קבוצת אפשרויות לגבי אופן העיבוד של כל סמן, ואז ליצור מופע של google.maps.Marker לכל מיקום.

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

המאפיין icon מאפשר לספק את הנתיב לכל קובץ תמונה שרוצים להשתמש בו כסמן מותאם אישית. אם התחלתם את ה-codelab הזה באמצעות תבנית הפרויקט שלנו, תמונה כבר כלולה בשבילכם ב-/src/images.

שימו לב גם שצריך לאחסן את מופעי הסמן במערך ולהחזיר אותם מהפונקציה כדי שאפשר יהיה להשתמש בהם בהמשך.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
מציגים את הסמנים. ‫

Maps JavaScript API יוצר ומציג סמן באופן אוטומטי בכל פעם שנוצר מופע חדש של google.maps.Marker, כך שכל מה שצריך לעשות עכשיו הוא לעדכן את handler ההבטחה של JS API כדי לקרוא ל-addMarkers() ולהעביר אליו את המופע של Map:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

עכשיו אמורים להופיע סמנים מותאמים אישית במפה:

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

הפונקציה addMarkers() אמורה להיראות כך:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

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

8. הפעלת קיבוץ סמנים

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

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

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

מייבאים את MarkerCluster.

בספריית התבניות של הפרויקט הזה, ספריית כלי העזר MarkerClustererPlus כבר כלולה בתלות שהוגדרה בקובץ package.json, כך שכבר התקנתם אותה כשביצעתם את הפקודה npm install בתחילת ה-codelab הזה.

כדי לייבא את הספרייה, מוסיפים את השורה הבאה לחלק העליון של קובץ app.js:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
יוצרים מופע חדש של MarkerClusterer.

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

קודם, מגדירים אובייקט שמציין את הנתיב לסמלים שרוצים להשתמש בהם. בפרויקט התבנית, כבר יש קבוצה של תמונות ששמורות ב-./img/m. שימו לב ששמות הקבצים של התמונות ממוספרים ברצף עם אותו קידומת: m1.png, m2.png, m3.png וכן הלאה.

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

שנית, יוצרים מופע חדש של MarkerClusterer ומעבירים לו את המופע של Map שבו רוצים להציג את אשכולות הסמנים, ומערך של מופעים של Marker שרוצים לאגד.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
הצגת קבוצות של סמנים.

קוראים ל-clusterMarkers() מתוך handler של הבטחה של JS API. אוספי הסמנים מתווספים אוטומטית למפה כשיוצרים את מופע MarkerClusterer בקריאה לפונקציה.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

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

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

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

הפונקציה clusterMarkers() אמורה להיראות כך:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

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

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

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

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

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

מגדירים מאזין לקליקים על הסמנים.

כל האובייקטים ב-Maps JavaScript API שתומכים במערכת האירועים מטמיעים קבוצה סטנדרטית של פונקציות לטיפול באינטראקציה של המשתמש, כמו addListener,‏ removeListener ועוד.

כדי להוסיף listener לאירוע קליק לכל סמן, חוזרים על המערך markers וקוראים ל-addListener במופע הסמן כדי לצרף listener לאירוע click:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
הזזה של המפה למרכז כשלוחצים על סמן.

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

אחרי שמקבלים את המיקום, פשוט מעבירים אותו לפונקציה המובנית panTo() של מופע Map כדי שהמפה תזוז בצורה חלקה למרכז החדש של הסמן שנלחץ. לשם כך, מוסיפים את הקוד הבא לפונקציית הקריאה החוזרת של המטפל באירועים:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```
מקצים את פונקציות ה-listener של הקליקים.

מתקשרים אל addPanToMarker() מתוך handler ההבטחה של JS API, ומעבירים לו את המפה ואת הסמנים כדי להריץ את הקוד ולהקצות את מאזיני הקליקים.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });
```

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

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

הפונקציה addPanToMarker() אמורה להיראות כך:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

רק עוד שלב אחד וסיימתם! בשלב הבא, תוכלו לשפר עוד יותר את חוויית המשתמש במפה באמצעות תכונות הציור של Maps JavaScript API.

10. ציור על המפה

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

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

‫Maps JavaScript API כולל קבוצה של פונקציות לשרטוט צורות במפה, כמו ריבועים, פוליגונים, קווים ומעגלים. בשלב הבא, תציגו עיגול כדי להראות רדיוס של 800 מטרים (בערך חצי מייל) סביב סמן כשלוחצים עליו.

משרטטים מעגל באמצעות google.maps.Circle.

פונקציות הציור ב-Maps JavaScript API מספקות מגוון רחב של אפשרויות לגבי האופן שבו אובייקט מצויר מופיע במפה. כדי להציג רדיוס מעגלי, צריך להגדיר קבוצת אפשרויות לעיגול, כמו צבע, עובי קו, המיקום שבו העיגול צריך להיות ממוקם והרדיוס שלו, ואז ליצור מופע חדש של google.maps.Circle כדי ליצור עיגול חדש:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
שרטוט המעגל כשלוחצים על סמן.

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

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

הפונקציה addPanToMarker() אמורה להיראות כך:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

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

11. מזל טוב

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

כדי לראות את הקוד המלא, אפשר לעיין בפרויקט המוגמר בספרייה /solutions.

מה השלב הבא?

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

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

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