For those of you in countries that celebrate it, Happy Valentine's Day! Just in case some of you haven't found that perfect geeky V-Day card to send your loved one, friends, stalkee, etc., I've put together a quick example using GPolyline to write messages on to the map (and share them!). Try it out below by positioning the map, entering a short message, and pressing "Etch it!" The end result is your message "scratched" onto the map as if you'd scratched into tree bark.
Of course, I'm not actually scratching the earth or touching the satellite imagery at all. This is simply an example of a fun way to use the GPolyline class, commonly used to draw bicycle or driving routes. Here's how it works:
- Positioning the map: This uses the GClientGeocoder and is based off this example. When the user enters an address and presses the button, I use the geocoder.getLatLng() method to find the corresponding latitude and longitude for the address. No geocoder is perfect, so I alert an error message if it can't find the address.
- Writing the message: Here's the fun part!
- I've pre-defined each letter/symbol as an array of pairs of points defined on a 1*1 grid. The image here shows the 6 lines that define the heart ("<3"). The corresponding javascript for the heart is:
"<3": { "lines": [
[[0,.25],[.25,0]],
[[.25,0],[.5,.25]],
[[.75,0],[.5,.25]],
[[1,.25],[.75,0]],
[[1,.25],[.5,1]],
[[.5,1],[0,.25]]
]} - I parse the user input from the text box into each character, looking particularly for the 2-character long heart string.
- I define a constant X & Y size to scale the points by. If the message inputted is particularly long, we redefine the constant to fit the message to the map.
- For each letter/symbol, I iterate through the points and create a set of scaled points. For a scratchier effect, I connect the second point to a point slightly offset from the first point.
- With each set of scaled points, I create and add two GPolyline objects to the map with different style attributes. The first is a thick & white, and the second is thin & dark. This helps the letters stand out.
- I've pre-defined each letter/symbol as an array of pairs of points defined on a 1*1 grid. The image here shows the 6 lines that define the heart ("<3"). The corresponding javascript for the heart is:
- Permalink to this Map: This creates a URL with parameters attached to the end, e.g. gpolyletters.htm?message=HI&lat=40.267&lng=180.456
- There are no native javascript functions specifically for parsing URL parameters, but many javascript users have created utility functions to help do this. I'm using a function called getURLParam() that relies on regular expressions.
- Certain characters, like the "<3", will be URL-encoded. To get back the original string, I call unescape(String).
- Since I need to pass the latitude, longitude, and zoom parameters as floats and integers and my URL parsing function always returns strings, I use parseFloat(String) and parseInt(String).
- If no parameters are specified in the URL, I use the default values.
If you thought that was fun, here are a few examples of other sites that use GMaps to let you send creative Valentine's Day greetings:
GeoGreeting - Spell your message with letter-shaped buildings!
MapMsg - Send your message as a smoke signal!
As always, if you're inspired to create a GMaps mashup and need help from the global community of developers, please stop by the Google Maps API Group.
