Centering map view ...

Discontinued products DHTMLX Touch
#1

Hi,
I have a problem with the centering of a google map when it is included in a cell of a layout. I have rows including a toolbar, some cells and a status bar. In the cells, I am using a grouplist, a pagelist and a scrollview including a googlemap view.

The map is configured as is : id:“myMap”, view:“googlemap”, zoom:15, mapType: “ROADMAP”, center:{ x: 45.055819, y: 5.087421 }. When I show the scrollview including the map, the map is displayed correctly but the center of the map is positionned in the upper left corner of the view instead of the center of the view …

When I include the same map in a Window view, the center is well positionned …

How should I make the position be centered corectly ? I tried many things to define width, … but no success.

Best regards, Frédéric

#2

dhtmlx code doesn’t affect this aspect of map rendering, you can check official google map api - maybe it have some helpers for such case

#3

Thanks.
But it is quite strange that when the same map is opened as a view inside a “Window”, the centering is right …

#4

Most probably it is native behavior of google map - it tries to render self, so center point of map is visible for sure, in case of scrollview, when not all view visible, it take in account only visible part of view, which results in center point shifting.

( if you have a demo link please PM it, I will double-check that it is not related to dhtmlx code )

#5

I have the same problem…i am not able to center the view in a row of a layout…

I see it on the left side…and it is not adjusted in all the room the view has…

Any solution for this?

Thanks and greetings!!

#6

I have the same problem…i am not able to center the view in a row of a layout…

Please provide a demo or code snippet that allows to reproduce the problem.

#7

this is a pop up i use but as i told you…the map does not fit the container

var _popUbicacion = {
view: “popup”,
modal: true,
top: 150,
left: 190,
id: “winPopUbicacion”,
body:
{
type: “clean”,
rows:
[
{
view: “radio”,
id: “tipoUbicacion”,
labelPosition: “right”,
labelWidth: 200,
labelAlign: “left”,
value: “0”,
options:
[
{ label: “Mi Ubicación”, value: “0” },
{ label: "Otra Ubicación ", value: “1” }
],
height: 50
},
{
view: “input”,
id: “localidad”,
type: “text”,
placeholder: “Localidad”,
align: “center”,
width: 150,
height: 50
},
{
id: “sliRadio”,
view: “slider”,
label: “Radio”,
value: 0,
name: “Radio”,
height: 70,
options:
[
{ value: 0, label: “500m” },
{ value: 1, label: “1km” },
{ value: 2, label: “3Km” },
{ value: 3, label: “5Km” },
{ value: 4, label: “Ciudad” }
]
},
{
view: “googlemap”,
id: “map”,
zoom: 18,
mapType: “HYBRID”,
gravity: 1,
height: 350,
width: 700
}
]
}
}

hope it helps!!

greetings!

#8

Hello,

this is a pop up i use but as i told you…the map does not fit the container

We have not managed to reproduce the problem locally. We tested the following (maps.google.com/maps/api/js?sensor=false js library was included):

dhx.ready(function(){ dhx.ui(_popUbicacion); });

Map is initialized in 100%-width and 100%-height container inside layout row.