Note: This service requires your project to have an associated billing information.
In order to create an heatmap, call the CreateHeatmap method of the map object like this:
data |
Array Required. An array of latLng literal objects. The data points to display to display as heatmap. |
radius |
Number Optional. The radius of influence for each data point, in pixels. |
gradient |
Array Optional. An array or color strings 'rgba(0-255, 0-255, 0-255, 0-1)' |
show |
Boolean Optional. Whether to show or hide the heatmap when created. Default is true. |
This will return an heatmap object.
For a bigger list of data points to display, you can save your data into a database or in a json file for coding efficiency.app.LoadPlugin("MapView"); function OnStart() { lay = app.CreateLayout("Linear", "VCenter, FillXY"); var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck"; map = app.CreateMapView(apiKey, 0.9, 0.5, 37.775, -122.434, 13); map.SetOnReady(MapOnReady); lay.AddChild(map); app.AddLayout(lay); } function MapOnReady() { map.AddListener('tilesloaded', 'PlotHeatMap'); // Ensure that the map tiles are fully loaded } function PlotHeatMap() { var data = [ {lat: 37.782551, lng: -122.445368}, {lat: 37.782745, lng: -122.444586}, {lat: 37.782842, lng: -122.443688}, {lat: 37.782919, lng: -122.442815}, {lat: 37.782992, lng: -122.442112}, {lat: 37.783100, lng: -122.441461}, {lat: 37.783206, lng: -122.440829}, {lat: 37.783273, lng: -122.440324}, {lat: 37.783316, lng: -122.440023}, {lat: 37.783357, lng: -122.439794}, {lat: 37.783371, lng: -122.439687}, {lat: 37.783368, lng: -122.439666}, {lat: 37.783383, lng: -122.439594}, {lat: 37.783508, lng: -122.439525}, {lat: 37.783842, lng: -122.439591}, {lat: 37.784147, lng: -122.439668}, {lat: 37.784206, lng: -122.439686}, {lat: 37.784386, lng: -122.439790}, {lat: 37.784701, lng: -122.439902}, {lat: 37.784965, lng: -122.439938}, {lat: 37.785010, lng: -122.439947}, {lat: 37.785360, lng: -122.439952}, {lat: 37.785715, lng: -122.440030}, {lat: 37.786117, lng: -122.440119}, {lat: 37.786564, lng: -122.440209}, {lat: 37.786905, lng: -122.440270}, {lat: 37.786956, lng: -122.440279}, {lat: 37.800224, lng: -122.433520}, {lat: 37.800155, lng: -122.434101}, {lat: 37.800160, lng: -122.434430}, {lat: 37.800378, lng: -122.434527}, {lat: 37.800738, lng: -122.434598}, {lat: 37.800938, lng: -122.434650}, {lat: 37.801024, lng: -122.434889}, {lat: 37.800955, lng: -122.435392}, {lat: 37.800886, lng: -122.435959}, {lat: 37.800811, lng: -122.436275}, {lat: 37.800788, lng: -122.436299}, {lat: 37.800719, lng: -122.436302}, {lat: 37.800702, lng: -122.436298}, {lat: 37.800661, lng: -122.436273}, {lat: 37.800395, lng: -122.436172}, {lat: 37.800228, lng: -122.436116}, {lat: 37.800169, lng: -122.436130}, {lat: 37.800066, lng: -122.436167}, {lat: 37.784345, lng: -122.422922}, {lat: 37.784389, lng: -122.422926}, {lat: 37.784437, lng: -122.422924}, {lat: 37.784746, lng: -122.422818}, {lat: 37.785436, lng: -122.422959}, {lat: 37.786120, lng: -122.423112}, {lat: 37.786433, lng: -122.423029} ]; heatmap = map.CreateHeatmap(data, 10, null, true); }
You can review for the definitions of the methods below at google map Infowindow class.
Below are the available setters for you to customize your infowindow the way you want.
app.LoadPlugin("MapView"); function OnStart() { lay = app.CreateLayout("Linear", "VCenter, FillXY"); var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck"; map = app.CreateMapView(apiKey, 0.95, 0.65, 37.775, -122.434, 13); map.SetOnReady(MapOnReady); lay.AddChild(map); spin = app.CreateSpinner( "10,20,30", 0.4 ); spin.SetOnChange( ChangeRadius ); spin.SelectItem("10"); lay.AddChild(spin); app.AddLayout(lay); } function MapOnReady() { var data = [ {lat: 37.782551, lng: -122.445368}, {lat: 37.782745, lng: -122.444586}, {lat: 37.782842, lng: -122.443688}, {lat: 37.782919, lng: -122.442815}, {lat: 37.782992, lng: -122.442112}, {lat: 37.783100, lng: -122.441461}, {lat: 37.783206, lng: -122.440829}, {lat: 37.783273, lng: -122.440324}, {lat: 37.783316, lng: -122.440023}, {lat: 37.783357, lng: -122.439794}, {lat: 37.783371, lng: -122.439687}, {lat: 37.783368, lng: -122.439666}, {lat: 37.783383, lng: -122.439594}, {lat: 37.783508, lng: -122.439525}, {lat: 37.783842, lng: -122.439591}, {lat: 37.784147, lng: -122.439668}, {lat: 37.784206, lng: -122.439686}, {lat: 37.784386, lng: -122.439790}, {lat: 37.784701, lng: -122.439902}, {lat: 37.784965, lng: -122.439938}, {lat: 37.785010, lng: -122.439947}, {lat: 37.785360, lng: -122.439952}, {lat: 37.785715, lng: -122.440030}, {lat: 37.786117, lng: -122.440119}, {lat: 37.786564, lng: -122.440209}, {lat: 37.786905, lng: -122.440270}, {lat: 37.786956, lng: -122.440279}, {lat: 37.800224, lng: -122.433520}, {lat: 37.800155, lng: -122.434101}, {lat: 37.800160, lng: -122.434430}, {lat: 37.800378, lng: -122.434527}, {lat: 37.800738, lng: -122.434598}, {lat: 37.800938, lng: -122.434650}, {lat: 37.801024, lng: -122.434889}, {lat: 37.800955, lng: -122.435392}, {lat: 37.800886, lng: -122.435959}, {lat: 37.800811, lng: -122.436275}, {lat: 37.800788, lng: -122.436299}, {lat: 37.800719, lng: -122.436302}, {lat: 37.800702, lng: -122.436298}, {lat: 37.800661, lng: -122.436273}, {lat: 37.800395, lng: -122.436172}, {lat: 37.800228, lng: -122.436116}, {lat: 37.800169, lng: -122.436130}, {lat: 37.800066, lng: -122.436167}, {lat: 37.784345, lng: -122.422922}, {lat: 37.784389, lng: -122.422926}, {lat: 37.784437, lng: -122.422924}, {lat: 37.784746, lng: -122.422818}, {lat: 37.785436, lng: -122.422959}, {lat: 37.786120, lng: -122.423112}, {lat: 37.786433, lng: -122.423029} ]; heatmap = map.CreateHeatmap(data, 10, null, show); } function ChangeRadius(rad) { heatmap.SetRadius(parseInt(rad)); }
Below are the available getter of the heatmap object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function.