How to add toggle button on google map api v3?

Question

I found library: geometrycontrols that is written to api v2 and allows adding buttons. How to make a toggle button to add a marker in the api v3? I have initiated map etc.

Answer 1

You can add an arbitrary structured <div> to the map:

var control = document.createElement('div'); 

You add a listener to this control or to its children, eg:

google.maps.event.addDomListener(control, 'click', function() {...}); 

You position the control on the map:

control.index = 1;   
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);  

For details, see:

Custom Controls

Example

Answer 2

I don't think you need to add any listener to the map at all. Just add it to the HTML element(s) in your custom control.

You certainly want to add your custom logos and buttons and copyrights to Google Maps via custom controls. Otherwise, they will likely not render properly especially on mobile devices.

I found the official Google Maps JavaScript API Custom Control example to be rather complicated and I can never remember the position options. So, I created a tiny 1.72 KB add-on JS on GitHub library called CONTROL-JS that enables you to simply create your custom content as a string, eg, var html = "<h1>Hi</h1>" then pass it to an object called control where every position is a method (IDE intellisense reminds you of the possible positions).

So, in your case, unsing CONTROL-JS just do

var html = '<p id="control-text"> Zoom </p>'

//Global method that is fired when the API is loaded and ready
function initMap () {
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    //intelleSense/Auto-complete works on IDE's
    control.topCenter.add(html);
};

 /* control.js v0.1 - Add custom controls to Google Maps with ease Created by Ron Royston, www.rack.pub https://github.com/rhroyston/control License: MIT control.topCenter.add.(html) */ var control=function(){function o(o){this.add=function(T){var t=document.createElement("div");if(t.innerHTML=T,o)switch(o){case"TOP_CENTER":map.controls[google.maps.ControlPosition.TOP_CENTER].push(t);break;case"TOP_LEFT":map.controls[google.maps.ControlPosition.TOP_LEFT].push(t);break;case"TOP_RIGHT":map.controls[google.maps.ControlPosition.TOP_RIGHT].push(t);break;case"LEFT_TOP":map.controls[google.maps.ControlPosition.LEFT_TOP].push(t);break;case"RIGHT_TOP":map.controls[google.maps.ControlPosition.RIGHT_TOP].push(t);break;case"LEFT_CENTER":map.controls[google.maps.ControlPosition.LEFT_CENTER].push(t);break;case"RIGHT_CENTER":map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(t);break;case"LEFT_BOTTOM":map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(t);break;case"RIGHT_BOTTOM":map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t);break;case"BOTTOM_CENTER":map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(t);break;case"BOTTOM_LEFT":map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(t);break;case"BOTTOM_RIGHT":map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(t)}else console.log("err")}}var T={};return T.topCenter=new o("TOP_CENTER"),T.topLeft=new o("TOP_LEFT"),T.topRight=new o("TOP_RIGHT"),T.leftTop=new o("LEFT_TOP"),T.rightTop=new o("RIGHT_TOP"),T.leftCenter=new o("LEFT_CENTER"),T.rightCenter=new o("RIGHT_CENTER"),T.leftBottom=new o("LEFT_BOTTOM"),T.rightBottom=new o("RIGHT_BOTTOM"),T.bottomCenter=new o("BOTTOM_CENTER"),T.bottomLeft=new o("BOTTOM_LEFT"),T.bottomRight=new o("BOTTOM_RIGHT"),T}();