It has been asked in the forum:
I'm trying to create a small application. This is a custom Google map that is displayed via the web viewer
and I would like to make the map show the current GPS position.
This is a nice example for the Google Maps JavaScript API! I first created a kml file using the custom map from Petr and uploaded it to my web server.
Then I prepared a html document using
the geolocation example together with the
kml layer example and also uploaded it to my web server (see the complete html file below).
The App Inventor app itself is very small, it's just a webviewer (UsesLocation must be enabled) which opens the html file. That's all.
After starting the app, you first have to allow the permission request. Then your current location will be displayed on the map
(in the screenshot you can see, that my current location is Costa Rica) and
after touching the map the custom map (from the kml file) appears.
Note: Google Location services must be enabled for this example to work.
You also can take a look at the result here: https://puravidaapps.com/php/kml/map-geolocation.html.
<!DOCTYPE html> <html> <head> <title>Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> // source: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation // Note: This example requires that you consent to location sharing when // prompted by your browser. If you see a blank space instead of the map, this // is probably because you have denied permission for location sharing. var map; function initialize() { var mapOptions = { zoom: 6 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({ position: pos, map: map, title: "User location" }); // Add a listener for the click event google.maps.event.addListener(map, 'click', showLayer); map.setCenter(pos); }, function() { handleNoGeolocation(true); }); } else { // Browser doesn't support Geolocation handleNoGeolocation(false); } } function showLayer(event) { // source: https://developers.google.com/maps/documentation/javascript/examples/layer-kml var ctaLayer = new google.maps.KmlLayer({ url: 'https://puravidaapps.com/php/kml/Seznam.kml' }); ctaLayer.setMap(map); } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser doesn\'t support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } google.maps.event.addDomListener(window, 'load', initialize); </script>
</head> <body> <div id="map-canvas"></div> </body> </html>
Tested on Nexus 5 running Android 5.0.1. Note: Google Location services must be enabled for this example to work.
Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!
or donate some mBTC to Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Thank you! Taifun
Download aia file for App Inventor
Back to top of page ...
This work by Pura Vida Apps
is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.