This tutorial is intended to help you create your own interactive maps using the Google API.

Do take a look at the Google documentation.

There are two ways to use this tutorial:

1. Read it and try to understand the principles involved.
2. Use the example files as templates. Paste the code into your own web page and change the API key and data. Read the "potential pitfalls" sections, and try to avoid them.

There are 2 Editing area present to enter code which is used to complete this lab.

1. Javascript Function Editing Area: It is used to enter name of the Function
2. Html Editing Area

Here are the details:

Javascript Function Editing Area: This area is used to add javascript functions to the page. It contains following 3 sub-sections:

1. Name: It is used to enter name of the Function
2. Argument: It is used to enter required argument of the function. You can enter multiple arguments seperated by comma. eg. (Xaxis , Yaxis)
3. Code: It is used to add code of the function

Html Editing Area: This area is used add HTML code.

1. To fetch map data and display it online GoogleMap uses initialize function, which contains variables and functions which are use to get map from Google server.

Enter a name of the function as 'initialize'

2. Keep the argument box empty, as initialize funtion doesn't require any outer variables

3. Click on a Add Script button to add the initialize function to the result page. You will get a notification if you added the function successfully or not.

If you get the error message, then please repeat step 1-2

4. Now add a div element to set a map display area on the webpage using HTML Editing Area.

5. Click on Show Preview button to see the resulting preview page.

6. To see what are function which are get called internally click on 'Show Function Tree' button