Google Maps Widget

[Ed_T_]

Folks,

Trying to put a map on a sub page using App Designer.

Dragged Google Maps widget out of the Other controls onto the page.

I have gone to Google and gotten a Browser API Key and entered that into the key input area, added Lat and Lng coords, chose Address from the center pulldown, and entered the address.

When you open that page on the emulator the error message reads:

Ooops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

 Click on the help icon for the widget and you get some lovely examples of JS none of which seem to fit with XDK best practice of not putting JS in the index.html file. Search the XDK forum and you get referred to the Geolocation example which doesn't use the widget, and also fails in the Emulator with the same error message.

It seems that putting a google map into an app should be trivial, yet it seems to be anything but.

What am I missing?

Thanks,

Ed

[PaulF_IntelCorp]

Where ever you see an example that puts JS in the HTML file, just turn it into a JS file and insert a script tag in the HTML file to insert the JS file there.

Find solutions for a Cordova app and that should work (e.g., search Stack Overflow for something like  "Cordova app google maps")

[Ed_T_]

But Paul!

If I'm having to write js code why even have the widget?!!

What is the purpose of the thing if not to keep folks from having to write (horrors!) actual code?

I've installed cordova-plugin-googlemaps and am making headway there, but still it shouldn't be this hard to plop down a simple map. Should it?

Thanks,
Ed

[Chris_P_Intel]

>> Click on the help icon for the widget and you get some lovely examples of JS none of which seem to fit with XDK best practice of not putting JS in the index.html file.

I'm not sure what you mean by that. I made an app with two sub-pages and a map on each, and no JS code is put directly into the HTML file.

I made a simple test app using Twitter Bootstrap that has two sub-pages and I put a google map on each one, along with a button to go to the other page.  The Google Maps API key seems to no longer be optional - the google api script from google.com is demanding it. But once entered, both maps work.

If you look at www/google_maps/google_maps.js  you'll see the code that sets up a google map for you, and you'll also see a function called refreshMap() that is called whenever a page changes, because maps that aren't visible can't be instantiated correctly. So this script looks for visible maps on every page change and then makes sure they are set up correctly.

Hope this helps,

Chris

[Ed_T_]

Hi Chris,

>>I'm not sure what you mean by that. I made an app with two sub-pages and a map on each, and no JS code is put directly into the HTML file.

What I mean is that when you click the info icon in the settings box in App Designer you are taken to the Google JS API and Right at the top is their Hello World code which has script tags intermingled with the html. Isn't that supposed to be a no no in XDK?

The point I was trying to make was the lack of documentation vis. XDK. Search the forum, search the Intel site, and there is NO mention of the Google Maps widget anywhere that documents the settings for the widget, what they do, or that you need a Browser API key as opposed to native platform keys.

>> I made a simple test app using Twitter Bootstrap that has

Which is exactly what I did. I have looked at index.html and there are two scripts in the header passing my Browser API key (which was entered in the widget) and the maps.js file.

Now, in going back over this a few minutes ago, I noticed that an error message pops up UNDER the Simulator window, (so you don't see it unless you close the window!) that says there was was an unhandled exec call to GoogleMaps.getMap

I'll bet this has something to do with the mysterious Service Method pulldown.

Thanks,
Ed

[PaulF_IntelCorp]

Ed -- the XDK and App Preview are not designed to implement a "no coding required" application experience, they are tools to facilitate building, debugging and packaging hybrid mobile Cordova apps.

[Ed_T_]

Then why do your own docs say:

You might use App Designer for the following reasons:

• If you are uncomfortable writing your own HTML and CSS/LESS.
• If you are not an expert using the chosen UI framework, or do not want to become an expert.
• If you would prefer that App Designer do the things that are difficult to do and/or require a lot of manual coding, such as media queries.
• When you need to quickly prototype an app UI for evaluation purposes.

I never asked for a programming free environment, but if you have "an intuitive GUI layout tool called App Designer"  as Michael E. describes it. Why not use it for the drudge work?

If you have a widget that is supposed to show a map based on info typed into a form why should that require programming?

[Andrejs_V_]

Hi Ed.T!

More stable for You will:

- put Row widget on Form

- Make div with name/id (example - "gmap")

and after simply work with samples from Google Map Developers JavaScript API site

one note; You need Android Key and allow JavaScript API in Your google projects console

without this You don't see map on device

[Ed_T_]

Andrejs,

Thanks for the tip. I plan to go through the API thoroughly because that's what's needed for a later app on my list. And I do have the APIs and credentials turned on and created.

Still, I'd like to hear back from Chris P. about what he did to make it work in App Designer. I'd like to know that technique so I can place a plain vanilla googlemap without code.

Ed

[Chris_P_Intel]

What I mean is that when you click the info icon in the settings box in App Designer you are taken to the Google JS API and Right at the top is their Hello World code which has script tags intermingled with the html. Isn't that supposed to be a no no in XDK?

Those docs are on Google's website. They are just trying to keep the sample easy to understand. Normally, yes, one would not put Javascript directly into the HTML file.

The point I was trying to make was the lack of documentation vis. XDK. Search the forum, search the Intel site, and there is NO mention of the Google Maps widget anywhere that documents the settings for the widget, what they do, or that you need a Browser API key as opposed to native platform keys.

The docs from google have a big Get A Key button on them. One change that has occurred since we first developed this widget is that the Google API key used to be optional. Now it is required.

I'll bet this has something to do with the mysterious Service Method pulldown.

No, the ServiceMethod would be used if you had a data source returning geographic locations and you wanted those locations to be placed as markers on your map. There is a video under the Help menu when App Designer is up that shows how to do this. It's a bit advanced.

[Ed_T_]

Chris,

> Normally, yes, one would not put Javascript directly into the HTML file.

Especially since App Designer will rewrite it out if any changes to widgets if you make any change to it in app designer. Ex.: If you add a <br> to make a graphic button's label break to two lines it will be stripped out if you alter a style.

> The docs from google have a big get a key...

Well, the "Ooops! Something went wrong" Error Message is definately a key issue. In my case it was because I was using an Android key instead of a browser key.

But my original question really wasn't about keys. You said earlier you created a map in Bootstrap. My assumption was you were saying you used the App Designer Google Maps widget which is what I was originally trying to do. I have yet to get that to work. All I get with the widget is a blank page, but I can't find any docs on the widget.

I'd still like to know how to get that to work! That's what I was saying should be trivial.

Meantime, I got a browser key for the Maps JavaScript API and built a couple of maps using that. However, I ended up using a key for the Embeded Map API and embeded the maps into an iFrame widget because the map Used Google Places rather than lat lng to specify the center point. Those maps had more information (address, business name, etc.) associated with the marker, so I went that way.

Thanks,
Ed

[Ed_T_]

Chris,

> There is a video under the Help menu when App Designer is up that shows how to do this. It's a bit advanced.

I've seen that video, and need to come up with that functionality. Probably I'll be using the WordPress REST API and AJAX to get at points stored in an SQL table. It ain't that advanced if you're not in a hurry to get it done yesterday. <grin>

Ed

[Chris_P_Intel]

Especially since App Designer will rewrite it out if any changes to widgets if you make any change to it in app designer. Ex.: If you add a <br> to make a graphic button's label break to two lines it will be stripped out if you alter a style.

App Designer is, ideally, supposed to leave your edits alone. But there are definitely exceptions. Some of the compound widgets, like the graphic button, take full ownership of the structure of the HTML of the widget and afford no customizations. My apologies if this is biting you.  But, putting a <script> tag in the HTML should not be a problem - it won't get squashed...just don't put it inside a Graphic Button ;-)

All I get with the widget is a blank page, but I can't find any docs on the widget.

Inside App Designer itself the map is always just a gray box. But if you go to the Simulator you'll see it work (once you provide the API key).  There aren't any docs on the widget itself because, excepting the service method, all the fields in the Properties pane match to properties of the Google Map - it was thought the documentation provided by Google should be the authority. 

[Ed_T_]

Chris,

> App Designer is, ideally, supposed to leave your edits alone.

Yeah, it isn't totally round trip as advertised, but if you are aware of the behavior then "it's a feature not a bug." <grin>

> it was thought the documentation provided by Google should be the authority. 

Well, when I tested it it didn't show up in Simulator or a Build sent to a test phone. Which I find odd because the embed and the JS API both display in Simulator.

As for authority, the widget has a pulldown for center on an address which I haven't found in the Google docs at all.

Still, for this simple little app,  I found embeded gave me a better map informationwise.

PS I want to search the literature first, but I think I've got a wierdness going with the back button coming out of maps. I'll ask it as a new ticket if I don't figure it out on my own.

Thanks,

Ed