Hello,
I’m trying to use maps components expecially zoom and center on the map but on ANDROID it crash. Only this component. I made test on Samsung S7 and S9. No problem with iOS.
I attached the blocks.
Hi there,
I believe you need to use the Map.OnMapReady instead of the Screen Starts block to trigger the event. The example below works:
Hello and thank you for your time and patience. I tried several things and did what was posted but Thunkable keeps crashing every time I try to update in the map the latitude and longitude. By any chance if you made it work, can you post the full block image so we can try to replicate your example? Thank you again.
Hello,
“Thunkable keeps crashing every time” - do you run the application on Android?
Actech,
the Maps continue to crash on Android devices (I already changed from more models); iOS is ok. Same blocks.
I noticed that some month ago … please could you fix it?
Many thanks
Andrea
Yes i did. I meant to say, Thunkable crashes on Android devices in the blocks where the Map is set in Latitude and Longitude.
I was wondering if anyone made it work so it can paste the blocks image or if it is a problem of thunkable x with android.
Thank you again.
I am not a developer and therefore can’t fix it. Perhaps Albert will be able on this occasion to say something.
I can only suggest to wait for the hotfix or use Thunkable Classic for Android or use web api for work with Map.
I was trying to find a way to make these blocks work, but it looks like it’s an internal engine error.
Sample problem solution on Android.
Code (parts of the code should be properly divided according to the image). Insert your KEY API instead of the text API KEY.
data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://maps.googleapis.com/maps/api/js?key=API KEY"></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<div id="map" class="map"></div>
<script>
function initMap(){
var centerLatLng = new google.maps.LatLng(
56.2928515
,
43.7866641
);
var mapOptions = {
center: centerLatLng,
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: centerLatLng,
map: map,
title: "Popup hint"
});
}
initMap();
</script>
Thank you actech. Because your approach i came with the following blocks that seem to work. The problem is that the map and the location sensor differ in the position because of different location provider i guess.
2 Likes
Your decision I like it too because of its simplicity. In the query string can specify a lot of interesting things. By the way, you can open Google Maps app (after ask for permission to access location).
Thank you. Alternatively you can add different parameters to your URL besides location including zoom, type, etc… In Google Developer Guide you can find the URL parameters. If you need the map only without what Google maps brings to the web component(like traffic button), Here Maps is an option, although you will have to call it from your server.
Hello,
question: if I have list of my stores with lat and long … is it possible get the list ordered by distance from my location?
So I can build a listview of my stores.
Many thanks
Andrea
Hello,
Yes. See the example https://developers.google.com/maps/documentation/javascript/examples/distance-matrix
You can also use the haversine formula, for example (I have not tested it):
function haversine_distance(coords1, coords2) {
function toRad(x) {
return x * Math.PI / 180;
}
var dLat = toRad(coords2.latitude - coords1.latitude);
var dLon = toRad(coords2.longitude - coords1.longitude)
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(toRad(coords1.latitude)) *
Math.cos(toRad(coords2.latitude)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
return 12742 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}
Alex
Is it possible to place markers in the web viewer if I have the lat and long
Yes.
Look at this (Google multiple markers - the Maps Static API)
https://x.thunkable.com/projects/5b5acd7867d08b941b791926/project/properties/designer/