javascrip--inserting a map

Specific steps: 1, Baidu Search: Baidu Map generator

2. Open the first one, copy the URL http://api.map.baidu.com/lbsapi/creatmap/index.html, open
3, the page is displayed as

4, according to your request to modify

5. Finally get the code, and then copy the code.

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; charset=gb2312"/><meta name="keywords"Content="Baidu Map, Baidu Map API, Baidu Map Customization Tool, Baidu map WYSIWYG tools"/><meta name="Description"Content="Baidu Map API custom map to help users generate Baidu map under the visual Operation"/><title> Baidu Map API custom map </title><!--reference Baidu map Api--><style type="Text/css">Html,body{margin:0;p adding:0;} . iw_poi_title {color: #CC5522; font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-Space:nowrap}. iw_poi_content {font:12px Arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap: Break-Word}</style><script type="Text/javascript"Src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>"Width:400px;height:300px;border: #ccc solid 1px;"Id="ditucontent"></div></body><script type="Text/javascript">//To Create and initialize a map function:function Initmap () {createmap ();//Create a mapSetmapevent ();//Set Map EventsAddmapcontrol ();//adding controls to a mapAddmarker ();//add marker to your map    }        //To Create a map function:function Createmap () {varMap =NewBmap.map ("ditucontent");//Create a map in the Baidu map container        varPoint =NewBmap.point (118.064837,36.811534);//Define a center point coordinateMap.centerandzoom (Point, -);//set the center point and coordinates of the map and display the map in the map containerWindow.map = map;//store the map variable in the global    }        //Map Event Settings function:function Setmapevent () {map.enabledragging ();//Enable map drag events, enabled by default (can not be written)Map.enablescrollwheelzoom ();//Enable map wheel zoom in and zoom outMap.enabledoubleclickzoom ();//enable mouse double-click to enlarge, enabled by default (can not write)Map.enablekeyboard ();//enable keyboard to move the map up or down    }        //Add a function to the map control:function Addmapcontrol () {//Add a zoom control to a map    varCtrl_nav =NewBmap.navigationcontrol ({anchor:bmap_anchor_top_left,type:bmap_navigation_control_large});        Map.addcontrol (Ctrl_nav); //add a thumbnail control to your map    varCtrl_ove =NewBmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:1});        Map.addcontrol (Ctrl_ove); //Add a scale bar control to a map    varCtrl_sca =NewBmap.scalecontrol ({anchor:bmap_anchor_bottom_left});    Map.addcontrol (CTRL_SCA); }        //Callout Points Group    varMarkerarr = [{title:"Zibo Han Enterprise", Content:"0533-3113118", point:"118.063602|36.811412", IsOpen:0, Icon:{w: +H: +L0T:0X:6Lb:5}}         ]; //Create markerfunction Addmarker () { for(varI=0; i<markerarr.length;i++){            varJSON =Markerarr[i]; varP0 = Json.point.split ("|")[0]; varP1 = Json.point.split ("|")[1]; varPoint =NewBmap.point (P0,P1); varIconimg =Createicon (Json.icon); varMarker =NewBmap.marker (point,{icon:iconimg}); varIW =Createinfowindow (i); varLabel =NewBmap.label (json.title,{"Offset":NewBmap.size (json.icon.lb-json.icon.x+Ten,- -)});            Marker.setlabel (label);            Map.addoverlay (marker); Label.setstyle ({bordercolor:"#808080", Color:"#333", cursor:"Pointer"            }); (function () {varindex =i; var_IW =Createinfowindow (i); var_marker =marker; _marker.addeventlistener ("Click", function () { This. Openinfowindow (_IW);                }); _iw.addeventlistener ("Open", function () {_marker.getlabel (). Hide (); }) _iw.addeventlistener ("Close", function () {_marker.getlabel (). Show (); }) Label.addeventlistener ("Click", function () {_marker.openinfowindow (_IW); })                if(!!Json.isopen)                    {label.hide ();                _marker.openinfowindow (_IW); }            })()        }    }    //Create Infowindowfunction Createinfowindow (i) {varJSON =Markerarr[i]; varIW =NewBmap.infowindow ("<b class= ' iw_poi_title ' title= '"+ Json.title +"' >"+ Json.title +"</b><div class= ' iw_poi_content ' >"+json.content+"</div>"); returnIW; }    //Create an iconfunction Createicon (JSON) {varicon =NewBmap.icon ("Http://app.baidu.com/map/images/us_mk_icon.png",NewBmap.size (Json.w,json.h), {imageoffset:NewBmap.size (-JSON.L,-JSON.T), Infowindowoffset:NewBmap.size (json.lb+5,1), offset:Newbmap.size (Json.x,json.h)}) returnicon; } initmap ();//Creating and initializing maps</script>
javascrip--inserting a map