I played Google's map api a few days ago. It feels pretty good and simple. Anyone who has any programming experience can master its main functions within 10 minutes after reading the following tutorials. In addition, I also made a simple small example, if you are interested, please refer to the http://sunjian100.googlepages.com/map.html:]
Step 1:
Apply for a keyid from the http://www.google.com/apis/maps/signup.html
Step 2:
Add a reference to the mapapi function library between HTML <title> </title>,
<SCRIPT src = "http://maps.google.com/maps? File = API & V = 2 & Key =Yourkeyid"Type =" text/JavaScript "> </SCRIPT>
Step 3:
Add a div named map to any location between HTML <body> </body>,
<Div id = "map" style = "width: 700px; Height: 560px" align = "center"> </div>
Step 4:
Add the GMAP class instance to the DIV named map,
<SCRIPT type = "text/JavaScript">
// Create an instance of the GMAP class
VaR map = new GMAP (document. getelementbyid ("map "));
// Add a control bar
Map. addcontrol (New gsmallmapcontrol ());
// Set the display mode to satellite image
Map. setmaptype (g_satellite_type );
// Set the center longitude and latitude (Shanghai) and zoom factor, and display
Map. centerandzoom (New gpoint (121.4838, 31.2517), 4 );
</SCRIPT>
Step 5:
Add 10 randomly marked points,
VaR bounds = map. getboundslatlng ();
VaR width = bounds. Maxx-bounds. Minx;
VaR Height = bounds. Maxy-bounds. miny;
For (VAR I = 0; I <10; I ++ ){
VaR point = new gpoint (bounds. Minx + width * Math. Random (),
Bounds. miny + height * Math. Random ());
VaR marker = createmarker (point, I + 1 );
// Add a tag
Map. addoverlay (Marker );
}
Step 6:
Add event response,
Function createmarker (point, number)
{
VaR marker = new gmarker (point );
// Show this marker's index in the info window when it is clicked.
VaR html = "marker # <B>" + number + "</B> ";
Gevent. addlistener (Marker, 'click', function (){
Marker. openinfowindowhtml (HTML );});
Return marker;
}
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
