Have you ever used Google Maps to find the closest branch of your bank? Search for restaurants nearby? Get driving or walking directions? Find the best public transit route? Unless you’re reading this because you got it in a spam fax, it’s likely that you have. And, like you, most of your site’s users are at least familiar with the Google Maps interface and have used it for both productive and non-productive means.
It’s intuitive, easy-to-use, and very powerful from a developer’s standpoint as well. Google has gone to great lengths to ensure that developers can leverage the power of their Maps application and use as much or as little of it as they would like. They have provided very detailed API documentation, examples, and a community for developers to help coders use Google Maps.
I have been working with Google Maps and its APIs for several years, and had slightly taken that fact for granted. Recently, discussions with other developers showed me that many haven’t had the chance. They’ve either never had the opportunity, or the need to work with Google Maps, or have just done so in a very basic way. So, I’d like to take this opportunity to highlight some of the easier-to-implement features in Google Maps.
This isn’t a tutorial, as there are plenty of fine tutorials out there, but rather a small showcase of Maps and how to easily create a rich and interactive custom map for your web application.
Custom Map Markers
One of the best ways to make your map stand out from all of the others is to include some personal touches, such as using your company logo for a map marker.
The hardest part is creating an image to use. The image needs to be small enough to not obscure too much map, but not so small that it is hard to see. For reference, Google’s standard marker size is 24×37 pixels. Creating an image “shadow” will give it the 3D look that Google has for its markers. Adding these to your map is quick and easy once the images are complete. Each marker is created independently for the map, allowing every marker to have its own unique look, if desired.
Now you’ll want some coordinates to tell the map where to place your triumphant masterpiece. For that, we turn to Google’s Geocoding Services after capturing some information about the location. Google takes anything from a country name to a fully qualified street address. The results that you get back will be an array of location data. There is a wealth of data returned by this service, but for most applications, you’ll only care about the location coordinates which can be added as a property of a marker, telling it where it belongs on the map.
You can also use Geocoding to reverse the search and lookup an address by providing the coordinates.
Note: I am taking the first result in this example. Depending on your need, you may want to loop through all the results.
Google provides a way to include a static map image too. The call is very simple and returns an image you can either save or display directly in an <img> tag.
Personalized User Location
Perhaps you want to locate your user and display their location. This can be useful for a site or application targeted primarily at mobile users. A desktop or laptop user will not typically have GPS available, so the location services will use WiFi location or their IP Address instead.
Personally, I have found that only Google’s Chrome browser will consistently give this information. I’ve found that Firefox has been hit or miss and Internet Explorer versions 8 and lower don’t support the location services at all.
To enable this, two small functions and an “if” statement are needed. The condition in the “if” statement will test if the browser is able to provide location or not. Be prepared for not always having the user’s location when you’re adding code for user location.
To tie this all together, let’s use Google’s Directions Service to provide turn-by-turn directions for your users. We may just be replicating the more basic features of getting directions directly from maps.google.com, but by doing so, we keep the users on your site longer — which is typically the goal of having them there in the first place.
The service is pretty easy-to-use. I’ve personally found that it is best to provide Google with coordinates if you can, rather than forcing the directions service to perform the Geolocation. If you want to display the turn-by-turn text, then just add an element on your page to display it:
The Google Distance Matrix is another great tool you may want to take advantage of. It allows you to look at different start or end points to determine which location is closest by distance or travel time. Sometimes, you just want to know straight-line distance between two known points. And for that we don’t need Google, just the latitude and longitude of the two places being compared.
This formula has come in extremely handy when I have had a site that has many known locations (such as company warehouses) that we have geocoded and stored coordinates in a database. In these situations, there are rarely small differences in straight line distance vs. travel time, meaning that no two locations are so close that one may be 5 miles closer, but take 5 minutes longer to travel to. Because of this, we can save on web calls to Google services and just figure out which known end point is closest to the starting point given to us.
Check it out:
Google allows a wide array of customization and control in for how their map-related services are used, how information is returned, and with the look and feel. I think we’ve covered what most users will want to do with their maps for basic functionality, but keep in mind that there is a great deal more:
You can designate “zones” on a map, highlight them with shading and borders, limit your maps to not pan out of a certain area, only search within a defined area, and display directions for walking or public transit. There are event listeners you can create, allowing the map or its objects to change based on user interaction, location, zoom level, or whatever you can imagine.
And, if you really wanted to take the time to replace all map tiles outside of your country, state, or county with images of David Hasselhoff attempting to eat a hamburger, you can. (Please don’t though.)
— by Scott Peters, firstname.lastname@example.org