Getting Started with Google Maps API for your own web app

July 6th, 2009 by K79 Leave a reply »

Introduction

This short tutorial will guide you through your first implementation of Google Maps API. This is very basic tutorial and is targeted towards people who wants to use Google Maps API but are scared by the complexity of documentation available elsewhere.

You might want to use Google Maps API for the purpose of creating and displaying custom points of interests on your own website as well as doing one of many things that can be implemented by Google Maps API. I will cover different implementations later.

In simple word you will need to include the javascript API of Google Maps and then create a maps object inside a container object on your own web page.

Can I do it?

If you know a bit of javascript to change variable names where needed or if you are very very careful at copy-paste skills you can do it by following the steps below.

What do I need?

A notepad (or any web development editor) and a browser. You only need web server or a dynamic web development language (PHP / ASP) support if you are loading data from database or doing other related stuff but that is outside of the scope of this tutorial.

Sweet, Lets Start

  1. Sign-up for Google API

    Signing up for Google Maps API is free and even the usage is free. Just do it by visiting: http://code.google.com/apis/maps/signup.html
    When you get your API Key come back and continue through this tutorial.

  2. Include the API

    You need to include the javascript API into your webpage by including the remote js file from Google.
    Add the following line in your web page. Any place before rest of Maps code will do however try placing it in head element just after CSS files / styles.

    <script src="http://maps.google.com/maps?file=api&v=1&key=YOUR-API-KEY"
    type="text/javascript"></script>
  3. Create the container object

    You need to create a container where the created maps object will show. It is a good idea to create a div / layer for the Maps that you can style and re-size yourself.
    Add the following line in your web page. Any place within the body will do. Have a play with the in-line styles or move the styles to external style sheet.

    <div id="map" style="width: 500px; height: 400px;border:1px solid #000">
    </div>
  4. Create the map object

    You need to create a Google Maps object and pass the object of the target layer to the constructor.  You can place this script just after the scrip tag in step 2.
    Add the following line in your web page.

    <script type="text/javascript">
     var map = new GMap(document.getElementById("map"));
    </script>
     

    At this point you can open up your page to witness the Google Maps object in your web page. Cool?
    Missed something? Do not worry and grab a free copy of completed page at the bottom and have fun.

  5. Set the location and zoomSetting UI Controllers

    Some basic stuff you can do with your new Google Maps is that you can set the location to any place on earth as long as you know the latitude and logitude of the location.
    Add these lines to your code just after the </div>

     map.centerAndZoom(new GPoint(70,30), 14);
     map.setUIToDefault(); 
    
    

    Here we are centering the maps to a geographical point (created by GPoint) with given latitude and logitude. Have fun by changing these and see where you land.
    Second value in the function is the zoom value. Google Maps can zoom from 0 (Whole world) to 17 (Street Level).
    setUIToDefault will show the usual controls on the Google Maps API (Zoom bar / Buttons to switch between map types)

  6. Just give me the cooked version

    If you know your way around in HTML and Javacript just grab the complete source code here. You are free to use it wherever you want. License: LGPL by k79.com

     <html>
     <head>
     <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR-API-KEY"
     type="text/javascript"></script>
     </head>
     <body>
     <div id="map" style="width: 500px; height: 400px;border:1px solid #000">
     </div>
     <script type="text/javascript">
     var map = new GMap(document.getElementById("map"));
     map.centerAndZoom(new GPoint(70,30), 14);
     map.setUIToDefault();
     </script>
     </body>
    </html>
    
  7. I love comments and I love debugging

    If you like or dislike this tutorial I will be happy to read your comments. If you have run into a problem just post it, as I said I love debugging and might fix your code for you.

Advertisement