Google Maps JavaScript. API allows you to use Google Maps on your own web pages. Before using the API, you should apply for an API key. To apply for an API key, please go to: http://code.google.com/ apis/maps/signup.html. It is assumed here that the key you obtained is: ABQIAA.
About jquery is no longer cumbersome here. There are many introductions about jquery on the Internet.
Then we will use JQuery and Google Maps JavaScript. API to combine the interesting map effects of Google Maps, and then achieve the goal of becoming familiar with Google Maps JavaScript. API.
First HelloChina:
(1) Write html code in html file:
map.html
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd">
Google Maps with JQuery
(2)Written in js file js code
map.js
$(document) .ready(function()
{
//Check browser compatibility
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.94, 106.08), 4);//China’s latitude and longitude and local magnification
map.setMapType(G_SATELLITE_MAP);
//Triggered when document is unloaded
$( window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert( 'The browser you are using does not support Google Map!');
}
});
(3) Enter the address corresponding to the page in the address bar (make sure the key is the same as yours) Enter the address or domain name matching), view the rendering, and you can see that China is in the center of the map.
HolloChina's renderings
Map movement and transformation
(1) Modify the javascript code as follows:
map.js
$(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('The browser you are using does not support Google Map!');
}
});
(2) Enter the corresponding address to view, wait for 4 seconds, you can see the center of the map moves to the west of China (approximate location):
Map The center moves to the west of China
Add controls and modify the map type
Modify the javascript code as follows:
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2( document.getElementById("map"));
//Small scaling 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 the map type
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('The browser you are using does not support Google Map!');
}
});
Refresh the page, and the effect you see is that there is a small telescopic control in the upper left corner of the satellite map, and the map selection control in the upper right corner
The rendering after adding the control
Add an event listener and turn on the scroll wheel telescopic control Effect
Modify the javascript code:
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map. addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//Enable the scroll wheel telescopic effect - roll the mouse wheel forward to zoom in on the map, and vice versa to zoom out
map.enableScrollWheelZoom() ;
//Add moveend event listener
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
//Display in this DIV The latitude and longitude of the map center
$('#message').text(center.toString());
});
map.setCenter(new GLatLng(36.94,106.08),4);
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('The browser you are using does not support Google Map!');
}
});
The map at this time will expand and contract when scrolling the wheel. After dragging the map, the coordinate information on the left side of the map will change accordingly.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
