Google map API basic usage

Due to work requirements, you need to use the map on the company's website to view Google map APIs over the past two days. Today, I will share with you some of my usage methods:

Demo address: http://www.yaohaixiao.com/code/googlemap%20sample/index.htm

Program code /*
========================================================== ==============================================
Google map API
========================================================== ==============================================
Method description:
1. gbrowseriscompatible () -- whether to support Google map APIs
2. shoplat-longitude coordinates of the hotel,
Shoplng -- latitude coordinate of the hotel
3. New glatlng (shoplat, shoplng) -- set the latitude and longitude
4. Map. setcenter (New glatlng (shoplat, shoplng), 14) -- set the default center longitude and latitude of the map
Parameter description:
New glatlng (shoplat, shoplng) -- set the longitude and latitude of the center.
14 -- default scale value of the map, ranging from 1 to 18
5. New gmap2 (document. getelementbyid ("shopgooglemap") -- get the displayed map container
6. Map. setmaptype (g_normal_map); -- set the map display type.
Optional values:
1. g_normal_map -- default map style
2. g_satellite_map -- Google Earth Satellite Map
3. g_hybrid_map -- Hybrid Map
7. New gicon (g_default_icon) -- set the tag Style
8. addcontrol () -- add controls to a map
Common optional controls:
1. New glargemapcontrol () -- large map zoom Level Control
2. New goverviewmapcontrol () -- map Thumbnail Control
3. New gscalecontrol () -- Scale Control
4. New gmaptypecontrol () -- map class selection Control
9. enabledoubleclickzoom () -- double-click (right-click) to zoom in/(left-click) to zoom out the map Ratio
10. Map. enablescrollwheelzoom () -- zoom in/out the map ratio using the scroll pulley method (forward)
11. enablecontinuouszoom () -- allows you to change the map ratio in a coherent manner.
12. createmarker (latlng) -- custom method:
Method description:
New gmarker (latlng) -- set the tag and parameter latlng in the map -- tag coordinates
Event. addlistener (Marker, event, function) -- set an event for the tag
Parameter description:
Marker -- tag object,
Event -- event name
Function -- Time Processing Function
Openinfowindowhtml (latlng, myhtml) -- add the information box to the tag
Parameter description:
Latlng -- tag coordinates,
Myhtml -- the HTML string of the prompt message
========================================================== ========================================================
Obtain the map center coordinates: javascript: void (prompt ('center coordinate ', gapplication. getmap (). getcenter ()));
========================================================== ========================================================
*/

Function initmap (){
If (gbrowseriscompatible ()){
VaR shoplat = message [0] [0];
VaR shoplng = message [0] [1];

VaR map = new gmap2 (document. getelementbyid ("shopgooglemap "));
Map. setcenter (New glatlng (shoplat, shoplng), 14 );

Function createmarker (latlng ){
VaR marker = new gmarker (latlng );
Marker. value = 0;

Gevent. addlistener (Marker, "click", function (){
VaR myhtml = "<span id =/" shopinfo/"> ";
Myhtml + = "<H2>" + message [1] [0] + "</H2> <br/>"
For (VAR j = 1; j <message [1]. length; j ++ ){
Myhtml + = message [1] [J] + "<br/> ";
}
Myhtml + = "</span> ";
Map. openinfowindowhtml (latlng, myhtml );
}
);
Return marker;
}

VaR point = new glatlng (shoplat, shoplng );
Map. addoverlay (createmarker (point ));

Map. enabledoubleclickzoom ();
Map. enablescrollwheelzoom ();
Map. enablecontinuouszoom ();

Map. addcontrol (New glargemapcontrol ())
Map. addcontrol (New goverviewmapcontrol ());
Map. addcontrol (New gscalecontrol ());
}
Else {
Alert ("sorry, your browser does not support creating maps! ")
}
}

It's easy to use. Google's cool people have designed everything for us. Look at the page code:

Program code

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml" xmlns: V = "urn: Schemas-Microsoft-com: VML">
<Head>
<Title> ticket ordering map of leopard Liyuan restaurant --- food ordering Secretary </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link href = "CSS/map.css" rel = "stylesheet" type = "text/CSS" Meida = "all"/>
<! -- API key for www.fg114.com (abqiaaaakxrmbyb7rkdtxdh8hnv_wrqzb _-fhhgqrp5ci71pbmvjnxavnhruj7vkn4c84_d2zthtpuycfdkavg) -->
<Script language = "JavaScript" type = "text/JavaScript" src = "http://ditu.google.com/maps? File = API & V = 2 & Key = abqiaaaakxrmbyb7rkdtxdh8hnv_wrqzb _-Example "> </SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
// Hotel brief infomation message
VaR
Message = [["31.19095130514533", "121.38208150863647"],
["Leopard Li Yuan Restaurant", "food series: Guangdong: Yan Bao wing", "per capita consumption:-yuan", "Address:
Near chengjiaqiao Road, 2 floor, leopard Hotel, No. 3162 yan'an west road "," Business Hours :-,-
"," Reservation number: <strong> 021-57,57, 5777! I eat, I eat, I eat! </Strong> "];

// -->
</SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript" src = "JS/fgmap. js"> </SCRIPT>
</Head>
<Body onUnload = "gunload ()">
<Div id = "Header">
<H1> <a href = "http://www.57575777.com/" target = "_ blank"> ordering Secretary </a> <Ul>
<Li id = "nav-First"> <a href = "/default. aspx" target = "_ blank"> homepage </a> </LI>
<Li> <a href = "/members/memberdefault. aspx" target = "_ blank"> member logon/points query </a> </LI>
<Li> <a href = "/commonhtml/57jf. aspx" target = "_ blank"> point redemption </a> </LI>
<Li> <a href = "/members/memberdefault. aspx? Type = 2 "target =" _ blank "> catering manager area </a> </LI>
<Li> <a href = "/members/memberaction. aspx" target = "_ blank"> free registration </a> </LI>
<Li> <a href = "/0/0/SH/1/0/0/1/0/0/1/searchrslt. aspx "target =" _ blank "> discount restaurant </a> </LI>
<Li> <a href = "/resmanage. aspx" target = "_ blank"> self-management </a> </LI>
<Li id = "nav-last"> <a href = "/commonhtml/market. aspx" target = "_ blank"> marketing </a> </LI>
</Ul>
</Div>
<H1> leopard Liyuan restaurant ordering Map <Div id = "shopgooglemap"> </div>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Initmap ();
// -->
</SCRIPT>
<Div id = "footer">
<P>
The largest and most comprehensive ordering platform in Shanghai. You can find all the restaurants, restaurants, and delicacies in Shanghai on your own. Book full-course services for restaurants and restaurants, enjoy VIP discounts, and get bonus points. Provides high-quality and affordable wedding banquet and group banquet services.
</P>
<P>
<
Href = "/commonhtml/friendtxt. aspx"> post by netizens </a> | <
Href = "/commonhtml/link. aspx"> Links </a> | <
Href = "/commonhtml/aboutwebsite. aspx"> about this site </a> | <
Href = "/commonhtml/job. aspx"> we are looking for talents. </a> | <
Href = "#1"> cooperation portal </a> | <a href = "#"
Onclick = "this. style. behavior = 'url (# default # homepage) '; this. setHomePage ('HTTP: // www.57575777.com/'); "> set homepage </a> | <a href =" # "onclick =" window. external. addFavorite ('HTTP: // www.57575777.com/', 'order food'); "> Add to favorites </a>
</P>
<P>
Copyright 2007 Shanghai ordering center www.57575777.com, all right reserved. Shanghai ICP Reserve No. 05062273
</P>
</Div>
</Body>
</Html>