Fall Recap

October 18th, 2005

I could give a thousand excuses, but I'm not entirely sure if they'd mean anything. September and October have been an incredibly busy time for me, school, moving, sickness, work - it's just piled on top of each other. Although, this doesn't mean that I've been slacking - I just haven't had time to make blog posts. Amusingly, according to my stats, there are now over 900 of you reading this weblog via RSS - which is pretty slick.

Here's a quick recap of some of the things that happened these past two months:

Today I won the Quirksmode addEvent re-coding contest. This particular contest was to write an implementation of addEvent and removeEvent that was completely cross-browser and usable. I like my submission, simply due to its brevity, and so did the judges.

Some of my past research, into Instant Messaging, was mentioned in the RIT Reporter (my school newspaper). It's kind of light and 'fluffy', but a good starter piece. If you're interested in this sort of thing, contact me, or check out the project page.

I was mentioned, in passing, in The Economist, concerning the recent trend in mash-up applications, specificially concerning the Yahoo Traffic RSS feed. I think the article is no longer accessible - but may be if you get a login.

Finally, one of my Google Maps projects went live - it was for a newspaper in Florida, the Herald Tribune, concerning the Save Our Homes initiative. My particular application allowed users to browse through their homes and see how their tax rates compared to their neighbors. From everything that I've heard, it's been quite successful. It makes me happy to bring cool technology (Google Maps) to people who wouldn't have used/seen it otherwise.

I'm going to be releasing a full-blown product within the next week, or so - it's very simple, but exciting, nonetheless. I hope people will get a kick out of it.

Tags: maps, google, news, im, javascript, rss, magazine

Comment on 'Fall Recap'

One Week of Google Maps - Part 7

August 19th, 2005

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:

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!

Tags: maps, javascript, google, programming, api

28 Comments on 'One Week of Google Maps - Part 7'

One Week of Google Maps - Part 6

August 18th, 2005

This is Part 6 of a week long series featuring code for the Google Maps API.

The theme for today is Animation (per the request of Ralph). For programmers who want to make a walkthrough of their town, or a tutorial - play-by-play animation is an important feature to have - and one that is missing from the default API.

I've added the functionality to the API such that you can animate the user's map view based upon:

• An array of points.
• An array of markers.
• An array of markers and points.
• A Polyline.

In addition to this, if you wish to use markers in your animation - and if you've bound a function to the "click" event of the marker - then that click will be triggered, displaying an info window (for example).

Using all of these features together, in tandem, you can create a pretty convincing slideshow. To see a demo of the animation at work, click here.

To interface with this, here is the function that you need to call:

points - is a GPolyline or an Array of GMarkers and/or GPoints.
closeFunction (optional) - this function will be called whenever the animation has been completed.
pointWait - this is the amount of time to wait at a point (or a marker without a 'click' event). The default is 3000 milliseconds.
markerWait - if you've bound a function to the click event of a marker then this is how long you wish to wait (for example, if you want to give a user time to read an Info Window). The default is 6000 milliseconds.

To use the above code, simply include this file in the header of your code - after you've included your Google Map API file - and you should be ready to go! Happy animating!

Tags: maps, javascript, google, programming, api

5 Comments on 'One Week of Google Maps - Part 6'

One Week of Google Maps - Part 5

August 17th, 2005

This is Part 5 of a week long series featuring code for the Google Maps API.

After loading address latitude/longitude information, the next most desired feature for a Google Maps developer is the ability, for the end-user, to link to a particular map that they're viewing. I've taken this concept one step further:

• A link, to the current view of the map, can be provided to the user. Additionally, the link can be automatically updated everytime the user moves the map or zooms in/out.
• The last view that a user was looking at, on your map, is automatically loaded the next time they visit your site.
• A new info window is available which, when revealed, provides the user with a way to link to that specific marker's coordinates.

These features, once combined, add a lot of much-needed usability to the API. Using this code is fairly foolproof too. Below is a chunk of code taken from the demo, demonstrating all the important features of this addition to the API.

To view a demo of these features, please click here.

The Javascript file can be downloaded here

Tags: maps, javascript, google, programming, api

68 Comments on 'One Week of Google Maps - Part 5'

One Week of Google Maps - Part 4

August 15th, 2005

This is Part 4 of a week long series featuring code for the Google Maps API.

An incredibly common function, for most Google Maps applications, is the ability to 'add a new point' to the map. I've seen a lot of implementations where they force you to line up a crosshair to where your point will go - or even worse: Make you enter a latitude/longitude for the point.

In my opinion, the easiest way to add free-form points is to add some sort of 'click to add a point' functionality. For example, using the double-click capturing code that I wrote yesterday, a new point could be added wherever the user double clicks.

The second part of this operation is to collect information from the user, to be added to this particular point. The Google Maps API provides the very nice Info Window funcionality so why not display the data entry form right in one of those?

I've set up a demo to demonstrate the above, here.

From my demo, there arrise a couple points to ponder:

• In my demo, I create a new marker where the user has double-clicked - if a user cancels adding a new point (by exiting out of the info window) then I remove the point that was created - you should be sure to do the same.
• Google Maps are embedded directly in your web page - there are no IFrames - this means that if you write some CSS to render a form that you've written, it will take effect in the Info Windows that you display - this is very handy!
• The handling of CSS floats in the GMap info windows is very poor, to say the least. The best way to work around them is to provide a wrapper, for example:
  
  <div style="width:400px;height:200px;">Your normal Info Window content...</div>
• This brings up another point - if you have an info window that is particularly large, it is trivial to be able to add scrollbars to the content, observe:
  
  <div style="width:400px;height:200px;overflow:auto;"> ... </div>

The more I use the Google Maps API, the more I realize that Google is really giving the developer a lot of power to be able to make these Maps behave in a way that they want - I highly recommend reading through the raw javascript files sometime - they're very informative, and full of new un-documented features.

Tags: google, programming, api, javascript, maps

Comment on 'One Week of Google Maps - Part 4'

One Week of Google Maps - Part 3

August 15th, 2005

This is Part 3 of a week long series featuring code for the Google Maps API.

When I was planning tonight's post I was having all sorts of fun looking at optomizing the addOverlay function. This function, when used again and again with hundreds of points slows things down very quickly. The code, which is all the rage on the Google Maps API mailing list, can be found at the above page (copied below for completeness):

One problem, though - this feature is no longer going to be needed in the new version of the API. Which is a very good thing. So, that killed my original article for tonight. However, a new topic just so happened to fall in my lap: Advanced Mouse Control.

The one hack that I really like, that was posted to the Google Maps API mailing list, was the ability to zoom in using your middle scroll wheel. It feels incredibly natural and is a lot of fun to play with - you can view a demo here.

After doing some more digging around I realized that no one has built any sort of good, natural, support for the following mouse actions: Double Clicking, Right Clicking, and Middle Clicking. So, I went about to do just that. I waded through the API code for a while and finally acheived a result that I like. All of the events can be used with absolutely no extra code, observe:

As you can see, the events behave exactly as a 'click' event would - except no overlay information is passed in the arguments. The only argument passed along is the current lat/long of where the click was made - from which a lot can be done.

One functional change that I made was to disable the 'pan' animation that occurs when you normally double-click. If you attach any listener to "dblclick" then that 'pan' will no longer fire - which is a smart move, in my opinion.

To make the above code work, all you have to do is include this file in your header, just after you include the Google Maps API, like this:

And that's it - you'll be ready to go from there! If you're interested in viewing a very quick demo, using the above code, click here.

Tags: programming, api, javascript, google, maps

7 Comments on 'One Week of Google Maps - Part 3'

One Week of Google Maps - Part 2

August 13th, 2005

This is Part 2 of a week long series featuring code for the Google Maps API.

Auto-Scaling Maps A smart feature, for those displaying markers on a Google Map, is to make sure that all points that you're rendering are being displayed. There are a couple tactics that can be used to acheive this: 1) Keep the map zoomed out far enough such that all the points will be viewable (if you know where all the points are going to be, roughly) OR 2) Auto-zoom the map in to snugly fit all the markers.

#2 is the smartest technique, but it's not offered by the Google Maps API. However, in the course of writing a Google Maps hack for the guys at EVDO Coverage I developed a smart algorithm to do so. In a nutshell: You pass this function the map object and an array of points that you want to be shown. The map will automatically be re-centered and zoomed in to the optimal viewing position (the closest you can get without hiding any points).

I've set up a demo to run here.

On the demo page, there is a simple button that, once clicked, will display 10 randomly-chosen points and apply the Auto-Scaling function to them. The Auto-Scaling code can be downloaded here. The code simply provides a function which takes a map object and an array of points (as demonstrated in the above demo). Feel free to make good use of this code!

Tags: javascript, api, programming, google, maps

12 Comments on 'One Week of Google Maps - Part 2'

One Week of Google Maps - Part 1

August 12th, 2005

Starting today - and going until next week - I will be writing a post, everyday, detailing a chunk of Google Maps API-enhancing code that I've written. During the past couple weeks I've been working a number of contract jobs - all of which have centered around the usage of the Google Maps API, a powerful tool for programmers. As I've gone along, there have been a number of features that I've developed (or found) that I think other programmers would benefit from knowing. Today is going to be a double-whamy.

First: Geocoding addresses for Google Maps. This is probably the first thing that people ask for when using the API. Thankfully there are plenty of free services available that can be harnessed to make Geocoding a reality. I wrote a chunk of Javascript (with an associated Perl script) a little while ago that acheives this goal. Unfortunately, some people still seem to have trouble finding it - so it deserves another link to. Feel free to read [link] the full release for more information.

You can view a demo of this modification here.

Second: Click Zoom This enhancement is so simple - I love it. In a nutshell: You can now click anywhere on a map to zoom in. Thankfully, you can still grab-drag the map around without being effected. After having implemented it in one particular application, I've become addicted to it - it's so handy! I use it by simply clicking the name of a city (or location) that I want to jump to. It's so much easier then re-centering and clicking the 'Zoom' button every step of the way. The code is short, so feel free to give it a try:

I have the code set to zoom in two levels every time you click, but this can be tweaked to be less aggressive. At some point, I think it would be neat to add 'Right Click Zooms Out' functionality - unless, of course, someone beats me too it.

You can view a demo of this modification here.

Tags: javascript, api, programming, google, maps

20 Comments on 'One Week of Google Maps - Part 1'