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;