Possible Maps Workaround?

My problem is the Google Maps component does not work in a published app. I can’t use Apple Maps in an Android app, so I am stuck. I am almost done with my workaround and it is working really well! I just need to figure out how to get the location text back into the app as a number so I can chop decimal places off and then I’m all set. It’s a bit of work, but it’s better than being stuck with blank maps.

And, it works!

Here’s my block:

So, I load my web page that has my Google Maps script into the map viewer I have created. When a user clicks on that, I use the Receives Message of the map viewer to get a returned message. My web page then returns a JSON with the latitude and longitude of the clicked point on the map. I can then pull this in and use it as a variable in the app. The end result is a working, clickable Google map!

The added benefit of doing it this way is that I can make my own custom map markers and customize other options of the map.

2 Likes

Does it work in an installed APK?

My Web Viewer Extension stopped working sine couple of months. It will be nice to know that things work again.

The same Web Viewer Extension and actually the same app works fine on iPhone but not on Android.

1 Like

I haven’t pushed to the Play Store yet, but it works great in Android Studio.

1 Like

Just download the APK and install it in your device. No need to push to Play Store to test this.

1 Like

I don’t have an Android device, so I have to use Android Studio to test my APKs.

1 Like

OK, so you are using an emulator not a real device which might not exactly be the same response as a real phone.

1 Like

I have my wife test it on her Google Pixel 2XL when I push updates to the Play Store and the web viewer has had no issues on her phone.

1 Like

Hi @muneer , do I understand you correctly, that the very basic component “web viewer” from Thunkable is not working in your app? For me it is working on iOS and Android. Some months ago I found out that you have to give the web_viewer component in the “design”-screen a valid URL, preferably a blank page (I use one from my own webspace).

I hope that helps.

2 Likes

See this sample project. It uses JavaScript to obtain the day after number of days entered by the user. It works on iPhone but not on Android
https://x.thunkable.com/projectPage/60d06b27eb9be10011749fcd

Can you please check and see.

Screenshot from the phone

Screenshot from the computer
image

The Web Viewer Extension gets the computed date when run from the computer or on an iPhone but respond with undefined when run from an Android.

1 Like

Hi, I think this conversion from a list to an object is not correct:
grafik

AFAIK an object is an associative array with key/value pairs, like { “name”: “Mike”, “year”: 2021 }. But in your app you deliver only four values (numbers) without keys. I think you should build an object with 4 key/value pairs (year, month, day, adddays) and pass it to the block “generate JSON from object”. I don’t know why it maybe works on an iPhone, I would say that this block shouldn’t work on either platform…

2 Likes

Thank you for taking the time to look into the issue. I wanted an array ( a list in Thunkable terms) and this is a valid array. I wasn’t looking for an object and therefore your description of the situation assumes an object for no obvious reason.

In the other hand, you are welcome to demonstrate any other simple project having two way communication between the app and an HTML file using the Web Viewer component and have it working using computer, iPhone, Android phone.

1 Like

I’m not sure why it is doing this. I tried seeing if I could figure it out by duplicating your html file on my server to tweak some things and I get the same result, no matter what I try. Oddly, if I pass the data to an alert(), it displays the information correctly but then updates the label with undefined. The way I worked my maps was to have the script call the postMessage function and return JSON data that I could then work with. Yours should return a string with the date information, but it does, indeed, return undefined when I put it in my Android emulator. I have no idea. The only thing I can ascertain is the the message data is not being passed into the postMessage function, for whatever reason, after it is processed inside the receiveMessage function.

1 Like

@ronnie
Do you mean to say your code/html works with Android devices without any issue? If yes, could you see what is the difference between the two?

Thanks in advance.

Hmmm… I only described your blocks: on the right side you generate a list with 4 elements. This list is feeded into a block “generate JSON from object” which is in my opinion not correct: the block “generate JSON from object” expects an object, doesn’t it? But you feed it with a list of 4 values. Is this the way you meant to be?

1 Like

I very much appreciate your effort.

Yes, this is exactly what I meant to do. I could use the JSON structure but even if, for example, you try to save a list to Firebase, it will just save it as a JSON.

In the list is correctly passed to the HTML file and processed correctly. If you try the project in your computer you will see that it calculates the date correctly even if you enter in the number of days field (the last one) 200 days, just press the button and the correct date will be displayed in the text box.

The function works correctly and as intended. The only issue is when run from an Android device it gives undefined for some reason.

@muneer, no. I could not get it to work and I tried various things. I’m not sure why it is returning undefined on Android.

1 Like

@ronnie ,
@Michael_Rogulla

Many thanks. I found the problem. Chrome does not allow the return of objects. Only text where as Safari will auto-convert to text. The Date in JavaScript is an object not a text.

1 Like

@muneer thanks for sharing that! I was racking my brain because my alert(message) portion of JavaScript was popping up the correct message, but the label kept coming back as undefined.

1 Like

All I needed to do was to add .toUTCString to the date variable.

ThunkableWebviewerExtension.postMessage(myDate.toUTCString());

I have updated the example I posted sometime ago so if someone uses it, gets the correct result.