[Google Maps Mobile] Showing a polygon on the map only works first time.

[Google Maps Mobile] Showing a polygon on the map only works first time.

  
Forge Component
(9)
Published on 24 May by Labs
9 votes
Published on 24 May by Labs

Hi all,

I’m having some trouble with the mobile Google maps component, GoogleMapsMoble. The requirement is to draw a polygon on the map.

What I did is the following:

  • In the GoogleMapsMoble eSpace I cloned the “SingleLocationMap” webblock and renamed it.
  • Added an extra parameter “Path”. This is to supply the latitude/longitude coordinates as tekst.
  • In the JavaScript “OsGoogleMap” I’ve added an extra function (i.e. addPolygon) to the function “OSGoogleMapsAPIObject” which is:
    this.addPolygon = function(mapId, path) {
        var OSMap = this.getMap(mapId);

        var plotPath = eval(path);

        var existingPlot = new google.maps.Polygon({
            paths: plotPath,
            editable: false,
            fillColor: '#F07305', /* Orange */
            fillOpacity: 0.5,
            strokeColor: '#78be1e' /* Green */
        });
        existingPlot.setMap(OSMap.gmap);
    };
  • I’ve added a client side logic function “AddPolygon” to call the above mentioned function.


  • In WB “” I’ve added the call to the “AddPolygon” client side function to the WB action “Map_OnParametersChanged”.
  • Finally in the mobile app I’ve created a screen which uses the WB and supplies lat/lng coordiante tekst in the “Path” parameter, based on a selection from a list of names.

The good news is that it works!

The bad news is, that it only works once...

When the user goes back from the screen that shows the polygon and selects the same or another name from the list, an error is thrown:


Message: Not an array.
Error
    at new Pb (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:42:72)
    at Object._.Qb (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:42:182)
    at https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:44:360
    at zg (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:90:444)
    at Bg (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:91:218)
    at _.Eg.setPaths (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:142:610)
    at _.Eg._.m.setValues (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:122:88)
    at _.Eg.Dg [as constructor] (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:92:62)
    at new _.Eg (https://maps.googleapis.com/maps/api/js?key=****_g0DpHB-J6f5f-GO2VPfN5zO1NI&libraries=drawing&callback=__async_req_1__:92:117)
    at OSGoogleMapsAPIObject.create (https://***.outsystemsenterprise.com/AnApp/scripts/GoogleMapsMobile.OsGoogleMap.js?sGEJUUTMP2ynJXBi65SuDQ:283:32)

I’ve debugged it, and I saw that the second time the “Path” parameter is empty, allthough it’s supplied to the WB. I’m a bit puzzled why this happens?

Anyone have an idea?

Thanks,

Menno

I'm interested in having a look at this.  I've following your instructions and I know that the addPolygon function is firing, but the polygon is not being drawn.  The map is positioned in the correct area.

No console errors.  For testing I'm using the co-ordinates from Google's sample... the Bermuda Triangle... so I know they're correct.

Solution

Hi David,

I've created a new mobile app. Also used the Bermuda polygon. When I press the button on the first screen...

...I get immediately the "Not an array" message.

To fetch the data I use:

In the PolygonData Fetch I just return the Bermuda lat/lng's hardcoded:

[{lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757}, {lat: 25.774, lng: -80.190}]

This got me thinking that the data just isn't there yet. In our "real" mobile app it's working the first time and then every time after, the error is thrown.

So, in the test app I've put the Maps webblock in an IF:

The condition checks the "HasData" variable.

Then put an "OnAfterFetch" event on the PolygonData:

This triggers the "OnAfterFetch_PolygonData" action that sets the variable "HasData" to true.

Now it's working OK!   


Looking back at why it was working only the first time. I think it was just dumb luck that it worked. Looks like that the delay of creating the Maps object was just enough to fetch the data. All other times the object was allready there which made the fetching of the data the bottleneck.

I've put it also on our "real" app and that is working now too.

Cheers,

Menno

Solution

Glad you found it... that's a nice solution.  Following your new example, my maps shows the correct area, but still no polygon... so odd.  Are there any other dependencies required?  Does it matter where, in OSGoogleMap, in OSGoogleMapsAPIObject, you put your addPolygon code?  Could you post your test app so I can check it against mine?

Cheers,

David

I figured it out what caused it.

The code that's in the function was also in the this.create function of the OsGoogleMap JavaScript. When I added the function I didn't noticed that I didn't remove the part from the this.create function. This code is actually the reason that it worked...  

Kind of coincidence, because I've added the function AddPolygon just before I fixed the loading of the data.

It works, but I can't tell why the function isn't working...  

So, If you add

            var plotPath = eval(path);

            var existingPlot = new google.maps.Polygon({
                paths: plotPath,
                editable: false,
                fillColor: '#F07305', /* Orange */
                fillOpacity: 0.5,
                strokeColor: '#78be1e' /* Green */
            });
            
            existingPlot.setMap(map);

in the function

this.create = function(mapId, containerId, zoom, center, mapOptions, callback, path)

it should work for you too.