Customize your Google map (preparation) step by step)

The map function is useful on many websites, so you want to implement the map search function on your website.

 

1) to apply for an API key for Google Maps, you must register your Gmail account before applying. The URL is as follows:

Http://code.google.com/intl/zh-CN/apis/maps/signup.html

 

2) copy a piece of JavaScript code about the website API key.

<SCRIPT src = "http://maps.google.com/maps? File = API & amp; V = 2 & amp; sensor = true or false & amp; Key = abqia "type =" text/JavaScript "> </SCRIPT>

Remember to change sensor = true or false to sensor = true or sensor = false. Otherwise, an error will occur when you upload data to the server.

 

3) create a map using the Javascript language.

VaR map; <br/> function setupmap () <br/>{< br/> If (gbrowseriscompatible ()) {// The method used to verify whether the browser supports gmap2 object verification is gbrowseriscompatible. The returned Boolean value is used to determine whether the browser meets the requirements for running Google Maps. If the returned result is true, the browser can view Google Maps. If the returned result is no, no. <Br/> map = new gmap2 (document. getelementbyid ("map1"); // create a GMAP object. The gmap2 constructor structure is as follows: var newmapobj = new gmap2 (container: dom_div, opts: options ); the last parameter in the gmap2 constructor is of the gmapoptions type, which contains the following four attributes. Size: set the size of the map container. The value type is gsize. Maptypes: Set the gmaptype array <br/> map. setcenter (New glatlng (31.7, 131.2), 10); // setcenter sets the map center, which is generally required. The GMAP object is identified as loaded only after the map center is set. Returns true using the isloaded method; otherwise, false is returned. <br/>}< br/> </SCRIPT> <br/> <Div id = "map1" style = "width: 600px; height: 400px "> </div> <! -- To create a GMAP object, you must first have a container element on the webpage as the basis for creation. Normally, this container element is a div element --> <br/> </body>

 

In this case, only a map is displayed without any other controls. What should I do if I want to scale it down? Let's add the beautification step by step.

// There are three control methods for gmap2: addcontrol, removecontrol, and Dom element on the web page, the name of getcontainer. <Br/> // addcontrol (control, position): adds a control based on the given position. all these Google Maps controls inherit from the gcontrol class and implement the gcontrol interface. Google Maps provides eight controls <br/> // map. addcontrol (New gsmallmapcontrol (); zoom and Pan button control <br/> map. addcontrol (New glargemapcontrol (); // zoom and Pan button and slider Control <br/> // map. addcontrol (New gsmallzoomcontrol (); zoom button control <br/> map. addcontrol (New gscalecontrol (); // map scale control <br/> // map. addcontrol (New gmaptypecontrol (); // map type Control <br/> map. addcontrol (New gmenumaptypecontrol (); // drop-down menu map Type Control <br/> // map. addcontrol (New ghierarchicalmaptypecontrol (); Nested map Type Control <br/> map. addcontrol (New goverviewmapcontrol (); // eagleeye Control <br/> // removecontrol (Control): deletes a control. the control object is input here. <Br/> // getcontainer (): The container for obtaining the map. Generally, the map container is the DOM element Div created by the gmap2 object on the webpage. <Br/>

 

The control is available, but I want to perform interactive operations. If you want to scale the mouse when moving the scroll wheel, what should I do? Add some attributes to our Google map.

Map. enabledragging (); // you can drag a map. <Br/> // map. disabledragging (); Do not drag a map. <Br/> // map. draggingenabled () returns the Boolean value of whether the map can be dragged. If you can drag it, "true" is returned; otherwise, "false" is returned ". <Br/> map. enableinfowindow (); // The map information window is displayed. <Br/> // map. disableinfowindow (); the map information window is disabled. <Br/> // map. infographic wenabled (): returns the Boolean value displayed in the Map Information Window. If yes, "true" is returned; otherwise, "false" is returned ". This method is usually used for testing. <Br/> map. enabledoubleclickzoom (); // you can double-click zoom to zoom in the map, right-click to zoom in, and right-click to zoom out (default) <br/> // map. disabledoubleclickzoom (); double-click zoom prohibited <br/> // map. doubleclickzoomenabled (); returns whether the map can be scaled by double-clicking a Boolean value. If you can double-click zoom, "true" is returned; otherwise, "false" is returned ". <Br/> map. enablecontinuouszoom (); // You can smoothly scale the map. <Br/> // map. disablecontinuouszoom (); continuous smooth scaling is prohibited. <Br/> // map. continuouszoomenabled (); returns the Boolean value that can be smoothly scaled continuously on the map. If continuous and smooth scaling is possible, "true" is returned; otherwise, "false" is returned ". <Br/> map. enablescrollwheelzoom (); // you can adjust the zoom of a map by using the scroll wheel. To facilitate user operations, double-click scaling and scroll wheel scaling are usually enabled. This is a good method <br/> // map. disablescrollsheelzoom (); do not allow the mouse wheel to control the map zoom. <Br/> // map. scrollwheelzoomenabled (); returns whether the map Zoom can be controlled by the scroll wheel. If you can zoom in and out with the scroll wheel, "true" is returned; otherwise, "false" is returned ".

 

What if I want to add a flag above and add some prompt information to the tag?VaR markobj = new gmarker (New glatlng (31.7, 131.2), {draggable: true}); </P> <p> gevent. addlistener (markobj, "Mouseover", function () {</P> <p> markobj. openinfowindowhtml ("Hello World ~ "); </P> <p >}); </P> <p> map. addoverlay (markobj); </P> <p> // places where Google Maps attracts users, in addition to precise satellite images, there are also landmarks. The location information is usually displayed in the information window. The Information Window not only displays text, but also HTML elements and displays text, images, and other data in the form of web pages. In addition, the information window provides nine operation information window methods for GMAP objects. Among the nine methods, all options parameters are ginfowindowoptions class objects. The APIs of the previous version of this class provide seven attributes, and the current version adds three attributes, there are 10 attributes in total. the following describes the nine information window methods one by one. <Br/> // openinfowindow (point, node, options): opens the information window at the specified point. You can add some DOM elements to the Information Window, such as map. openinfowindow (Map. getcenter (), document. createtextnode ("Hello World ~ "); <Br/> // openinfowindowhtml (point, HTML, options): opens the information window at the specified point. You can add some HTML elements to the Information Window, such as map. openinfowindowhtml (map. getcenter (), "text HTML one </B> text HTML two </B>"); <br/> // openinfoworkflow wtabs (point, tabarray, options ): open the tag information window at the given point. You can add some DOM elements to the Information Window. <Br/> // openinfowindowtabshtml (point, tabs, options): Open the tag information window at the specified point. You can add some HTML elements to the Information Window. Options is the ginfowindowoptions option. <Br/> // showmapblowup (point, options): opens an information window at a given point, which contains a field of view image around the point. Similar to the eagleeye function, however, the image in the information window is the same as the current map location and scaling ratio, without a full map like eagleeye. In addition, there are two map types in the Information Window: The Map button and the SAT button. <Br/> gevent. addlistener (markobj, "Mouseover", function () {<br/> markobj. showmapblowup (New glatlng (32.5500,-118.5032); <br/>}); <br/> // updateinfowindow (tabs, update): update information window. <Br/> // updatecurrenttab (modifier, update): updates the current tag window. <Br/> // closeinfowindow (): Close the information window. <Br/> // getinfowindow (): gets the information window object. If there is no information window on the map, a new information window is created when this method is called, but not displayed. </P> <p> // required Parameter options in methods such as openinfowindowhtml () and openinfo20.wtabs (). The parameter type is ginfowindowoptions, this parameter defines the status of the information window, which has no constructor. The ginfowindowoptions method is described as follows. <Br/> // selectedtab: The information label box selected based on the input value. The sequence number starts from 0. <Br/> // maxwidth: defines the width of the Information Window, in pixels. <Br/> // nocloseonclick: defines whether to close the information window after clicking on the map. The default value is false, indicating that the information window is closed. If it is set to true, the information window is not closed when you click somewhere else on the map. <Br/> // onopenfn: defines a callback function entry. This function is called when the information window is opened and all content appears. <Br/> // onclosefn: defines a callback function entry. This function is called when the information window is closed. <Br/> // zoomlevel: sets the zoom ratio of the enlarged map in the information window. It is used to set the showmapblowup () method. <Br/> // maptype: specifies the type of the enlarged map in the information window. It is used to set the showmapblowup () method. <Br/> // maxcontent: The content displayed when the information window is maximized. It can be an HTML Dom element. <Br/> // maxtitle: The title content displayed when the information window is maximized. It can be plain text or html dom elements. <Br/> // pixeloffset: the return value of this method is of the gsize type (this type is described in detail in Section 4.3.6 of this chapter, the Unit is pixel. </P> <p>