Not the New Google Maps

Because of the design changes in the new Google Maps, v4 of the Maps API must be in the pipeline. I expect however that the release is some way off.

Inspired by the new index card effect in Google Maps I decided to have a little Sunday hack to see if I could create something similar. Here's the result, Not the New Google Maps.

First off to add the new look map base layer it is a simple process to add

google.maps.visualRefresh

to the javascript for the map.

Initially I decided to replace information windows with a slide-down index card. It was simple enough to create a div element for the index card and use jQuery to create a slide-down and slide-up effect for the card. Then it was just a matter of using

document.getElementById('divName').innerHTML

and a call to open the card index, inside the marker's event listener.

After achieving that however I decided to remove the example marker from the finished map.

One of the really impressive new features in the new Google Maps is the reverse geo-coding that happens when you click on the map. When the user clicks on a location on the map a card opens showing the location's address and a small thumbnail of the Street View available.

So I decided to use my index card design to achieve something similar. When you click on the map I geo-code the location and add a little static Street View to the slide-down index card. If I get the time it should be a simple enough process to add a function so that when the user clicks on the static Street View the map is replaced with the full interactive Street View.