DHTMLX Touch documentation

Map View

Map view is a component used for integration Google map. It inherites from view.


Full code of the example in the picture

Initialization

To init the component you need to perform 2 steps:

  1. Add special map library file in addition to the already included files
  2. Call initialization code
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<body>
dhx.ui ({view:"map",
...})
</body>

Parameters

In constructor you can specify the following parameters:

  • zoom - sets initial zoom
    (integer) Value can be changed from 0 to 20. The default value - 5.
  • center - sets initial center of the map. After initialization, map will focused on this point.
    • x - x coordinate of the center point
    • y - y coordinate of the center point
      The default value - { x:48.724,y: 8.215}
  • mapType - with this parameter you can specify which kind of Google map will be presented.
    • ROADMAP
    • SATELLITE
    • HYBRID
    • TERRAIN

Please note, Map view is a derived class, i.e. it inherits all the features of the base class (map view → view).

dhx.ui({
   container:"map_container",//container that contains layout
   cols:[// layout
   {//to the first column we place Map view
       view:"map",
       zoom:6,
       center:{
              x:48.724,
              y: 8.215},
       mapType:"ROADMAP"         
    },
   {
    ... //the second column of the layout.
    }]
})

Related how-tos