Google Maps JavaScript. The API allows you to use Google Maps on your own Web pages. Before using the API, you should apply for a
API key, Request API key to: Http://code.google.com/apis/maps/signup.html. This assumes that the key you have obtained is: ABQIAA.
The acquisition of jquery is no longer burdensome, and there are many introductions to jquery on the web.
Then we use jquery and Google Maps JavaScript. API to combine the interesting map effects of Google Map to get familiar with Google Maps JavaScript. The target of the API.
Let's start with a Hellochina:
(1) Writing HTML code in an HTML file:
Map.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta. http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>google Maps combined with jquery </title>
<script. Src= "Http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type= "Text/javascript" ></script>
<script. Type= "Text/javascript" src= "Jquery.js" ></script>
<script. Type= "Text/javascript" src= "Map.js" ></script>
<body>
<div id= "Map" style= "top:100px;left:300px;width:600px; height:400px "></div>
<div id= "Message" ></div>
</body>
(2) in the JS file to write JS code
Map.js
Copy Code code as follows:
$ (document). Ready (function ()
{
Check browser compatibility
if (gbrowseriscompatible ()) {
var map = new GMap2 (document.getElementById ("map"));
Map.setcenter (New Glatlng (36.94, 106.08), 4)/latitude and longitude in China and local magnification
Map.setmaptype (G_SATELLITE_MAP);
Trigger when document is unloaded
$ (window). Unload (function () {
$('.'). Unbind ();
Gunload ();
});
}else
{
Alert (' You are using a browser that does not support Google map! ');
}
});
(3) in the Address bar to enter the corresponding address of the page (to determine the key and you enter the address or domain name matching), view the effect of the map, you can see China is located in the center.
Hollochina's effect chart
The movement and transformation of maps
(1) Modify the JavaScript code as follows:
Map.js
Copy Code code as follows:
$ (document). Ready (function ()
{
if (gbrowseriscompatible ()) {
var map = new GMap2 (document.getElementById ("map"));
Map.setcenter (New Glatlng (36.94, 106.08), 4);
Move after 4 seconds.
Window.settimeout (function () {
Map.panto (New GLATLNG (35.746512259918504,78.90625));
}, 4000);
$ (window). Unload (function () {
$('.'). Unbind ();
Gunload ();
});
}else
{
Alert (' You are using a browser that does not support Google map! ');
}
});
(2) Enter the corresponding address view, wait 4 seconds, you can see the center of the map moved to the west of China (approximate location):
Map Center moves to the west of China
Adding controls and modifying map types
Modify the JavaScript code as follows:
Map.js
Copy Code code as follows:
$ (document). Ready (function ()
{
if (gbrowseriscompatible ()) {
var map = new GMap2 (document.getElementById ("map"));
Small Telescopic Controller
Map.addcontrol (New Gsmallmapcontrol ());
Map Type Controller
Map.addcontrol (New Gmaptypecontrol ());
Map.setcenter (New Glatlng (36.94,106.08), 4);
Set the map as a satellite map
Map.setmaptype (G_SATELLITE_MAP)//Modify map type
$ (window). Unload (function () {
$('.'). Unbind ();
Gunload ();
});
}else
{
Alert (' You are using a browser that does not support Google map! ');
}
});
Refresh the page, see the effect is the satellite map of the upper left corner of a small telescopic control, the upper right corner is the map selected control
Chart of effects after adding controls
Add an event listener and turn on the wheel scaling effect
To modify JavaScript code:
Map.js
Copy Code code as follows:
$ (document). Ready (function ()
{
if (gbrowseriscompatible ()) {
var map = new GMap2 (document.getElementById ("map"));
Map.addcontrol (New Gsmallmapcontrol ());
Map.addcontrol (New Gmaptypecontrol ());
Turn on the wheel expansion effect--the mouse wheel roll forward to enlarge the map, and reduce
Map.enablescrollwheelzoom ();
Add MoveEnd Event Listener
Gevent.addlistener (Map, "MoveEnd", function () {
var center = map.getcenter ();
Show the latitude and longitude of the map center in this div
$ (' #message '). Text (center.tostring ());
});
Map.setcenter (New Glatlng (36.94,106.08), 4);
$ (window). Unload (function () {
$('.'). Unbind ();
Gunload ();
});
}else
{
Alert (' You are using a browser that does not support Google map! ');
}
});
At this time the map in the rolling wheel will be telescopic, and drag the map, the map to the left of the coordinate information will be changed.
