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.
Can I do it?
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
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.
Include the API
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.
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>
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.
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.
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)
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
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.