Use Google map API with jquery (1)-controls and listeners [Post]

Use Google map API with jquery 1-3

 

Use Google map API with jquery (1) -- controls and listeners [Post]

Use Google map API with jquery (2) -- Annotation, floating window [Post]

Use Google map API with jquery (3) -- icon style, use XML and asynchronous requests [Post]

Google Maps javascript API allows you to use Google Maps on your webpage. before using the API, you must apply
API keys. To apply for an API key, go to http://code.google.com/apis/maps/signup.html. Assume that the obtained key is abqiga.
Jquery acquisition is no longer cumbersome here. There are many introductions on the Internet about jquery.
Then we will use jquery and Google Maps JavaScript APIs to demonstrate the interesting map effects of Google Map, so as to become familiar with Google Maps JavaScript APIs.

Hellochina:
(1) Compile HTML in an HTML fileCode:
Map.html

<! Doctype HTML public " -// W3C // dtd xhtml 1.0 strict // en "
" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< HTML xmlns = " Http://www.w3.org/1999/xhtml " >
< Head >
< Meta HTTP - Equiv = " Content-Type " Content = " Text/html; charset = UTF-8 " />
< Title > Use Google maps with jquery </ Title >
< Script SRC = " Http://maps.google.com/maps? File = API & amp; V = 2 & amp; Key = abqiga " Type = " Text/JavaScript " > </ Script >
< Script Type = " Text/JavaScript " SRC = " Jquery. js " > </ Script >
< Script Type = " Text/JavaScript " SRC = " Map. js " > </ Script >
</ Head >
< Body >  
< Div ID = " Map " Style = " Top: 100px; left: 300px; width: 600px; Height: 400px " > </ Div >
< Div ID = " Message " > </ Div >
</ Body >
</ Html >

(2) Compile js code in the JS File
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 longitude and latitude and local magnification
Map. setmaptype (g_satellite_map );
// Triggered when document is uninstalled
$ (Window). Unload ( Function () {
$ ('.'). Unbind ();
Gunload ();
} );
} Else
{
Alert ('The browser you use does not support Google Map!');
}
} );

(3) enter the address corresponding to the page in the address bar (make sure that the key matches your entered address or domain name) and check that China is located in the center of the map.

Of hollochina

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 in 4 seconds
Window. setTimeout ( Function () {
Map. Panto (NewGlatlng (35.746512259918504,78.90625));
} , 4000 );
$ (Window). Unload ( Function () {
$ ('.'). Unbind ();
Gunload ();
} );
} Else
{
Alert ('The browser you use does not support Google Map!');
}
} );

(2) enter the corresponding address to view the map. After four seconds, you can see that the center of the map is moved to the western part of China (approximate location ):

Move the map center to the West of China

Add controls and modify map types

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 a map as a satellite map
Map. setmaptype (g_satellite_map ); // Modify map type
$ (Window). Unload ( Function () {
$ ('.'). Unbind ();
Gunload ();
} );
} Else
{
Alert ('The browser you use does not support Google Map!');
}
} );

Refresh the page and you will see a small scaling control in the upper-left corner of the satellite map.

After the control is added

Add Event Listeners and enable scroll wheel Scaling

Modify JavaScript code:
Map. js $ (Document). Ready ( Function ()
{
If (Gbrowseriscompatible ()) {
VaR Map = New Gmap2 (document. getelementbyid ( " Map " ));
Map. addcontrol ( New Gsmallmapcontrol ());
Map. addcontrol ( New Gmaptypecontrol ());
// Turn on the scroll wheel scaling effect-scroll the mouse wheel forward to zoom in the map, and vice versa
Map. enablescrollwheelzoom ();
// Add a moveend event listener
Gevent. addlistener (map, " Moveend " , Function () {
VaRCenter=Map. getcenter ();
//Show the longitude and latitude 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 ('The browser you use does not support Google Map!');
}
} );

At this time, the map will be scaled when the scroll wheel is rolled, and after the map is dragged, the coordinate information on the left side of the map will change.