Gmaps 101 – An Introduction to Google Maps & The Google Maps API (Part 1)

In this first article of a three part series on the Google Maps API you will discover the fundamental programming constructs for developing web mapping applications with the hottest web mapping application development tool. Note… this tutorial looks at using version 2 of the Google Maps API. Once we walk you through this tutorial you will feel comfortable with Google maps, you’ll know how to get your own maps key, and be up and running with your own Google map with basic controls.

Introduction to Google Maps

A number of new geospatial viewing tools from major players in the Internet industry have recently appeared on the scene and are taking the geospatial world by storm.  Google, Yahoo, Microsoft, and Amazon have all released web-based mapping tools in the recent past, and collectively these new players to the industry have raised the bar for Internet mapping.  Although their functional capabilities don’t provide anything we haven’t seen in web offerings from traditional GIS vendors, their emergence has been significant in that they have managed to capture a wider audience.  Google, in particular, has emerged as the leader of this pack with it’s recently released Google Maps product which provides a slick, highly responsive visual interface built using AJAX technologies along with detailed street and aerial imagery data, and an open API allowing customization of the map output including the ability to add application specific data to the map. 

 Many of the barriers to entry into the world of web mapping have been removed by Google Maps. To understand how this technology has the potential to change the way web mapping is implemented you must understand the traditional approach to publishing dynamic maps in a web based environment.  Traditional web mapping products have relied on a sophisticated infrastructure of data, hardware, software, and human resources. 

 Data for a traditional web mapping application can be broken into two distinct categories: base data and application specific data.  Base data or background data usually includes the geographic region covered by the application and often includes layers such as aerial imagery and photos, streets, and organizational boundaries.  Application specific data would include geographic data layers specific to the application being developed.  For instance, in a web mapping application hosted by a city you might have data layers such as parcel and subdivision boundaries, school locations, public office locations, and many other application specific layers.  Each of these data layers must be obtained, loaded onto a server managed by the organization, and updated periodically.  With Google Maps you no longer have to worry about obtaining and managing your own base data.  Aerial imagery and street data is included with Google Maps thus removing the need to obtain and manage these large data sets.  However, you are still required to manage your application specific data in either XML or database format. 

 In addition to the complex data requirements of traditional web mapping products you must also contend with hardware, software, and human resource issues.  Hardware and software must be purchased and effectively managed while human resources are necessary for managing the software installations, administering the software, and programming the web applications.  Although these requirements are not completely removed through the introduction of Google Maps, they are greatly reduced.  Hardware is still needed to host the application specific data and web sites, but the software requirements are essentially removed from the equation.  Google Maps is currently a free product and requires no installation or management.  However, because this product is a programmer’s toolkit or API you will either need to have some programming expertise or know someone who does.  Specifically you will need skills in JavaScript and possibly another Internet programming language such as PHP, ASP.NET, or ColdFusion.

 What is Google Maps?

As mentioned in the introduction, Google Maps provides a highly responsive, intuitive mapping interface with detailed street and aerial imagery data embedded.  In addition, map controls can be embedded in the product to give users full control over map navigation and the display of street and imagery data.  Additionally, users can also perform map panning through the user of the “arrow” keys on a keyboard as well as dragging the map via the mouse.  These capabilities combine to provide a compelling product, but the primary driver behind it’s rapid acceptance as a Internet mapping viewer is the ability to customize the map to fit application specific needs.  For instance, a real estate agency might develop a web based application that allows end user searching for residential properties the results of which could be displayed on a Google Maps application.  This ability to customize the map display through the addition of application specific data is the true driver of it’s acceptance as a geospatial viewing tool.  To get a good idea of the diversity of applications that are possible through Google Maps, spend some time at Mike Pegg’s Google Maps Blog.


Getting a Google Maps Key

At this time, the Google Maps API is a free beta service.  However, Google reserves the right to put advertising on the map at any point in the future so keep this in mind as you begin to develop Google Maps applications.  Your applications may also need frequent code changes since this product is still in a beta format and subject to changes in the API. 

 Before you can get started developing Google Maps applications you will need to sign up for an API key.  When you sign up for an API key you must specify a web site URL that will be used in your development.  One problem frequently associated with Google Maps is that you must acquire a unique key for each directory that will serve Google Maps.  For instance, if you intend to serve Google Maps from http://localhost/wwwroot and http://localhost/wwwroot/GMaps you would need to generate separate keys for each directory.  Google Maps will generate a unique keycode for the directory that you specify.  You must use this keycode in each script that accesses the Google Maps API.

 Google Maps Documentation

Google also provides documentation for using its product including full documentation of the classes, methods, and events available for the Google Maps objects as well as code examples to get you started.  In addition, Google provides a blog and discussion group for additional information on using the API.


Creating a Basic Google Map with Controls

When you sign up with Google Maps, an API key will be generated.  Make sure you save this key as you will need it for all Google Maps applications that you develop for the particular URL directory that was specified.  In addition to the API key, Google will also generate an example web page centered around the Palo Alto area in the vicinity of the Google Headquarters.  You can copy and paste the HTML and JavaScript generated into a plain text file, save it to the web server directory you specified when you generated the key, and then display the map in your web browser.

As you begin working with the Google Maps API you will notice how easy it is to create a basic, navigable map with just a few lines of code.  Let’s begin by creating a basic Google Map and then we’ll expand on that by adding navigation and map type controls as well as markers and info windows.  First, take a look at the basic example map below.


Figure 1: A basic Google Map


Let’s take a look at the code that was used to generate this simple map.  All the code examples that you will see in this book will be written in JavaScript.

The <script> tags are used to designate an area that will be used to write JavaScript code.  The first <script> tag that you see in this example imports the Google Maps library.  The key that you generated must be inserted here.  In addition, you must also specify a Google Maps version id.  Notice in our code sample that we’re using version 2 of the Google Maps API which was released on April 3rd, 2006.  Although version 2 was designed to be 99% compatible with version 1 you should make plans to upgrade any existing code that you have written as soon as possible because Google will ultimately default everything to version 2.



Here is the full code used to generate the basic Google Map.



  • The <div> tag serves as a placeholder for your map.  You’ll want to give the tag a name through the id attribute.  In this case we’ve simply named our placeholder “map”.
  • The second <script> tag is where all the work of creating your Google Map occurs. 
    • new GMap2( ) creates the Google Map.  In the constructor for GMap2 you simply pass in the <div> specifying where the map will appear. 
    • map.setCenter centers the map at a particular latitude, longitude and zooms to the level specified.  Google uses an 17 point scale with zoom level 0 showing the entire world and zoom level 17 zoomed to the street level.

Now that you’ve seen a basic Google Map let’s take the next step and add the navigation and map type components.  We will add each of these components through the addControl( ) method on the GMap2 object.


Notice in the code example that we’ve added two controls to our map. 

  • map.addControl(new GLargeMapControl());
    • Adds a map zoom control that allows the user to change the zoom level of the map.  This control is always located on the left hand side of the map.
  • map.addControl(new GMapTypeControl());
    • Adds a control to the top right hand corner of the map that allows the user to flip between the Map, Satellite, and Hybrid views.


These two lines of code result in a map that now looks like the figure below.




Figure 2: A basic Google Map with Controls



By default, the Normal view will be displayed when you create a new instance of a Google Map.  However, you can change this to any of three basic types, and with version 2 of the API you can now create your own map types.  For instance, if you’d like the initial display of your map to be a hybrid display of satellite imagery and streets you could do so with the code that you see below.



·        The setMapType method is used to control the view of the map.

o       G_HYBRID_MAP displays a combination of satellite imagery and streets

o       G_NORMAL_MAP is the default and provides a display of the regular streets

o       G_SATELLITE_MAP displays a satellite image


The resulting map of the code is shown below.



Figure 3: Google Map with Display Changed to Hybrid




Although it is relatively simple we now have a fully functional web mapping application with just a few lines of code.  We can pan, zoom in and out, and change the display style of the map.  Next, let’s add some point data to our map and attach an info window that we’ll use to display attribute information about the point.  This is where the true power of Google Maps really comes into play.  By giving you the ability to add points of interest and polylines you can supplement Google Maps with your own user specific data sets.  In addition, the Google Maps API provides classes and methods that allow you to read your user specific data from an XML file stored on your server making it easy to centralize the storage of your points of interest.  This ability to plot user specific data in the form of points and polylines has truly opened the world of dynamic web applications to the masses.  Although mapping applications have existed on the web for roughly a decade they have remained largely in the domain of large organizations with the resources available to purchase and support the infrastructure necessary to run these applications.  However, Google Maps greatly simplifies the task of creating web based mapping applications and at a mere fraction of the cost in both monetary and human resource terms.  With that said let’s take a look at how you can add points of interest and info windows to your Google Maps application.  Examine the code example below to see how to add points of interest and info windows.


Let’s take a look at some of the code required to add points of interest and info windows to your Google Map.

·        The GLatLng and GMarker classes work together to produce a point of interest that can be plotted on your map.

o       var pt = new GLatLng(-96.340264, 30.609682);

§         This creates a point object centered at the longitude, latitude coordinate specified.

o       var marker = new GMarker(pt);

§         Using the point object we created with new GLatLng( ) we can create a marker object with the constructor for GMarker.

·        Now that we have a marker object we can create an info window and attach it to the marker for display.

o       var html = “Kyle Field<br>College Station, TX<br>Home of the Fightin’ Texas Aggies!”;

§         This line specifies the html code that will be displayed in the info window.  Any valid html can be used in your info windows.

o       GEvent.addListener

§         Creates a listener for a particular event.  In this instance, the marker will now respond to the click event.  This means that the code specified in the function will run in respond to a user click on the marker.  In this case it will display the html we specified.

·        Finally, we add the new marker to our map with map.addOverlay(marker)


All of this combines to produce an image similar to what you see below.


Figure 4: Google Map with Info Window




In the next article in this series we will cover the Google Maps API Version 2 in greater detail including the most commonly used classes including GMap2, GMarker, GLatLng and many others.  We’ll also explore the various map controls that can be placed on a Google Map including panning, zooming, and overview controls.  In addition, we’ll also cover various events that you can use in your code to respond to user initiated actions.  The third and final article in the series will cover AJAX and geocoding your user data.

Author Information

Mr. Pimpler is the owner of Geospatial Training & Consulting, LLC, a provider of virtual and instructor led GIS training opportunities and the author of its popular virtual training course “Google Maps For Your Apps!” and the new PDF book “Google Maps API: The New World of Web Mapping”.  For more information on the Google Maps API or any other training opportunity provided by GeoSpatial Training & Consulting, please visit our website at

This article copyright (c) 2006 Eric Pimpler, GeoSpatial Training & Consulting, LLC – 

For More useful Google Maps and mashup tutorials and resources see the following: APIs and Mashup Developer Tools

This article is available as a downloadable PDF HERE

See Also: An Introduction to Google Maps & The Google Maps API V2 (Part 2)


Editor’s Picks

Drones’ 3D printed parts: Sculpteo gets up in the air with Hexadrone

3D Printed Parts for Drones

It’s well known that drones and 3D printing definitely make a good pair. Additive manufacturing technologies allow droning professionals and hobbyists to build their own aircraft. With today’s technology, drones can perfectly match their owner’s needs. Alexandre Labesse, CEO of the French company Hexadrone shared his views on the influence of 3D printing in the […]


Aibot X6 uses Leica Nova MultiStation for accurate geospatial data without GNSS

(Norcross, GA /Kassel, Germany, 1 October, 2014) – At this year’s INTERGEO in Berlin, Leica Geosystems and its sister company, Aibotix, will present a solution for accurate positioning of the Aibot X6 without GNSS. The UAV can be tracked accurately with the Leica Nova MultiStation to define the exact position. Using the Aibot X6 together with the Nova MultiStation can inspect top surfaces of aircrafts in hangars, enabling users to rely on its proven functionality without the support of GNSS. The UAV, equipped with Leica Geosystems’ 360° prism, flies over the aircraft and takes high-resolution images of its surface. This solution helps, for example, to ascertainlightning strikes and effectively document […]

autocad for mac

AutoCAD for Mac 2015 and AutoCAD LT for Mac 2015 Now Available

New Functionality Helps Mac and Windows Users Work Together More Efficiently SAN FRANCISCO–(BUSINESS WIRE)–Autodesk, Inc. (NASDAQ: ADSK) today announced the 2015 releases of AutoCAD for Mac and AutoCAD LT for Mac software, two of the leading computer-aided design (CAD) tools for Mac users. The new software makes it easier than ever for businesses and students to […]

More Posts from this Category

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>