The report explaining how the data behind the map was generated is here: http://www.nature.org/idc/groups/webcontent/@web/@northamerica/documents/document/prd_056889.pdf
While I didn't have anything to do with generating the data, I'm pretty proud of how the map was put together, so for those interested, here's how it works. We wanted an easy to use interface (Google Maps being the best choice for simplicity), a really easy way for non-techies to update the data (Google Fusion Tables is great for this), but we also wanted to have full control over the look and feel of the base map (which is much harder to do with Google).
Since we had two kinds of popups for different cities, we used two different Fusion Tables:
- The blue dots are cities with just a text description: https://www.google.com/fusiontables/DataSource?docid=19fmls00Ab-remGe5-80zFbQEws47wyK1DzQd0io
- The red dots are cities with nice maps: https://www.google.com/fusiontables/DataSource?docid=195lWSBIoJmn4L2Q2wq9iRAA1wvQioRD9-CAfN0k
You can simply view the source code of http://www.nature.org/all-hands-on-earth/water to see how it was accomplished, but I also have some simpler examples to help you get started if you want to replicate this approach:
- http://maps.tnc.org/wheredoesyourwatercomefrom/google_esri_example.html (uses an Esri base map, Google fusion tables data, and has a few extra features like limiting the zoom level and displaying the Esri logo) and
- http://maps.tnc.org/wheredoesyourwatercomefrom/google_esri_simplest.html (uses a Google base map w/ fusion tables and a single Esri map service).