Developing map services using the Google Map V3 API

Source: Internet
Author: User
Tags map class
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;































Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.