PrintBefore we build our own Google Maps pages, we'll begin by taking a look at how Google's own mapping site works. Even if you've used this site before, you are likely to learn something from this section.
Please open a browser window to Google Maps so that you can follow along with the discussion below.
Navigating the map
The user can pan the map to see what's just off the screen by clicking and dragging in the desired direction.
The user has multiple options for zooming in on the map, including double-clicking on the map in the area of interest, clicking on the plus sign in the lower right of the map (or minus sign to zoom out), or using the scroll wheel on the mouse (if available).
Also in the lower right corner of the map is a scale bar; clicking on it toggles between English and metric units.
In the lower left corner of the map is an icon that allows the user to switch between two primary map types: Map and Earth. The Map view displays a conventional reference map of political boundaries, place names, roads, railroads, water features, and landmarks. The Earth view displays satellite imagery or aerial photography, depending on the zoom level, with higher resolution data often available for major cities.
When in Earth view, a couple of additional controls appear above the zoom controls. The first enables rotating the view 90o, 180o or 270o. The red arrow will point north. The second control allows for applying two levels of tilt.
If you are a regular Google Maps user, you are probably aware that the search box at the top of the page can be used to locate places using full street addresses, just a city and state name, or even just a city name or zip code. However, it is also possible to locate places using airport codes (e.g., "LAX" for Los Angeles International) or latitude/longitude pairs (e.g., 40.8, -77.86 for Penn State's University Park campus). In addition, driving directions can be generated by separating any set of locations by the word "to" (e.g., "phl to state college, pa" to get directions from Philadelphia International Airport to State College). Businesses in close proximity to a location can be found by using the word "near" (e.g., "pizza near state college, pa") or by simply searching for a business type (e.g., "restaurants") when already zoomed in to the area of interest.
A collapsible control beneath the search box provides access to other background layer/overlay options. These include:
- Traffic - an overlay available in major cities that color codes highways based on the amount of congestion: red for heavy traffic, yellow for slow traffic, and green for normal-speed traffic
- Bicycling - routes originally obtained from the Rails-to-Trails Conservancy and augmented with user contributions
- Terrain - a layer that depicts the area using shaded relief
One last viewing option that warrants a mention is the Street View layer, which enables the user to view 360-degree panoramic photos taken at street level. Switching to Street View can be done by clicking on the "orange man" icon in the lower right and dropping him onto any blue line on the map. If the man icon is colored gray, then Street View is not available anywhere in the viewport.
Most of the site features discussed above are also available to third-party Google Maps developers. They can be arranged differently and unwanted controls can be left off the interface altogether. We'll come back to this later.
Inside Google Maps URLs
After searching for a location/business or generating driving directions, you can copy the URL in the browser's address bar to save it for later use, for example, to e-mail it to a friend. If you examine this URL closely, it has a number of parameters that will vary depending on the map type. Here is a simple Google map of State College [https://www.google.com/maps/place/State+College,+PA/@40.7880144,-77.8525714,14z/data=!3m1!4b1!4m2!3m1!1s0x89cea899c13bdb73:0x9ce1c6c2833c8091].
Looking closely at this URL, here are some points to note:
- the spaces in "State College, PA" are replaced by + signs since spaces in URLs can create problems,
- the word "place" will be replaced by "search" or "directions" depending on the entry made in the search box (e.g., "coffee shops" or "philadelphia to harrisburg"),
- after the search term (in this case "State+College,+PA") comes the latitude/longitude at which the map should be centered (preceded by the @ symbol),
- after the map's center comes the zoom level ranging from 3z to 21z.
The URL often ends with a data parameter set to a long character string. Google has not made public how this string is constructed, though some bloggers have published some observations. It's a bit complicated, so I'll just point you toward the blog posts if you're interested in learning more:
New Google Maps URLs - Introduction from Sticklesville
Stop Worrying About the New Google Maps; These URL Parameters Are Gold
Knowledge of constructing URLs that can be parsed by the Google Maps servers has a lot of potential value. For example, if you had an Excel spreadsheet of addresses, you could generate a list of links that would open up a Google Map of each address. Excel's SUBSTITUTE function could be used to replace spaces in the addresses with + signs and the CONCATENATE function could be used to merge the address with the other required parts of the URL.
Now that you've gotten a brief tour of Google Maps, let's dive into creating your own custom mashup using the Google Maps API.