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 use a key that is assigned to a specific server. You may need to acquire your own key. If the Google Map examples below don't work once you upload them to your server, you will need to get your own key from Google. As of July 2018, the Google key requires that you enter a credit card. The first $200 of usage is free. This equates to about 28,000 maps a month, more than most developers would need.

In this 2017 presentation at an academic conference, I present a review of problems in maintaining all of the code examples so that the examples continue to work.


  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
    OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License. Written and developed by programmers, it is difficult to learn, mainly because it uses authoring modules. The recommended way of using OpenLayers is installing the openlayers (ol) package that uses special directives 'export' and 'import' to interchange functionality. The following example does not use authoring modules.
  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. MapBox - Website
  9. ESRI API -

  10. EXTRA CREDIT


Return to my assignments page