Google Maps Application Developing —— Quick Start

Brief Preface

There are some fatal steps to make the Google Map working. First of all , add a reference of Google Maps API in the head element:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Second , make the code run while page loading:

<script type="text/javascript">
window.onload = function(){
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(37.09,-95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
scaleControl: true,
disableDoubleClickZoom:true
};

var map = new google.maps.Map(document.getElementById('map'),mapOptions);
}
</script>

As you see, the last sentence code is most important. To initialize the object Map need two parameters, one is a HTML element which used to be a div, the other parameter is an object conclude some customizations associated with the final appearance of the map in web pages.

Introduce to mapOptions

I would like to introduce some very useful options to customize the map's performance.

1. disableDefaultUI

By setting this property to true, you will disable the default user interface.

2. mapTypeControl

With this property, you can control whether the mapTypeControl will be displayed. The mapTypeControl is positioned in the upper-right coner of the map.

3. mapTypeControlOption

This object has three properties: style, position, mapTypeIds

4. navigationControl

This property displays or hides the navigation control.

5. navigationControlOptions

6. scaleControl

7. scaleControlOptions

With this property, you can control how the scale control will be displayed. Just like the NavigationControlOptions, ScaleControlOptions has two properties, position and style.

8. keyboardShortcut

This property enables or disables the ability to use the keyboard to use the keyboard to navigate and zoom the map.

9. disableDoubleClickZoom

10. draggable

11. scrollwheel

12. streetViewControl

Use Method to Control Map Settings

You can control the map setting while the map is been initialing, some methods can do this either. For example , there is a method called setOptions() which is very useful:

var mapOptions = {
zoom: 12
};
map.setOptions(mapOptions);

To get the current zoom level , there's a method called getZoom(). It returns a number that indicates the current zoom level. To set the zoom level, use setZoom().

By parity of reasoning, you can use getCenter(0 and setCenter(latlng:Latlng) to get and change the center of the map. getMapTypeId() and setMapTypeId(mapTypeId:MapTypeId) are available to get and set the mapType.