Tag Archives: Google Maps API

Map of the Week: Hill Mapper San Francisco

Map of the Week: Hill Mapper San Francisco
Hill Mapper San Francisco uses the Elevation API to show how steep streets are in San Francisco.


Streets that go uphill, relative to the current location of the marker, are red, and downhill streets are blue. The opacity of the color represents how steep the hill is.
If you drag around the marker, the Polylines change color, as the marker’s elevation changes the relative elevation of the streets.


It’s particularly powerful if you view it with satellite imagery.
If you want to search for a particular location, the search box uses Places Autocomplete to help you find it.
All around, this is a nice, innovative use of our APIs to show off useful information.

Posted by Mano Marks, Maps Developer Relations Team

Map of the Week: Monarch Butterfly Migration Explorer

Why we like it: This is a classic mashup style map, using the Google Maps JavaScript API with the Flickr API to create HeatmapLayers of photos tagged as Monarch Butterflies.


You can see in the 2012 migration season there were many pictures taken of the Monarchs all over and many of them made it up to Canada. And in 2013 that number dropped off considerably, possibly due to the increased use of pesticides.



The map defaults to a satellite map type, but if you click on “Map” it changes to our roadmap map type. You can see the map uses the Google Maps visual refresh.


We really like how this map uses these two APIs to discover and display trends that neither of the APIs were designed to do. We also like the great use of Google Maps for data visualization, and hope we see more from this developer.

Posted by Mano Marks, Maps Developer Relations Team

Map of the Week: Portsmouth History Photo Map


Why we like it: The Portsmouth History Photo Map is a great demonstration of combining old maps and photos with Google Maps.
You start by viewing the 1896 map of Portsmouth on top of a Google Map. The old map is overlayed on top of the Google Map using an ImageMapType.

You can choose to look at standard Google Maps base map by clicking on Modern map, which reverts you to the road map.

The featured markers, such as this one for Charles Dickens, are created using a standard Marker with a custom icon and size.
Instead of the standard InfoWindow, the developer created a Custom Overlay that allows for a more dynamic experience, allowing for a gallery of photos to be displayed in the overlay.

Finally, to control what’s showing on the map, the developer created a custom div that sits on top of the map and controls it with onclick events.



All in all a great custom implementation of our API.

Posted by Mano Marks, Maps Developer Relations Team