UX

I love Google maps and, if it’s possible, even more so since V3. It’s just so easy to use and play with and of course, as long as the map images used are in the public domain, the whole thing is free. Even if you did need to restrict the images for some reason the business license is still only $50 a month, which is a bargain.

map

During one of my projects at Rufus I took advantage of the serendipitous illness of one of my UI developers, which meant I got to snag a slightly more advanced developer for the period of two weeks. The project was running as a MVP and as an initial map solution we were going to use a simplistic jvectormap. Now, there’s nothing wrong with jvectormap if you want simple, quick and dirty, but it ain’t no Google Map either. Between myself and the developer we managed to bring in a much richer map experience within the same time budget (even if I did have to work a few late nights)

Previously we had specified using a simple SVG mapping solution for the client using a JSON feed, but the solution was weak and I knew we would have to replace it later once we had produced the MVP version of their site. The opportunity, which I discussed with the client, was to use my skills and the developer to place a V3 map on the site with clustering and a branded design to the map to fit in with their corporate identity. Of course the client jumped at the chance of better technology for no extra cost and we went to work.

Google maps customiser

the link above takes you to a V3 customisation page where just about everything can be branded and selected as on or off. It does need playing with and it is quite difficult to maintain state, but it works. For the solution I wanted to have three different map interface changes depending on zoom. The clustering option would be linked to this by using CSS amends to an overlay. Zoom low (way out there) with just countries, zoom medium with towns and then at street level a whole new experience with full details and the option to do a street view.

After building a prototype with an approved by client design look and feel, we managed to get the solution in place in about 7 days and linked up to the Sitecore back end, which exported the JSON feed, in another couple of days.

http://www.appsavvy.net/rufus/newmap/  

is a simpler version of the map which I knocked up to enable the clients to grab screen shots of the branded map and also to help them find their properties on the map in order to manage the data entry on the back end. So a bit of lat/lng doodaahs, a draggable marker, the zoom differentials to design and a reverse lookup on postcode to retrieve lat/lng and place the sample marker.

We ended up using the same base map code to handle 5 different requirements from the map sections including bespoke popups, different types of markers with different effects, filtering of markers (Angular.js)

The documentation for Google maps v3 is very good and loaded with examples.

If you look at the footer at the bottom of this site you can see a small V3 example I knocked up to show off the essentials, we have:

  • Custom marker – I used an animated gif just to show it off
  • Custom infowindow – this is customised HTML as well as inline css class amends on the map, click on the egg to open it.
  • Custom control – I could have made a custom control inline, but I prefer to use HTML elements placed on top. Clicking the picture of me switches the map style to satellite then does a location switch on the map by zooming out to the max preset, panning to the new location, zooming in again and then switching back to b&w whilst at the same time switching the control image to a squirrel. Fun.
  • Custom map styles: Options are for the satellite map and a custom b&w style
  • Moving the controls about: You can place zoom, street, scale etc in special places
  • Geocode – the initial centre is the result of a Geo-coded latlng from an address
  • Event based logic – Instead of closing the open info window using the close X, just cloick on the map screen and the IW will close and the map will re-centre.

…. what more can you say, anything is possible. If you want the code, then just go grab it form the browser debug bar.