Developing map services using the Google Map V3 API

API Learning Address

In fact, the Google Map API is very simple, here is the Learning document portal http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/articles.html

Some examples of code Google Maps that can be internationalized

<script type= "Text/javascript"
 src= "http://maps.google.com/maps/api/js?sensor=false&language= language-national abbreviation ">
</script>

Write the language country abbreviation behind the language to internationalize Google map.
Map Class How to initialize the map:

var myoptions = {
	zoom:11,
	center:new google.maps.LatLng (30.1234567,120.3456789),
	Maptypeid: Google.maps.MapTypeId.ROADMAP
};
var map = new Google.maps.Map (document.getElementById ("Mainmaplayer"), myoptions);

1, center refers to the map positioning coordinates, the need to LATLNG objects, object parameters are latitude and longitude

2, Maptypeid is similar to the enumeration of things, the detailed reference API

3, Mainmaplayer is my map div object ID Name, this div to indicate the height and width of the map can not initialize

Marker class, Infowindow class to add a custom marker:

var usermarker = new Google.maps.Marker ({
		position:new google.maps.LatLng (30,120),
		Map:map,
		title: "Mouse hover When prompted information ",
		icon:" Picture position string "
	});
var Yourinfowindow;

(function (usermarker) {
	google.maps.event.addListener (usermarker, ' click ', Function () {
		if (!) Yourinfowindow) {
			Yourinfowindow = new Google.maps.InfoWindow ({});
		}
		Yourinfowindow.setcontent (usermarker.title);
		Yourinfowindow.open (map, Usermarker);
	});
} (Usermarker);

1, marker class is to add something similar to a small pushpin on the map.

2, marker need to set coordinates and map objects to initialize

3. Use the following statement to reuse the same marker object when it is reused

Usermarker.setmap (NULL);

4, the last is to add a click event for the Marker object, using the nested writing (used in the For loop to better make)

5, Infowindow is the big form that pops up, his setcontent method is to support HTML and CSS code, can put in div or table set style

Latlngbounds Class
Map Range Adaptive:

var bounds = new Google.maps.LatLngBounds ();
Bounds.extend (New Google.maps.LatLng (30,120));
Create marker for new results
(var i in member) {
	bounds.extend (new Google.maps.LatLng (member[i][2],member[i][3));
	var marker = new Google.maps.Marker ({
		position:new google.maps.LatLng (member[i][2),	member[i][3]),
		map: Map,
		title: "title",
		icon: "Imageaddress"
	});
	Markers.push (marker);
	Add Infowindow for marker, add click event
	(function (i, marker) {
		Google.maps.event.addListener (
			marker,
			' Click ',
			function () {
				if (!infoawindow) {//single example Infowindow
					Infoawindow = new Google.maps.InfoWindow (
														{});
				}
				Infoawindow.open (map, marker);
		});
	} (I, marker);
}
Map.fitbounds (bounds);/The most important sentence

Geocoder class
Submit address string returns latitude and longitude (very useful function), the query depends on it

var geocoder = new Google.maps.Geocoder ();
	Geocoder.geocode ({
		' address ': "The format can be undivided: Beijing Dongcheng District Dongzhimen, or Beijing, Dongcheng District, Dongzhimen door"
	}, function (results, status) {
		if ( Status = = Google.maps.GeocoderStatus.OK) {
			mylatlng = results[0].geometry.location;
			There is a lot of useful information in the results array, including coordinates and returned standard position information
		} else {
			alert (intergeoanalysisfailed);
		}
	});

Map Navigation Services

var map;	Map Object	
var mode = Google.maps.DirectionsTravelMode.DRIVING;	Google Maps route guidelines for the pattern
var directionsdisplay = new Google.maps.DirectionsRenderer ();	Map route Display Object
var directionsservice = new Google.maps.DirectionsService ();	Map route service object
var directionsvisible = false;	Whether to show Route
directionsdisplay.setmap (null);
Directionsdisplay.setmap (map);
Directionsdisplay.setpanel (document.getElementById ("Directionspanel"));	Show route navigation results to div	
var request = {origin:findlatlng, destination:marker.position, Travelmode:mode, Optimizewaypoints:true, avoidhighways:false,avoidtolls:false};
Directionsservice.route
(
	request,
	function (response, status)
	{
   		if (status = = Google.maps.DirectionsStatus.OK)
   		{
       			directionsdisplay.setdirections (response);
   		}
   	}
);
Directionsvisible = true;