Google maps in AB1



Peter Bradstreet
Hi David,

I hope that you are well. I am struggling with Google maps a bit and I was wondering if you would mind taking a quick look at my code. I am working originally from the Google Maps 3 sample and have it working with showing a single marker which then shows an infowindow on mouseover.

I am now trying to run a query in Firebase to return a number of records that I want to show as multiple markers on the map. Initially, I am just tryng to show markers for a series of manually stored locations and once I have it working, I will switch it to using dynamic data.

I am having an issue with the correct syntax for converting some code that I found online to be accepted by the AB code editor. Here is the code:

The specific section that is obviously wrong and won't compile is this portion:

Any assistance would be greatly appreciated! ...Pete


David Esperalta

Hello Peter,

If we talk specifically about the code that you shown, certainly there is a syntax error: a missing end bracket in the "for":



Peter Bradstreet

Thanks! I should have seen that.

Pete

David Esperalta

Glad to know that you finally got it Peter! ;-)



Peter Bradstreet
Hi David,

Still pounding away on Google maps and I have it working so that if you click on a map marker it pops up an infowindow that displays html content. In that content I want to have a button that takes the user to a different AB view. I was thinking that the best way to do this was to place a hidden button (HiddenButton1) on the map view and then have the button in the infowindow trigger the hidden button to go to the details view.

The js code snippet that sets the content of the infowindow is as follows:

When I click on the button in the marker infowindow I get the following console error: "SyntaxError: '' string literal contains an unescaped line break".

I was wondering whether this is the right approach and if so, what the correct syntax would be for the infowindow button or whether I am totally off base and there is a better way to handle this?

Thanks!
Pete

David Esperalta

Hello Peter,

Checking your code in this online tool, apparently there is no problem. So, I suspect that maybe a code like that (particularly the "onclick" event) can cause some problems... or... anyway... maybe it's required more information about, a possible sample app to reproduce the problem, for example.

However, I think there is a better approach: identify the button, place some information inside in a "data" attribute (optionally, I do it below because I like it), and then, use a jQuery event delegate in order to be ready for the button's click. Doing that, we no need to place any event in the button itself, which can cause undesired problems like you experience.

The below code is all what we need, and, can be placed in the app view Show event, in order to initialize the map, place a sample marker, and prepare the appropriate marker's info window, with a button inside, which go to another app view when it's pressed.

Below you have the complete sample app for AB1: save the XML into a "MyApp.ab" file, and open it with AB:

Remember to set your Google Maps API key (using the app Files Manager).



Peter Bradstreet
Hi David,

As always you went above and beyond, thanks for the help!! I have your sample working so I will dissect it and apply your approach to my app.

Thanks again!
Pete

David Esperalta

No problem, Peter! Thanks for your kindly words! :-)



Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.