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

style: HORIZONTAL_BAR(default), DROPDOWN_MENU

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

mapTypeIds: google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE

4. navigationControl

        This property displays or hides the navigation control.

5. navigationControlOptions

position

style: SAMLL(default), ANDROID, ZOOM_PAN

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.