javascript – Best Practice for custom control of Google Maps API v3

javascript – Best Practice for custom control of Google Maps API v3

A control is expected to be a DOMNode, but you supply a jQuery-object.

This should work:

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);

You certainly want to add your custom logos 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, e.g., 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 IDEs
    control.topCenter.add(html);
};

enter

/*
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){caseTOP_CENTER:map.controls[google.maps.ControlPosition.TOP_CENTER].push(t);break;caseTOP_LEFT:map.controls[google.maps.ControlPosition.TOP_LEFT].push(t);break;caseTOP_RIGHT:map.controls[google.maps.ControlPosition.TOP_RIGHT].push(t);break;caseLEFT_TOP:map.controls[google.maps.ControlPosition.LEFT_TOP].push(t);break;caseRIGHT_TOP:map.controls[google.maps.ControlPosition.RIGHT_TOP].push(t);break;caseLEFT_CENTER:map.controls[google.maps.ControlPosition.LEFT_CENTER].push(t);break;caseRIGHT_CENTER:map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(t);break;caseLEFT_BOTTOM:map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(t);break;caseRIGHT_BOTTOM:map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t);break;caseBOTTOM_CENTER:map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(t);break;caseBOTTOM_LEFT:map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(t);break;caseBOTTOM_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}();

javascript – Best Practice for custom control of Google Maps API v3

Leave a Reply

Your email address will not be published.