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.
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.
This takes care of setting the flag so that we know which map is being touched and we can use if statements on other listeners to make sure we don’t keep readjusting the location on all maps infinitely. I really like the idle event, which works with roadmap and 45 degree tilt map, because it only fires when the map has finished moving (no need for a JavaScript throttle function). Street view, however, does not respond to idle and needs to be tracked using the pano_changed event.
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.
External:
Google Maps API Examples
Google Maps and Flickr APIs
Exploring Google Maps on GitHub
Google Maps Engine Lite
