Exploring Locations with Google Maps
With the recent launch of the new Google Maps and my love for maps, I want to dedicate a post and create something with the version 3 of the Google Maps API. Street View is capturing more and more interesting locations around the world and it’s great that Google is constantly enhancing this feature. On top of this, other people are innovating and making things like Google Street Viewer and Hyperlapse which combine Google Street View and WebGL to make some awesome effects. The Google Maps API also supports 45° imagery for certain locations, which is another interesting map type. So, today, I will combine all these map views and create a Google Maps demo that explores geo locations with three different map types: roadmap, streetview, and tilt.
Multiple Google Maps
It’s true that you can get all these map types with a normal Google map, but you are limited to one view at a time. You have to switch the map to see a different perspective and I think there is some value in seeing 3 map types together on one page, all connected and changing as you move any of the maps. The demo also has HTML5 geolocation functions and CSS media queries and styles to support various screen sizes. To connect all 3 maps together, I am using a flag that changes on interaction with each map, sending new center position to an update function that re-adjusts all the maps to the current geo location. Street view works a bit differently from the other map types so I had to listed on a click event on SVG elements to set the flag appropriately. The other maps listen to dragend events which fire when you interact with the map using a mouse or a touch screen device.
I opened this demo in my home computer and saw my house from a street view, my house and neighborhood from above, and the standard road map perspective. I think this is pretty neat, check it out here and interact with the maps to see how they are all connected.
Google Maps API Examples
Google Maps and Flickr APIs
Exploring Google Maps on GitHub
Google Maps Engine Lite