reviewsהשקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.
מפת חום היא תצוגה חזותית שמשמשת לתיאור עוצמת הנתונים בנקודות גיאוגרפיות. כשמפעילים את שכבת מפת החום, שכבת על צבעונית מופיעה מעל המפה. כברירת מחדל, אזורים בעוצמה גבוהה יותר יהיו בצבע אדום, ואזורים בעוצמה נמוכה יותר יהיו בצבע ירוק.
טעינת ספריית הוויזואליזציה
שכבת מפת החום היא חלק מהספרייה google.maps.visualization, והיא לא נטענת כברירת מחדל. המחלקות של Visualization הן ספרייה עצמאית, נפרדת מקוד ה-API הראשי של JavaScript במפות Google. כדי להשתמש בפונקציונליות של הספרייה הזו, צריך קודם לטעון אותה באמצעות הפרמטר libraries בכתובת ה-URL של bootstrap של Maps JavaScript API:
כדי להוסיף שכבת מפת חום, קודם צריך ליצור אובייקט HeatmapLayer
חדש ולספק לו נתונים גיאוגרפיים בצורה של מערך או אובייקט MVCArray[]. הנתונים יכולים להיות אובייקט מסוג LatLng או אובייקט מסוג WeightedLocation. אחרי שיוצרים מופע של האובייקט HeatmapLayer, מוסיפים אותו למפה באמצעות קריאה ל-method setMap().
בדוגמה הבאה מוסיפים 14 נקודות נתונים למפה של סן פרנסיסקו.
/* Data points defined as an array of LatLng objects */varheatmapData=[newgoogle.maps.LatLng(37.782,-122.447),newgoogle.maps.LatLng(37.782,-122.445),newgoogle.maps.LatLng(37.782,-122.443),newgoogle.maps.LatLng(37.782,-122.441),newgoogle.maps.LatLng(37.782,-122.439),newgoogle.maps.LatLng(37.782,-122.437),newgoogle.maps.LatLng(37.782,-122.435),newgoogle.maps.LatLng(37.785,-122.447),newgoogle.maps.LatLng(37.785,-122.445),newgoogle.maps.LatLng(37.785,-122.443),newgoogle.maps.LatLng(37.785,-122.441),newgoogle.maps.LatLng(37.785,-122.439),newgoogle.maps.LatLng(37.785,-122.437),newgoogle.maps.LatLng(37.785,-122.435)];varsanFrancisco=newgoogle.maps.LatLng(37.774546,-122.433523);map=newgoogle.maps.Map(document.getElementById('map'),{center:sanFrancisco,zoom:13,mapTypeId:'satellite'});varheatmap=newgoogle.maps.visualization.HeatmapLayer({data:heatmapData});heatmap.setMap(map);
הוספת נקודות נתונים משוקללות
במפת חום אפשר להציג אובייקטים מסוג LatLng או WeightedLocation, או שילוב של שניהם. שני האובייקטים מייצגים נקודת נתונים אחת במפה, אבל אובייקט WeightedLocation מאפשר גם לציין משקל לנקודת הנתונים הזו. החלת משקל על נקודת נתונים תגרום ל-WeightedLocation להיות מוצג בעוצמה גבוהה יותר מאשר אובייקט LatLng פשוט. המשקל הוא סולם לינארי, שבו לכל אובייקט LatLng יש משקל מרומז של 1 – הוספה של WeightedLocation אחד של {location: new google.maps.LatLng(37.782, -122.441), weight: 3} תהיה זהה להוספה של google.maps.LatLng(37.782, -122.441) שלוש פעמים.
אפשר לערבב אובייקטים מסוג weightedLocation ו-LatLng במערך אחד.
שימוש באובייקט WeightedLocation במקום באובייקט LatLng יכול להיות שימושי במקרים הבאים:
הוספה של כמויות גדולות של נתונים במיקום אחד. רינדור של אובייקט WeightedLocation יחיד במשקל 1,000 יהיה מהיר יותר מרינדור של 1,000 אובייקטים מסוג LatLng.
הדגשה של הנתונים על סמך ערכים שרירותיים. לדוגמה, אפשר להשתמש באובייקטים מסוג LatLng כשמשרטטים נתונים של רעידות אדמה, אבל יכול להיות שתרצו להשתמש באובייקט מסוג WeightedLocation כדי למדוד את העוצמה של כל רעידת אדמה בסולם ריכטר.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */varheatMapData=[{location:newgoogle.maps.LatLng(37.782,-122.447),weight:0.5},newgoogle.maps.LatLng(37.782,-122.445),{location:newgoogle.maps.LatLng(37.782,-122.443),weight:2},{location:newgoogle.maps.LatLng(37.782,-122.441),weight:3},{location:newgoogle.maps.LatLng(37.782,-122.439),weight:2},newgoogle.maps.LatLng(37.782,-122.437),{location:newgoogle.maps.LatLng(37.782,-122.435),weight:0.5},{location:newgoogle.maps.LatLng(37.785,-122.447),weight:3},{location:newgoogle.maps.LatLng(37.785,-122.445),weight:2},newgoogle.maps.LatLng(37.785,-122.443),{location:newgoogle.maps.LatLng(37.785,-122.441),weight:0.5},newgoogle.maps.LatLng(37.785,-122.439),{location:newgoogle.maps.LatLng(37.785,-122.437),weight:2},{location:newgoogle.maps.LatLng(37.785,-122.435),weight:3}];varsanFrancisco=newgoogle.maps.LatLng(37.774546,-122.433523);map=newgoogle.maps.Map(document.getElementById('map'),{center:sanFrancisco,zoom:13,mapTypeId:'satellite'});varheatmap=newgoogle.maps.visualization.HeatmapLayer({data:heatMapData});heatmap.setMap(map);
התאמה אישית של שכבת מפת חום
אפשר להתאים אישית את האופן שבו מפת החום תוצג באמצעות האפשרויות הבאות של מפת החום. מידע נוסף מופיע בHeatmapLayerOptions.
dissipating: מציין אם מפות הצפיפות מתפזרות בזום. אם הערך של המאפיין dissipating הוא false, רדיוס ההשפעה גדל עם רמת הזום כדי להבטיח שעוצמת הצבע תישמר בכל מיקום גיאוגרפי נתון. ברירת המחדל היא True.
gradient: מדרג הצבעים של מפת החום, שמוגדר כמערך של מחרוזות צבע ב-CSS. יש תמיכה בכל הצבעים ב-CSS3, כולל RGBA, למעט צבעים עם שמות מורחבים וערכי HSL(A).
maxIntensity: העוצמה המקסימלית של מפת החום. כברירת מחדל, הצבעים במפת החום מותאמים באופן דינמי בהתאם לריכוז הגבוה ביותר של הנקודות בכל פיקסל מסוים במפה. המאפיין הזה מאפשר לכם לציין ערך מקסימלי קבוע. הגדרת עוצמה מקסימלית יכולה לעזור אם מערך הנתונים מכיל כמה ערכים חריגים עם עוצמה גבוהה באופן חריג.
radius: רדיוס ההשפעה של כל נקודת נתונים, בפיקסלים.
opacity: רמת השקיפות של מפת החום, שמבוטאת כמספר בין 0 ל-1.
בדוגמה שלמטה מוצגות חלק מאפשרויות ההתאמה האישית שזמינות.
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-08-06 (שעון UTC)."],[[["\u003cp\u003eThe Heatmap Layer visualizes data intensity at geographical points using color gradients, typically with red for high intensity and green for low.\u003c/p\u003e\n"],["\u003cp\u003eTo use the Heatmap Layer, you must load the \u003ccode\u003egoogle.maps.visualization\u003c/code\u003e library using the \u003ccode\u003elibraries\u003c/code\u003e parameter in the Maps JavaScript API bootstrap URL.\u003c/p\u003e\n"],["\u003cp\u003eHeatmaps can be customized using options like \u003ccode\u003edissipating\u003c/code\u003e, \u003ccode\u003egradient\u003c/code\u003e, \u003ccode\u003emaxIntensity\u003c/code\u003e, \u003ccode\u003eradius\u003c/code\u003e, and \u003ccode\u003eopacity\u003c/code\u003e to control their appearance and behavior.\u003c/p\u003e\n"],["\u003cp\u003eData points for the heatmap can be provided as \u003ccode\u003eLatLng\u003c/code\u003e objects or \u003ccode\u003eWeightedLocation\u003c/code\u003e objects, with the latter allowing for specifying the intensity of each point using a weight value.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/utility/heatmap \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/utility/heatmap \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/heatmaplayer \"View this page for the JavaScript platform docs.\")\n\n1. [Overview](#overview)\n2. [Load the visualization library](#load_the_visualization_library)\n3. [Add Weighted Data Points](#add_weighted_data_points)\n4. [Customize a Heatmap Layer](#customize_a_heatmap_layer)\n\n| **[Deprecated:](/maps/deprecations)** The Heatmap Layer\n| functionality in the Maps JavaScript API will no longer be supported. This API was deprecated in\n| May 2025 and be made unavailable in a later version of the Maps JavaScript API, releasing in May\n| 2026. As a replacement for the Heatmap Layer, consider using third-party library integrations\n| like deck.gl, which offers a HeatmapLayer implementation. You can find more information in the\n| [deck.gl documentation](https://deck.gl/docs/api-reference/aggregation-layers/heatmap-layer).\n\nThe Heatmap Layer provides client side rendering of heatmaps.\n\nOverview\n\nA heatmap is a visualization used to depict the intensity of data at\ngeographical points. When the Heatmap Layer is enabled, a colored overlay will\nappear on top of the map. By default, areas of higher intensity will be colored\nred, and areas of lower intensity will appear green.\n\nLoad the visualization library\n\nThe Heatmap Layer is part of the `google.maps.visualization` library, and is not\nloaded by default. The Visualization classes are a self-contained library,\nseparate from the main Maps JavaScript API code. To use the functionality\ncontained within this library, you must first load it using the `libraries`\nparameter in the Maps JavaScript API bootstrap URL: \n\n```html\n\u003cscript async\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap\"\u003e\n\u003c/script\u003e\n```\n\nAdd a Heatmap Layer\n\nTo add a Heatmap Layer, you must first create a new `HeatmapLayer`\nobject, and provide it with some geographic data in the form of an array or an\n`MVCArray[]` object. The data may be either a\n[`LatLng`](/maps/documentation/javascript/reference#LatLng)\nobject or a\n[`WeightedLocation`](/maps/documentation/javascript/reference#WeightedLocation)\nobject. After instantiating the `HeatmapLayer` object, add it to the\nmap by calling the `setMap()` method.\n\nThe following example adds 14 data points to a map of San Francisco. \n\n```javascript\n/* Data points defined as an array of LatLng objects */\nvar heatmapData = [\n new google.maps.LatLng(37.782, -122.447),\n new google.maps.LatLng(37.782, -122.445),\n new google.maps.LatLng(37.782, -122.443),\n new google.maps.LatLng(37.782, -122.441),\n new google.maps.LatLng(37.782, -122.439),\n new google.maps.LatLng(37.782, -122.437),\n new google.maps.LatLng(37.782, -122.435),\n new google.maps.LatLng(37.785, -122.447),\n new google.maps.LatLng(37.785, -122.445),\n new google.maps.LatLng(37.785, -122.443),\n new google.maps.LatLng(37.785, -122.441),\n new google.maps.LatLng(37.785, -122.439),\n new google.maps.LatLng(37.785, -122.437),\n new google.maps.LatLng(37.785, -122.435)\n];\n\nvar sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);\n\nmap = new google.maps.Map(document.getElementById('map'), {\n center: sanFrancisco,\n zoom: 13,\n mapTypeId: 'satellite'\n});\n\nvar heatmap = new google.maps.visualization.HeatmapLayer({\n data: heatmapData\n});\nheatmap.setMap(map);\n```\n\nAdd Weighted Data Points\n\nA heatmap can render either\n[`LatLng`](/maps/documentation/javascript/reference#LatLng) or\n[`WeightedLocation`](/maps/documentation/javascript/reference#WeightedLocation)\nobjects, or a combination of the two. Both objects represent a single data\npoint on a map, but a `WeightedLocation` object allows you to additionally\nspecify a weight for that data point. Applying a weight to a data point will\ncause the `WeightedLocation` to be rendered with a greater intensity than a\nsimple `LatLng` object. The weight is a linear scale, in which each `LatLng`\nobject has an implicit weight of 1 --- adding a single `WeightedLocation`\nof `{location: new google.maps.LatLng(37.782, -122.441), weight: 3}` will have\nthe same effect as adding `google.maps.LatLng(37.782, -122.441)` three times.\nYou can mix `weightedLocation` and `LatLng` objects in a single array.\n\nUsing a `WeightedLocation` object in place of a `LatLng` can be useful when:\n\n- Adding large amounts of data at a single location. Rendering a single `WeightedLocation` object with a weight of 1000 will be faster than rendering 1000 `LatLng` objects.\n- Applying an emphasis to your data based upon arbitrary values. For example, you can use `LatLng` objects when plotting earthquake data, but you may want to use a `WeightedLocation` to measure the magnitude of each earthquake on the richter scale.\n\n```javascript\n/* Data points defined as a mixture of WeightedLocation and LatLng objects */\nvar heatMapData = [\n {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},\n new google.maps.LatLng(37.782, -122.445),\n {location: new google.maps.LatLng(37.782, -122.443), weight: 2},\n {location: new google.maps.LatLng(37.782, -122.441), weight: 3},\n {location: new google.maps.LatLng(37.782, -122.439), weight: 2},\n new google.maps.LatLng(37.782, -122.437),\n {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},\n\n {location: new google.maps.LatLng(37.785, -122.447), weight: 3},\n {location: new google.maps.LatLng(37.785, -122.445), weight: 2},\n new google.maps.LatLng(37.785, -122.443),\n {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},\n new google.maps.LatLng(37.785, -122.439),\n {location: new google.maps.LatLng(37.785, -122.437), weight: 2},\n {location: new google.maps.LatLng(37.785, -122.435), weight: 3}\n];\n\nvar sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);\n\nmap = new google.maps.Map(document.getElementById('map'), {\n center: sanFrancisco,\n zoom: 13,\n mapTypeId: 'satellite'\n});\n\nvar heatmap = new google.maps.visualization.HeatmapLayer({\n data: heatMapData\n});\nheatmap.setMap(map);\n```\n\nCustomize a Heatmap Layer\n\nYou can customize how your heatmap will be rendered with the following heatmap\noptions. See the\n[`HeatmapLayerOptions`](/maps/documentation/javascript/reference#HeatmapLayerOptions) documentation for more information.\n\n- `dissipating`: Specifies whether heatmaps dissipate on zoom. When dissipating is false the radius of influence increases with zoom level to ensure that the color intensity is preserved at any given geographic location. Defaults to true.\n- `gradient`: The color gradient of the heatmap, specified as an array of CSS color strings. All [CSS3 colors](http://www.w3.org/TR/css3-color/#html4) --- including RGBA --- are supported except for [extended named\n colors](http://www.w3.org/TR/css3-color/#svg-color) and HSL(A) values.\n- `maxIntensity`: The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.\n- `radius`: The radius of influence for each data point, in pixels.\n- `opacity`: The opacity of the heatmap, expressed as a number between 0 and 1.\n\nThe below example shows some of the customization options available.\n\n[View example](/maps/documentation/javascript/examples/layer-heatmap)"]]
