App Inventor and HTML/JavaScript


How to use App Inventor together with the Google Maps JavaScript API to display the current location together with a custom map

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).

App Inventor Blocks

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.

Screenshots

You also can take a look at the result here: https://puravidaapps.com/php/kml/map-geolocation.html.

HTML file

<!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>

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Test

Tested on Nexus 5 running Android 5.0.1. Note: Google Location services must be enabled for this example to work.

Download


If you find this example helpful and you are using it in one of your projects,
be nice and donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
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.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact