Chapter 10: Map Mashups

From Mapping in the Cloud by Michael Peterson


In these examples, the size of the map is usually changed in the div statement in the body part of the file. To determine a new location for a map in latitude/longitude, use the right-mouse click in Google Maps (Mac: control/click) on the desired point. Select "What's here?" from the pop-up menu, click on the specified location in the the pop-up window and copy the latitude and longitude coordinates from the Google Maps address bar.

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>


  1. Google Maps API - Reference
  2. Bing Maps API - Reference (Updated to Version 8, June 2017)

  3. Nokia Maps API - Reference
  4. MapQuest API - Reference
  5. OpenStreetMap (OSM) OpenLayers API - Reference
  6. Leaflet Maps API - Reference || Examples of layers that can be used with Leaflet

  7. China Mapping APIs - Baidu Reference || AutoNavi Reference | Tencent Reference
  8. ESRI API -

  9. Pair-wise Map Comparisons - These examples present two maps side-by-side from two different mapping services. The scale and location for each pair-wise comparison is identical and randomly determined. US examples limit the random locations to the 48 states. EU examples are for Europe. EXTRA CREDIT: Add a comparison between two other map providers, or change the bounding box to another continent.

  10. Extra credit
  1. Make a display with two maps at the identical location and zoom level using two different APIs.
  2. Style a Google map so that it depicts only oceans and the outlines of countries.
  3. Use Leaflet to display a Bing map.
  4. Make a Google Map that automatically cycles between the map and satellite views.

Return to my assignments page