One Week of Google Maps – Part 7

This is the final part of a week long series featuring code for the Google Maps API.

For the last day of this series (don’t worry, this isn’t the end of me having fun with Google Maps – there’s still much more to come!) I decided to implement two things.

The first new feature is a sane version of the afformentioned Mouse Wheel Zooming. This version is completely streamlined, tied straight into the GEvent API, and isn’t limited to only zooming.

Moving the mouse wheel code over to the GEvent API was rather simple – what was more complex was attempting to fix a rather serious (in my opinion) usability issue with the mouse wheel zooming. My first intuition, when using the wheel-zooming, was to position my mouse cursor over where I wanted to zoom to then flick the mouse wheel up. However, moving the mouse wheel up causes the map to zoom in into the current map position – completely ignoring the position of the mouse. I’ve added the code to correctly capture the current lat/long of the cursor and pass it into the GEvent.

However, one issue still arises: Zooming in to the point you had your mouse over re-positions that point to the center of the screen – not where your mouse is. This means that you then have to move your mouse back to the center of the screen to continue zooming in. To fix this, I’ve written a method that can be used to properly scale the points to where they should be – this will even help the ‘click zoom‘ code that I developed earlier this week. You can see this for yourself in this demo. In that demo I use the following code to capture the mouse wheel movements and zoom in correctly:

GEvent.addListener( map, "wheelup", function(p){
  if ( map.getZoomLevel() > 0 ) {
    map.centerAndZoom(
      p.scaleRelative( map.getCenterLatLng() ),
      map.getZoomLevel() - 1
    );
  }
});

GEvent.addListener( map, "wheeldown", function(p){
  if ( map.getZoomLevel() <= 16 )
    map.centerAndZoom(
      p.scaleRelative( map.getCenterLatLng(), -1 ),
      map.getZoomLevel() + 1
    );
});

The next feature is purely fun: Map in Map Support. Similar, in concept, to having ‘Window in Window’ on a TV screen, this displays a small, zoomed out, map in the corner of your main map.

Really, a demo would probably best illustrate this concept.

This was a test, for me, to see how easy/hard it would be to 1) Embed HTML on top of a map and 2) Put a Map in that HTML. The answer to both is: Easy and Very Easy. It took a little bit of poking around in the API to try and figure out how to get the HTML onto the map (looking at the code for similar functions, such as GSmallMapControls, helped a lot) – but once that was solved, adding a Map on top was as easy as ‘new GMap()’.

eJohn.org RSS Readers

06/01 153 to 08/19 305

Now, a question to my readers (and if my recent analysis is correct, there’s over 300 of you): Did you enjoy this week long feature – looking at Google Maps? If you did/didn’t what specifically did you like/not care for? Any input would be greatly appreciated! Thanks in advance – I’m looking forward to do this again, very soon!

Posted: August 19th, 2005

Subscribe for email updates

28 Comments (Show Comments)


Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Subscribe for email updates

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.