JavaScript Map UI widget

Webix offers an HTML JavaScript Map widget based on Google Maps API that can be easily integrated into your app. You can load data into the JS map and work with it like with any other Webix data widget.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Map widget configuration

Whether your app is intended to visualize economic indicators or show some tips for travellers, the displayed data will always relate to a certain region. You can define the starting point of your map by providing its coordinates and setting the desired zoom level.

Map types

The Maps widget supports four Google map types. Roadmap is a standard presentation of the road map which is used by default by the Google map service. Satellite displays images provided by the satellite. Hybrid is a combination of a standard and satellite maps. Terrain is a map that includes physical features of displayed regions.

JavaScript maps layers: markers and heatmap

The widget provides the possibility to display markers or heatmap layers on the maps based on the provided data. You can add, update and remove markers using data API as well as move and animate them. With heatmap you can tune all its available properties, such as opacity, gradient, radius, etc.