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

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

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

מה תפתחו

e52623cb8578d625.png

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

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

מה תלמדו

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

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

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

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

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

דרישות אחרות ל-Codelab הזה

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

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

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

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

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

3. שנתחיל?

הגדרת מפות Google

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

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

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

הגדרת Node.js

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

Node.js מגיע עם מנהל חבילת npm, שצריך להתקין יחסי תלות עבור מעבדת קוד זו.

הגדרת תבנית למתחילים בפרויקט

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

  1. אפשר להוריד את ה-Repo Repoik או לפצל אותו ל-Codelab הזה בכתובת https://github.com/googlecodelabs/maps-platform-101-js.

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

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

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

4. טעינת ממשק ה-API של JavaScript במפות Google

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

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

אם יש לך ניסיון קודם ב-JavaScript של API למפות Google, ייתכן שכדאי לך לטעון אותו על-ידי הוספת תג 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-load. ה-JS API Loader כבר נכלל תלויות בקובץ package.json של הפרויקט, כך שהוא הותקן כשהפעלת את npm install מוקדם יותר.

כדי להשתמש ב-JS API Loader, יש לבצע את הפעולות הבאות:

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

    יש להוסיף את האפשרויות הבאות לראש דף app.js:
     import { Loader } from '@googlemaps/js-api-loader';
  3. יצירת אובייקט apiOptions.

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

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

אם השינויים מבוצעים בהצלחה, ההצהרה על console.log אמורה להופיע במסוף הדפדפן:

4fa88d1618cc7fd.png

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

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

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

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

    const loader = new Loader(apiOptions);

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

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

5. הצגת מפה

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

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

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

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

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

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

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

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

fb0cd6bc38532780.png

לסיכום, בשלב הזה הגדרת אפשרויות תצוגה למפה, יצרת מופע חדש של מפה והחדרת אותו ל-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. עיצוב מפה מבוסס ענן (אופציונלי)

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

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

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

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

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

כדי להשתמש במזהה המפה שיצרת, יש לשנות את הפונקציה 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, סביר להניח שאתם מכירים את סמן ברירת המחדל שנראה כך:

590815267846f166.png

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

  1. הגדרת אובייקט עבור מיקומי הסמן.

    כדי להתחיל, יוצרים פונקציה חדשה של 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 }
   }
 }
  2. יצירת מופע של google.maps.Marker לכל סמן שברצונך להציג.

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

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

    המאפיין icon מאפשר לך לספק את הנתיב לכל קובץ תמונות שברצונך להשתמש בו כסמן מותאם אישית. אם התחלתם את Lab Lab זה באמצעות תבנית הפרויקט שלנו, כבר נוספה עבורכם תמונה ב/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;
  3. להציג את הסמנים.

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

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

1e4a55de15215480.png

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

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

6e39736160c6bce4.png

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

4f372caab95d7499.png

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

  1. מייבאים את MarkerCluster.

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

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

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

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

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

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

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

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

e52623cb8578d625.png

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

d572fa11aca13eeb.png

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

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

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

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

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

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

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

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

  1. הגדרת event listener בסמנים.

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

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

     });
   });
 }
  2. הזזה לסמן בעת לחיצה עליו.

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

    לאחר מכן, כל מה שצריך לעשות הוא להעביר את הפונקציה הזו לפונקציית panTo() של מופע Map&panTo()
  3. יש להקצות את הפונקציות מסוג listener לקליקים.

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

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

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

הפונקציה 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;
    }

נותר רק עוד שלב אחד! בשלב הבא יש לך אפשרות לשפר את חוויית המשתמש במפה באמצעות תכונות השרטוט של ה-API של JavaScript במפות.

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

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

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

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

  1. משרטטים מעגל עם google.maps.Circle.

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

    כדי לשרטט את המעגל כאשר משתמש לוחץ על סמן, כל שעליך לעשות הוא להתקשר אל הפונקציה drawCircle() שכתבת למעלה דרך הקריאה החוזרת (callback) של ההאזנה ב-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);
     });
   });
 }

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

254baef70c3ab4d5.png

11. מזל טוב

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

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

מה עכשיו?

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

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