Get ready to code! In this section, we’ll be making changes and additions to the map HTML file to customize the map based on your preferences.

 

1.    Open your myapp.html file.

2.    Add the code to center the map at particular the latitude/longitude .The line that centers the map in the current code is: map.setCenter(new GLatLng(37.4419, -122.1419), 13);

 

This line calls setCenter on the map object, and passes in a GLatLng for the center, and a number for the zoom level. Change the two parameters of GLatLng to the latitude/longitude you want to locate, and if you’d like, change the zoom parameter. Zoom level 0 is the lowest zoom level (showing all of the world), and increasing numbers zoom in closer.

 

3.    Add code to change the default map type. Currently the map is showing the Map map type, which shows street names, country borders, etc. The other two options are the Satellite and Hybrid map types. You can see the difference at http://maps.google.com by pressing each of the three buttons in the top right corner. The line of code to change the map type is:

    map.setMapType(G_NORMAL_MAP);

    map.setMapType(G_SATELLITE_MAP);

    map.setMapType(G_HYBRID_MAP);

 

    The default that it’s already using is G_NORMAL_MAP, so if you      want to change it, use either G_SATELLITE_MAP or G_HYBRID_MAP. Add this line of code after the map.setCenter code.

 

4.    Add the code to create a marker at the center of the map, like the markers you see when you find businesses on Google Maps. The line of code to create a marker is:

var marker = new GMarker(new GlatLng(34.019968,-118.289988));

The line of code to add a marker to the map is:

map.addOverlay(marker);

 

5.    Add the code to open an info window (bubble) over the marker and add some information about the location.

The code to open an info window over a marker is:

 

 

var html=”<img src=’simplemap_logo.jpg'” +

“width=’128′ height=’41’/> <br/>” +

“USC GamePipe Lab<br/>” +

“3650 McClintock Ave, Los Angeles CA”;

marker.openInfoWindowHtml(html);

As you can see from my example, you can pass any HTML into the info window. You do need to be careful about quotation marks in the HTML, however. Here, I’ve used double quotation marks around the HTML, and single quotation marks around attributes in the HTML tags.

If you include an IMG tag in the HTML, you should define the width and height attributes of the image so that the info window is sized correctly to fit the image inside.

 

 

6.    Add the code to add controls to the map. On the maps.google.com map, you’ll notice multiple controls overlaid on the map that aid you in navigation and changing the map view. With the API, you can add any of these controls to your map, and you may want to do so to let people visiting your map view the area around your map. Here are the various controls options:

map.addControl(new GSmallMapControl());

map.addControl(new GLargeMapControl());

map.addControl(new GSmallZoomControl());

map.addControl(new GScaleControl());

map.addControl(new GMapTypeControl());

map.addControl(new GoverviewMapControl());

 

You should only add one of the zoom/pan controls: either GSmallMapControl, GLargeMapControl, or GSmallZoomControl, since they show up in the same location and accomplish similar things. You can add any or all of the other controls, as you so desire. These lines of code should be added anywhere under the map.setCenter line.

   7.Change the HTML to resize the map. The default map has dimension of  500×300 pixels. You may want your map to be larger or smaller than that. The map size is dependent on the size of the div that the map is initialized within, so you’ll need to change the dimensions of that div to your desired dimensions. Find the following line of code and replace the default width and height to whatever you want:

 

<div id=”map” style=”width: 500px; height: 300px”></div>

 

 

Courtesy: The Seo Guru, A Software Development Company, Best OOPS Blog Site, Link Submission, Thanks to Shopping  Site for Link Exchanging