Web 2.0 Design Best Practices | Google Maps Various Implementation Ideas

Back to Bhopu ArchivePosted On Feb 13, 2008
Google Maps Various Implementation Ideas
in Web 2.0

Have you ever imagined how your house, office building, school, playground and neighbourhood appear to the little birdie in the sky? Try visualizing it. Don’t worry if you can’t……visit Google maps!!! Google maps (henceforth Gmaps) makes it possible to have a “bird’s eye view” of our own earth and its neighbours in space- moon & mars. Before I fly to further features of Google maps, here’s Lord’s Cricket Ground as seen on Google maps.

Lord's Cricket Ground as seen from Google Maps

So, what is Google Maps?

To put simply, Gmaps is a free web-mapping service [Web mapping is the process of designing, implementing, generating and delivering maps on the web].

It is an interactive web application that possesses high resolution imagery of the world allowing maps to be viewed online, zooming in and out of a place, panning [animating the map] to other places, searching, geocoding, providing real time traffic information, driving directions etc……

Gmaps features following modes of view that can be chosen from Map Type control Map Types

The Map view consists of topographical images and Times Square-Map View displays the continents, countries, cities etc down to the street level, labeling the roads and crossroads. As the name suggests,Satellite view makes use of images taken from satellite together with aerial images.

Times Square- Hybrid View Hybrid view is a combination of the Map View superimposed upon Satellite View.

Terrain view renders

what we see as physical (features) map in atlases, with street view having natural and man-made structures stand out (see right). Only physical map is rendered for places where structures can not be displayed in high relief (see below).

To the upper-left is the Zoom Control. The small window to the bottom-right of above map is an Overview Control that allows quick navigation. These controls appear at their default positions in the above map and can be repositioned when embedding maps into websites. To add content to the map, Overlays are user. For ex. the green arrow in our Times Square example is an Overlay. Gmap provides the following overlays:

Points are displayed using Markers.

Lines are displayed using Polylines (representing a collection of points).

Areas on the map are displayed as polygons.

Another overlay- the info window is a special kind of overlay that can contain descriptive text/HTML about other overlays.

Gmaps can be included in websites by registering for an API key.

GOOGLE MAPS API

It’s an Application Programming Interface provided by Google that exposes objects and methods that allows developers to embed Gmaps in websites programmatically. One needs to register for an API key using his/her Gmail account. The service is free for websites that are free for consumers. Once registered, you will be directed to a page that will provide sample code to embed Gmaps in your page. More on this can be read at the sign up page-http://www.google.com/apis/maps/signup.html.

When I began anew with Gmaps, I thought it would be tough understanding and implementing Gmaps with the API. Soon, I discovered that Javascript, Ajax, XML and JSON are the technologies underlying Google maps and these were very familiar names to me (I hope you’ve heard of them too). A Map constitutes collection of Tiles (images). These images are downloaded when the user drags or pans the map out of the current view port. This downloading takes place in the background i.e. the page won’t post back. I as a user of the API find it to be very simple to implement.

What does Gmaps has in store?

Gmaps is an excellent example of web-cartography. It can be applied to virtually any thing that has a geographical coordinate. The number of sites utilizing this potential is growing fast. Maps are the perfect place to market yourself and your business!

Gmaps can be put to use in:

1. Marking your internet presence by creating a map that lists your home, school, college,office, neighbourhood, friends…..etc.

2. Listing the places one has visited on the map.

3. Be an E-Tourist and travel to anyplace across the world virtually.

4. The number of internet tourist is growing fast and there are sites targeting virtual tourists too. http://www.traveldodo.com/travel-guide/india/lists the places to visit on map (ex. India). Also note the nicely designed Zoom control.

5. See Promotional videos for famous places marked at http://todaysstory.googlepages.com/promo.htm.

6. http://googlesightseeing.com/map/is a site that lists surprising images caught on Google maps submitted by its users over the world.

7. Google maps is most common and a must have in all real estate websites like Trulia and Colorado Homes Stop. These sites feature properties that are displayed on the map by geocoding property address. The user is presented with all properties on the map and he/she can easily navigate to another property location and view its details in the info window.

8. Google maps is widely popular amongst social networking websites. Let’s take up Zolve for example. Zolve is a Real Estate Social Networking site. The map displays member’s Sphere of Influence [Friends Network] page. Few points that emphasize the extent to which maps can be tailored to fit requirements:

The red ( ), green ( ) and blue( ) markers tell us about the member’s business type.

The sphere member is discriminated from the sphere-network member using encircled dots ( ) for the first one and encircled triangles ( ) for the other.
The numbers ( ) depict the presence of more than one member at the same place.

The proper use of Google maps depends on ones ingenuity and requirements.

Categories
AJAX
Blogging
File Management
Gadgets
Internet Marketing
Internet Telephony
New Media
New Technologies
Privacy and Security
Real Estate
Search Engines
Social Networking
Subscription Models
Travel
Web 2.0
Web 3.0
Web based email
Website Reviews
Website Traffic Analysis

Back to Bhopu ArchivePosted On Feb 13, 2008
Google Maps Various Implementation Ideas
in Web 2.0