TWebGoogleMaps Exception

WEB TMS WEB Core
1

I'm trying to use TWebGoogleMaps and it fails when I set the API Key. The reported error is:



ERROR
Uncaught SyntaxError: Unexpected token . | SyntaxError: Unexpected token . at Object.UpdateElement (http://localhost:8000/Buzz.Web/Buzz.Web.js:72164:29) at Object.SetAPIKey (http://localhost:8000/Buzz.Web/Buzz.Web.js:72119:14) at Object.SetMapConfig (http://localhost:8000/Buzz.Web/Buzz.Web.js:72936:24) at Object.LocationEditDatasetAfterOpen (http://localhost:8000/Buzz.Web/Buzz.Web.js:72844:12) at Object.cb [as FAfterOpen] (http://localhost:8000/Buzz.Web/Buzz.Web.js:216:26) at Object.DoAfterOpen (http://localhost:8000/Buzz.Web/Buzz.Web.js:58467:41) at Object.OpenCursorcomplete (http://localhost:8000/Buzz.Web/Buzz.Web.js:58744:16) at Object.SetActive (http://localhost:8000/Buzz.Web/Buzz.Web.js:58771:68) at Object.Open (http://localhost:8000/Buzz.Web/Buzz.Web.js:59495:12) at Object.XDataClientLocationGetLoad (http://localhost:8000/Buzz.Web/Buzz.Web.js:72861:32)

Console Stack:

Uncaught SyntaxError: Unexpected token .
    at Object.UpdateElement (WEBLib.WebCtrls.pas:706)
    at Object.SetAPIKey (WEBLib.WebCtrls.pas:624)
    at Object.SetMapConfig (Buzz.Location.Edit.pas:264)
    at Object.LocationEditDatasetAfterOpen (Buzz.Location.Edit.pas:226)
    at Object.cb [as FAfterOpen] (rtl.js:211)
    at Object.DoAfterOpen (db.pas:2599)
    at Object.OpenCursorcomplete (db.pas:3395)
    at Object.SetActive (db.pas:3525)
    at Object.Open (db.pas:4588)
    at Object.XDataClientLocationGetLoad (Buzz.Location.Edit.pas:307)

Line 706 is:

 document.head.appendChild(script);

Thanks
2

From where exactly do you set the API key?
Please set it in the Form's OnCreate event (just like in our demo)


3

This is where I set the APIKey, it even fails if the property is set at design time. This is fine if the ElementId property is not set.


It is also fine if the ElementId does not contain a period i.e. mymap works, my.map doesn't

Unlike the fileupload issue, this does not fail at design time but when it is run in the webbrowser:

1. Create a new Web Core Project
2. Add a TWebGoogleMaps to the unit
3. build the app
4. run the app ... this should work
5. close the browser
6. give TWebGoogleMaps.ElementId a value with a '.' e.g. "my.map"
7. build app
8. run the app ... this should cause the error
9. close the browser
10. change TWebGoogleMaps.ElementId a value without a '.' e.g. "mymap"
11. build app
12. Run app ... this should be fine

4

TWebGoogleMaps cannot be mapped onto a HTML element. The map is created from the control directly using JavaScript. ElementID is inherited from the base class TWebCustomControl but it does not make sense here to use it.

5

so how would you place it on a form that uses an HTML Template?

6

You could put it on a HTML container that you map to a HTML element in the template.

7

Yes, that's what I'm trying (actually on a pagecontrol page). But it seems to have a height of 0 so doesn't show. I'll get there.

8

I dropped a TWebPageControl on the form. On one of the pages, I dropped the TWebGoogleMaps controls and set the API key. This resulted in the TMS WEB Core application showing the Google Maps when I click the tab where it is on. I could not see a problem.

9

I've based the app on the music example so everything is loading into divs within divs, I wonder if that's the issue. I'll play around and report back