מאמר עזרה על עיצוב מפות מבוסס-ענן בפורמט JSON

בחירת פלטפורמה: Android Android 3D iOS iOS 3D JavaScript Web Service

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

הורדת הסכימה של JSON

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

הצגת דוגמה להצהרת סגנון ב-JSON

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

{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

אובייקט ה-JSON

הצהרה על סגנון JSON מורכבת מאובייקט ברמה העליונה וממערך של כללי סגנון.

• מאפיינים ברמה העליונה (אופציונלי) – הגדרות סגנון גלובליות כמו backgroundColor ו-variant.
• ‫styles – מערך של אובייקטים של כללי סגנון, שיכולים לכלול את האפשרויות הבאות:
  • ‫id – מאפיין המפה שבוחרים לשינוי הסגנון הזה (למשל, pointOfInterest.recreation.park).
  • ‫geometry (אופציונלי) – הרכיבים הגיאומטריים של מאפיין המפה וכללי הסגנון שרוצים להחיל (למשל, fillColor).
  • label (אופציונלי) – הטקסט או תווית הסיכה של מאפיין המפה וכללי הסגנון שרוצים להחיל (למשל, textStrokeColor).

מאפיינים ברמה העליונה

המאפיינים בטבלה הבאה חלים על כל סגנון המפה.

נכס	סוג	תיאור	דוגמה
backgroundColor	מחרוזת	התאמה אישית של צבע הרקע של אפליקציית המפות באמצעות מחרוזת הקסדצימלית ‎ #RRGGBB. אי אפשר לשנות את האטימות בהגדרה הזו.	"#002211"
variant	"light"|"dark"	מציינים מצב בהיר או מצב כהה. אם לא מציינים ערך, ברירת המחדל היא "light".	"light"
monochrome	בוליאני	כדי להפעיל את מצב המונוכרום, משתמשים ב-true כדי לקבל גרסה אפורה של המפה.	true
metadata	אובייקט	נתונים שרירותיים של מפתח/ערך שנכללים בהגדרת הסגנון. אפשר להשתמש בשדה הזה כדי לכלול תוכן שלא קשור לעיצוב של הסגנון. הנתונים האלה לא נשלחים ללקוחות של המפה, כמו Maps JavaScript SDK.	{"author": "me", "date": "2026-04-27"}

אובייקטים של כללי סגנון

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

• נכס אחד (id).
• רכיב geometry או label עם מאפייני העיצוב המשויכים שהוגדרו.

id (רכיב במפה)

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

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

רשימת הנכסים הזמינים ב-id

אלה המאפיינים הזמינים של id:

• pointOfInterest
• pointOfInterest.emergency
• pointOfInterest.emergency.fire
• pointOfInterest.emergency.hospital
• pointOfInterest.emergency.pharmacy
• pointOfInterest.emergency.police
• pointOfInterest.entertainment
• pointOfInterest.entertainment.arts
• pointOfInterest.entertainment.casino
• pointOfInterest.entertainment.cinema
• pointOfInterest.entertainment.historic
• pointOfInterest.entertainment.museum
• pointOfInterest.entertainment.themePark
• pointOfInterest.entertainment.touristAttraction
• pointOfInterest.foodAndDrink
• pointOfInterest.foodAndDrink.bar
• pointOfInterest.foodAndDrink.cafe
• pointOfInterest.foodAndDrink.restaurant
• pointOfInterest.foodAndDrink.winery
• pointOfInterest.landmark
• pointOfInterest.lodging
• pointOfInterest.recreation
• pointOfInterest.recreation.beach
• pointOfInterest.recreation.boating
• pointOfInterest.recreation.fishing
• pointOfInterest.recreation.golfCourse
• pointOfInterest.recreation.hotSpring
• pointOfInterest.recreation.natureReserve
• pointOfInterest.recreation.park
• pointOfInterest.recreation.peak
• pointOfInterest.recreation.sportsComplex
• pointOfInterest.recreation.sportsField
• pointOfInterest.recreation.trailhead
• pointOfInterest.recreation.zoo
• pointOfInterest.retail
• pointOfInterest.retail.grocery
• pointOfInterest.retail.shopping
• pointOfInterest.service
• pointOfInterest.service.atm
• pointOfInterest.service.bank
• pointOfInterest.service.carRental
• pointOfInterest.service.evCharging
• pointOfInterest.service.gasStation
• pointOfInterest.service.parkingLot
• pointOfInterest.service.postOffice
• pointOfInterest.service.restStop
• pointOfInterest.service.restroom
• pointOfInterest.transit
• pointOfInterest.transit.airport
• pointOfInterest.other
• pointOfInterest.other.bridge
• pointOfInterest.other.cemetery
• pointOfInterest.other.government
• pointOfInterest.other.library
• pointOfInterest.other.military
• pointOfInterest.other.placeOfWorship
• pointOfInterest.other.school
• pointOfInterest.other.townSquare
• political
• political.countryOrRegion
• political.border
• political.reservation
• political.stateOrProvince
• political.city
• political.sublocality
• political.neighborhood
• political.landParcel
• infrastructure
• infrastructure.building
• infrastructure.building.commercial
• infrastructure.businessCorridor
• infrastructure.roadNetwork
• infrastructure.roadNetwork.noTraffic
• infrastructure.roadNetwork.noTraffic.pedestrianMall
• infrastructure.roadNetwork.noTraffic.trail
• infrastructure.roadNetwork.noTraffic.trail.paved
• infrastructure.roadNetwork.noTraffic.trail.unpaved
• infrastructure.roadNetwork.parkingAisle
• infrastructure.roadNetwork.ramp
• infrastructure.roadNetwork.road
• infrastructure.roadNetwork.road.arterial
• infrastructure.roadNetwork.road.highway
• infrastructure.roadNetwork.road.local
• infrastructure.roadNetwork.road.noOutlet
• infrastructure.roadNetwork.roadShield
• infrastructure.roadNetwork.roadSign
• infrastructure.roadNetwork.roadDetail
• infrastructure.roadNetwork.roadDetail.surface
• infrastructure.roadNetwork.roadDetail.crosswalk
• infrastructure.roadNetwork.roadDetail.sidewalk
• infrastructure.roadNetwork.roadDetail.intersection
• infrastructure.railwayTrack
• infrastructure.railwayTrack.commercial
• infrastructure.railwayTrack.commuter
• infrastructure.transitStation
• infrastructure.transitStation.bicycleShare
• infrastructure.transitStation.busStation
• infrastructure.transitStation.ferryTerminal
• infrastructure.transitStation.funicularStation
• infrastructure.transitStation.gondolaStation
• infrastructure.transitStation.monorail
• infrastructure.transitStation.railStation
• infrastructure.transitStation.railStation.subwayStation
• infrastructure.transitStation.railStation.tramStation
• infrastructure.urbanArea
• natural
• natural.continent
• natural.archipelago
• natural.island
• natural.land
• natural.land.landCover
• natural.land.landCover.crops
• natural.land.landCover.dryCrops
• natural.land.landCover.forest
• natural.land.landCover.ice
• natural.land.landCover.sand
• natural.land.landCover.shrub
• natural.land.landCover.tundra
• natural.water
• natural.water.ocean
• natural.water.lake
• natural.water.river
• natural.water.other
• natural.base

רכיבים

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

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

• ‫geometry: בחירת כל הרכיבים הגיאומטריים (למשל, פוליגון, קו פוליגוני) של מאפיין המפה שצוין.
• ‫label: בחירה של כל רכיבי התווית (למשל, טקסט, סיכה) של מאפיין המפה שצוין.

מכשירים לאידוי בגדים

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

לדוגמה, בשביל שטח בנוי, אפשר לעצב כל רכיב באופן הבא:

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

בקטע הזה מתוארות אפשרויות הסגנון השונות שזמינות לרכיבים geometry ו-label.

‫geometry מעצבי שיער

בטבלה הבאה מפורטים כל הכלים הזמינים לעיצוב גיאומטרי.

הערה: לא כל סגנונות העיצוב זמינים לכל מאפייני המפה.

Styler	סוג	תיאור
visible	בוליאני	כדי להסתיר את הפוליגון או הקו הפוליגוני של מאפיין במפה, מגדירים את הערך false.
fillColor	מחרוזת	התאמה אישית של צבע הפוליגון או הקו הפוליגוני באמצעות מחרוזת הקסדצימלית של RGB.
fillOpacity	מספר ממשי (float)	אפשר להתאים אישית את האטימות של הפוליגון או הקו הפוליגוני, כאשר 0 הוא שקוף ו-1 הוא אטום.
strokeColor	מחרוזת	אפשר להתאים אישית את צבע קו המתאר באמצעות מחרוזת הקסדצימלית של RGB.
strokeOpacity	מספר ממשי (float)	אפשר להתאים אישית את האטימות של קווי המתאר, כאשר 0 הוא שקוף ו-1 הוא אטום.
strokeWeight	מספר ממשי (float)	מתאימים אישית את עובי קו המתאר בטווח שבין 0 ל-8.

מידע נוסף זמין במאמר פוליגונים וקווים פוליגוניים.

‫label מעצבי שיער

בטבלה הבאה מפורטים כל מעצבי התוויות הזמינים.

הערה: לא כל סגנונות העיצוב זמינים לכל מאפייני המפה.

Styler	סוג	תיאור
visible	בוליאני	כדי להסתיר את התווית של מאפיין במפה, מגדירים את הערך false.
textFillColor	מחרוזת	אפשר להתאים אישית את הצבע של תווית הטקסט באמצעות מחרוזת הקסדצימלית של RGB.
textFillOpacity	מספר ממשי (float)	אפשר להתאים אישית את השקיפות של תווית הטקסט, כאשר 0 הוא שקוף ו-1 הוא אטום.
textStrokeColor	מחרוזת	אפשר להתאים אישית את צבע קו המתאר באמצעות מחרוזת הקסדצימלית של RGB.
textStrokeOpacity	מספר ממשי (float)	אפשר להתאים אישית את האטימות של קווי המתאר, כאשר 0 הוא שקוף ו-1 הוא אטום.
textStrokeWeight	מספר ממשי (float)	מתאימים אישית את עובי קו המתאר בטווח שבין 0 ל-8.
pinFillColor	מחרוזת	התאמה אישית של צבע הסיכה באמצעות מחרוזת הקסדצימלית של RGB.
pinGlyphColor	מחרוזת	אפשר להתאים אישית את הצבע של הגליף (הסמל) בתוך סיכה באמצעות מחרוזת הקסדצימלית של RGB.
pinOutlineColor	מחרוזת	אפשר להתאים אישית את הצבע של קו המתאר של הסיכה באמצעות מחרוזת הקסדצימלית של RGB.

למידע נוסף, ראו סמלים ותוויות טקסט.

רמות זום קובעות

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

כדי להגדיר רמת זום קובעת לסגנון, במאפיין styler, מגדירים את רמת הזום הקובעת מ-z0 עד z22 ואז את ההתאמה האישית של ה-styler.

בדוגמה הבאה, צבע המים הוא שחור ברמות הזום הקובעות 0-5, אפור כהה ברמות הזום הקובעות 6-11 ואפור בהיר החל מרמת הזום הקובעת 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

מידע נוסף זמין במאמר סגנון רמות זום.

מגבלות

אתם יכולים להשתמש ב-JSON כדי לעצב כמעט כל דבר במסוף Google Cloud, חוץ מהאפשרויות הבאות בתפריט Map Settings:

• שליטה בצפיפות של נקודות העניין.
• לשנות את התצוגה של ציוני הדרך (מאוירים לעומת רגילים).

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

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

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