Customizing a Google Map has always been a challenge from a development standpoint. So whether you’re placing custom markers for your office locations or mapping a route away from an incoming assault of Marching Robots, GMaps.js will make your life a lot easier.
As a Designer, I’m always trying to come up with new ways to frustrate the Developers I work with. Ok, that’s a joke, but I do like to push the limits of what we’re capable of. One way to do this is designing custom skins and other graphics for some of the web tools we use.
Customizing a Google Map is a great way to make a Contact Page client/brand specific. And while this is pretty straight-forward from a Designer’s perspective (I can show whatever I want in a design!), my Developer comrades tell me it’s a bit of a challenge from their side of the fence. Wading through clunky code makes adding a few simple graphics or changing element colors a hassle.
GMaps.js, a jQuery plug-in with lots of features, makes this a LOT easier.
For instance, when Giant Killer Robots invade and seek to destroy us – because they will (I’ve seen the report, Robopocalypse by Daniel H. Wilson) – you might want to be prepared and map their progress as they march towards your office. After all, you don’t want clients getting stomped or vaporized on their way to a meeting.
The first step in surviving the imminent invasion is adding a map of your location. You can do this using GMaps.js by specifying the latitude and longitude in your map div. In the case of our Anti-Robot-Resistance-Headquarters, located conveniently at the SilverTech home offices, the code would look something like this*:
——————————————————–
new GMaps({ div: '#RobotInvasionMap', lat: 42.996263, lng: -71.454414 }); ——————————————————–
Next, you definitely want to add markers identifying where the Robots are (you should probably enlist an intern familiar with CSS to look out the window from time to time and update the markers on your map so the locations are current. If not, that spur-of-the-moment trip to the 7-11 across from HQ might be ended suddenly and painfully). Adding a marker with GMaps is simple using this code* †:
——————————————————–
map.addMarker({ lat: 42.996258, lng: -71.454923, }); ——————————————————–
Map using custom markers to locate the Anti-Robot-Resistance-Headquarters (A-A-R-R-HQ) and Robot Attack Forces
Finally, after you defeat the Robot menace, you’ll more than likely need to quarantine the “Hot Zone” for a while. You can easily add a polygon and set its line and fill colors using code like this*:
——————————————————–
var path = [[latitude1,longitude1], [latitude2,longitude2], [latitude3,longitude3], [latitude4,longitude4]];
polygon = map.drawPolygon({ paths: path, // pre-defined polygon shape strokeColor: '#0A1318', strokeOpacity: 1, strokeWeight: 2, fillColor: '#DB0305', fillOpacity: 0.6 }); ——————————————————–
Map using a customized polygon to locate the post-invasion Hot-Zone
This is only scratching the surface. Keep in mind that although GMaps.js is not documented in detail, there are some other pretty cool examples here: http://hpneo.github.com/gmaps/
Be well … and aim for the legs!
*Obviously you will want to add your own latitude and longitude coordinates to map the Kill Bots in relation to your actual location.
†To learn more about using custom markers or icons on your Google Map, go here:
https://developers.google.com/maps/documentation/javascript/overlays#Icons
It should also be said that all coordinates shown in this article are for example purposes only, and do not represent the locations of actual invading Robots.
And if you’re looking for a song to usher in the Robopocalypse, I will shamelessly plug a song I wrote and offer it to you for free download here: http://farfromclose.com/robots.
More importantly, if you’re planning a marketing strategy, website or robot invasion of your own that calls for creative and technological expertise for success, contact us!
| Share This: | 
|
An interesting piece. While i’m not as much concerned about an assault of marching robots I could see this coming in handy for a zombie apocalypse. All jokes aside though i’d love to see this in the application of an actual site. Do you have any examples? I really like the idea.
Riley.. I agree.. I was thinking the same thing about the Zombie Apocalypse.. maybe this can be used when they turn downtown Detroit into the Zombie Theme park.