Chapter 20: Local Mapping

From Mapping in the Cloud by Peterson

Assignments from (put your name and device here)

All Google Maps API examples here do not use a key. Domains and related sub-domains that had used Google Maps API before June 22, 2016 should find that the maps still function without a key. That's why the keyless examples work from this page. If the Google Map examples below don't work once you upload them to your server, you need to get a free key from Google. Further details of this new requirement and other changes to the Google Maps API usage policy can be found here at this site. The key that Google provides to you for free would be added to the call to the API, like this:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>


NOTE: These examples use the W3C Geolocation API and Google Maps GeoLocation API. The ability to use these GeoLocation APIs to identify your location from non-HTTPS sites has been removed in Chrome - the browser for Android - as of April 20, 2016. Apple iOS removed the non-HTTPS GeoLocation option with version 10 (released Sept. 13, 2016). The reason this was done was that while you share your location with a server, the location might be intercepted by another party. The Geolocation API call must now be served in a secure context (HTTPS), like that used for credit card transactions. It is possible to create an HTTPS server but setting up HTTPS on your website involves:


These examples are designed for a browser. For each example, capture the screen after the dialog for the marker has been activated. Capture locations off-campus, both inside and outside of buildings.

Make sure that Location Services (under Privacy in iOS) is enabled on your device. Readings will vary based on whether wi-fi or cellular data connections is enabled. In urban areas, deactivating wi-fi (in Settings) will significantly reduce accuracy. Since these examples are based on web pages, either wi-fi or cellular data needs to be activated to load the pages.

GPS is used as a last resort, and only outside when there is a clear view of the sky. An accuracy of five meters or less generally indicates a GPS measurement.

To capture the screen on Apple iOS devices, follow this procedure:

Screen capture for Android devices varies by operating system and manufacturer.

Email each picture to yourself as capture1.jpg – capture9.jpg. Upload the screen captures into your code20 folder. If the filenames are named capture1.png, capture2.png, etc ... they will display and link automatically.


  1. 20_4_W3C_GeolocationAPI - Center the message on the screen.

  2. 20_5_W3C_GeolocationAPI_Marker_LatLong - Click on the marker and center.

  3. 20_6_W3C_GeolocationAPI_Marker_LatLong_Alt_Time - Click on the marker and center.

  4. 20_7_Updated Positioning - Positions will only be updated with wi-fi enabled. This will be depicted with multiple markers.

  5. 20_8_Nearby_Street_Address - Make sure wi-fi is enabled.

  6. 20_9_Accuracy+Address - Disable wi-fi and compare results to previous.

  7. 20_10_Time+position - Enable wi-fi. Click on the marker and center.

  8. 20_11_Leaflet_example - Make two screen shots - one with wi-fi enabled and one with wi-fi disabled.



  9. Google Maps GeoLocation API

Assignment Page