Channels ▼
RSS

Web Development

Web Maps with the Google Map API

Source Code Accompanies This Article. Download It Now.


Dionysios is a web engineer at the National Technical University of Athens and a freelance consultant. He can be contacted through his blog at http://synodinos.wordpress.com.


A common challenge for many web developers is the creation of web applications that capture and describe geographical information. Nowadays, online maps are showing up everywhere, either as standalone applications or as modules for larger portals and services.

For such tasks, traditional image-based solutions fall short because the acquisition of the media tends to be expensive as they involve air photographs or copyrighted geopolitical maps. In the case of large-scale maps, the ad hoc use of satellite imaging can prove even more costly. Also, for this imaging to be easily available with the proper degree of usability, it requires lots of coding, which often introduces incompatibilities for many browsers.

Some vendors attack the problem by using proprietary plug-ins and development environments. But this approach still has many of the same problems as the final product is bound to specific environments and requires major funding for licensing.

For the last five years, we had been using a proprietary solution to manage a small percentage of the geographical information about various university locations. This solution had only a few locations and would run in only one browser on one operating system. Moreover, it required users to download a big plug-in. Also, it wasn't stable under heavy use.

For the next version of our service, we wanted to map more locations—in fact, everywhere in the country where the university has locations for labs, research facilities, and the like. The front-end would have to be stable and operate on all major operating systems and browsers. It would also have to be flexible enough for us to build features and functionality. Finally, it should be a solution that has the acceptance of the rest of the market since we wanted to make a long-term investment that would pay off as our service would scale.

In this article, I present our solution—a web front-end that utilizes several aspects of the freely available Google Map API to provide a usable, robust, cross-platform web map.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV