google maps component

Webix JS
1

Hi all,
I’m going crazy on gmap component, look at this snippet:

http://webix.com/snippet/80e9cbc4

if I click on the show button the first time, the map presents in the correct way, if I click on close button and then click again on the show button the zoom view change by itself.

If I remove the g.resize() call after g.show() , the map will not show at all.

Something is wrong. I need help please.

2

Such behavior looks like a bug, we will investigate into the problem.

But actually you don’t need to create the window each time you want to show it and destroy it each time it closes (this is what .close() method does).

You can create the window once and later on hide (.hide()) and show it on demand: http://webix.com/snippet/964bc66f

3

Helga,
I hope I don’t bother too much, I did what you wrote me but it still does not work, the following snippet is very similar to my actual code:
http://webix.com/snippet/8237f7da

and on the second click something changes the zoom

4

I meant that you needn’t recreate the window each time (webix.ui call).

So, is the window doesn’t exist, then you should create it. Otherwise you only need to reset its center and zoom parameters: Check the updated snippet, please: http://webix.com/snippet/499cbaf9

5

Thank you. With your hints I’m on right way: I must create the window map container once and then I must work on it with the define method. I modified my code and now it is faster and reliable.

Two other things:

  1. is there a way to substitute $$(“map”).define({center: [lng, lat], zoom:6});
    with the getBody method?
  2. I would like to add a marker on center coords but I don’t want to modify the original googlemap.js script, how may I do that?
6

(1) Yep, $$("mapwin").getBody() returns Google-map object.

(2) Marker creation is described in Google developer documentation. To add them to Webix Google-map, you should get map object as .map:

new google.maps.Marker({
    map: $$("mapwin").getBody().map,
});

Check the snippet, please: http://webix.com/snippet/c5c9e2d1

7

Thanks!!

8

I forgot to tell you that I have had to put my Google Developer Key in googlemap.js of course