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

  3. Nokia Maps API - Reference
  4. MapQuest API - Reference
  5. OpenStreetMap API - Reference
  6. Leaflet Maps API - Reference

  7. China Mapping APIs - Baidu Reference || AutoNavi Reference
  8. MapStraction API - Mapstraction is a Javascript library that provides a single, common interface for a wide variety of Javascript map APIs. Reference
    Examples: OpenLayers || Google MapsGo to the MapStraction Tutorial page and find an example that does not use either OpenLayers or Google Maps. Title the example "MapStraction3.htm" (link provided below) and place in the MapStraction folder.
  9. ESRI API -


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