# 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>

<script type="text/javascript">
var mapOptions = {
zoom: 3,
mapTypeControl: true,
scaleControl: true,
disableDoubleClickZoom:true
};

}
</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

position: BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT, TOP, TOP_LEFT, TOP_RIGHT

This property displays or hides the navigation control.

position

style: SAMLL(default), ANDROID, ZOOM_PAN

## 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.

# 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.

posted @ 2012-01-28 01:35  Create Chen  阅读(...)  评论(...编辑  收藏