Before learning Google map, you must apply for a Google Map API key. A map API key is only valid for one "directory" or domain. For local testing, you must apply for a local key, namely http: // localhost. If you are using a website, you must apply for a private API key for the website domain name. Apply for a Google Map API Key address: http://code.google.com/intl/zh-CN/apis/maps/signup.html
Next, let's look at the first map: (replace the key with the applied API key)
<SCRIPT src = "http://maps.google.com/maps?
File = API & amp; V = 2 & amp; Key = example "type =" text/JavaScript "> </SCRIPT>
<SCRIPT type = "text/JavaScript">
// <! [CDATA [
// Note: embedding the CDATA segment in the javacript code block prevents the browsers that are not compatible with javacript from generating error messages.
// This is a good habit of writing web pages
VaR map; // global GMAP
// Used to initialize Google maps during webpage Loading
Function load ()
{
If (gbrowseriscompatible () // check browser compatibility
// If the browser cannot meet the minimum conditions for loading Google Maps, no further operations will be performed.
// This is a recommended method for compiling a Google Map webpage.
{
// Create a gmap2 object
Map = new gmap2 (document. getelementbyid ("map "));
// Display the map and set its center and zoom Value
// The zoom level is relatively small so that you can see the world map.
Map. setcenter (New glatlng (37.4419,-122.1419), 2 );
}
}
// Move the map center to Beijing
Function movemap ()
{
// The longitude and latitude of Beijing are 39.92 and 116.46, respectively.
Map. Panto (New glatlng (39.92, 116.46 ));
}
// Change the map type to a hybrid Map
Function changemaptype ()
{
Map. setmaptype (g_hybrid_map );
}
//]>
</SCRIPT>
Webpage code:
<! -- Call the load () function to load the map during loading. Add onUnload = "gunload ()" to prevent memory leakage. -->
<Body onload = "load ()" onUnload = "gunload ()">
<! -- The following Div element with the ID of map is the container of Google map -->
<Div id = "map" style = "width: 500px; Height: 300px"> </div>
<Input type = "button" value = "Mobile map center" onclick = "movemap ()"/>
<Input type = "button" value = "Change map type" onclick = "changemaptype ()"/>
</Body>
The best document to learn is the official API documentation of Google map. Google map is mainly developed using JavaScript. Pay attention to browser compatibility issues. You can use firebug in Firefox to debug the test.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
