Google Map API Tutorial: adding a control button to a Map using a GControl object

Today, Google has recorded 5900 pieces of my website maps, and Baidu has begun to include them ~ The Google map api tutorial I wrote today is about adding a control button on Google Maps and using GControl objects of Google Map APIs, use the initialize method to insert a div to the map, set the button position through new GControlPosition, and add this button through the addControl method of Gmap. The final result is as follows:

Implementation Method Principle Analysis

First, create a GControl prototype control and define its initialize method: Create a div and create the onclick event of the div. Finally, use gmap. getContainer (). appendChild (buttonDiv) is inserted into the map.
Finally, we define the getDefaultPosition method and use the GControlPosition object to set the specific position of the map where the button is located.

Google Map API code function control (){};
Control. prototype = new GControl ();
Control. prototype. initialize = function (gmap ){
Var buttonDiv = document. createElement ("div ");
ButtonDiv. id = "control ";
ButtonDiv. appendChild (document. createTextNode ("Clear punctuation "));
ButtonDiv. onclick = function (){
Gmap. clearOverlays ();
};
Gmap. getContainer (). appendChild (buttonDiv );
Return buttonDiv;
};

Control. prototype. getDefaultPosition = function (){
Return new GControlPosition (G_ANCHOR_TOP_LEFT, new GSize (510, 7 ));
};

Finally, we can use gmap. addControl (new control (); to add this button to the map.

Source: http://www.js8.in/564.html