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
  • Support of All Modern browsers
  • 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.

Maps Integration

Webix allows embedding geographical maps into an app with the help of its own components. Read more about the integration with maps from different providers.

Google Maps

Google Maps

Yandex Maps

Yandex Maps

OpenStreetMap

OpenStreetMap

HERE Maps

HERE Maps

Integration with other graphic tools

Please, find more information about graphic tools integration here.