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.

Map Widget ConfigurationView Demo

Whether your app is intended to visualize economic indicators or show some tips for travelers, the displayed data will always relate to a certain region. Instead of making the user to search for a particular country or a city manually, you can define its coordinates and set the desired zoom level.

JavaScript UI Maps Widget
View demo

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)View Demo

The widget provides the possibility to apply marker of heatmap layers for the maps. You can set and display markers, move and animate them, as well as provide additional information with info windows. While using the heatmap layer type for your widget, you can adjust its configuration settings according to your needs. Webix API allows tuning all available heatmap properties, such as opacity, gradient, radius, etc.

Heatmap JS UI Map widget
View demo

Frameworks Support

JavaScript widget can be integrated with jQuery, Angular, React, Vue.js, Backbone frameworks.


JavaScript Map can load data from JSON, XML, JSArray, CSV files and also allows you to use your own formats of data.

Easy Styling with CSS

The appearance of the widget is defined fully with CSS.

Cross Platform Support

The widget is compatible with all devices and browsers, including IE8+, the latest versions of Mozilla Firefox, Opera, Chrome and Safari.

Windows and Popups