Best practices for user control of the Google Maps API v3

Question

I searched a lot for creating a custom control for Google Maps Api v3, and I found that others use it as Google Documentation . They create divs and style it with JS, which I think is not good practice. I think this violates the separation of the design principle of the problems, I mean writing CSS code inside JS or HTML.

Besides the question of best practice, I tried my code examples from the above link, but it does not work, it caused the following error:

( **Uncaught TypeError: Cannot read property 'zIndex' of undefined** ) .. 

Here is the code to set the [ Enlarge ] button.

HTML file

  <div id="control-div" class="control-div"> <div id= "control-ui" class="control-ui" title = "Click to set the map to Home"> <div id="control-text" class="control-text"> <p> Zoom </p> </div> </div> </div> 

CSS file

 .control-ui{ background-color: white; border-style: solid; border-width: 2px; cursor: pointer; text-align: center; width: 90px; height: 30px; } .control-text{ front-family: Arial,sans-serif; font-size: 12px; padding: 4px 4px; } 

JS file (Google map initiator)

  var controlDiv =$("#control-div"); var controlUI = $("#control-ui"); var controlText = $("#control-text"); controlUI.click(function() { map.setZoom(11); }); controlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv); 

Answer 1

The control is expected to be DOMNode, but you will provide a jQuery object.

This should work:

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

Answer 2

Of course, you want to add your custom logos and copyright to Google Maps using customizable controls. Otherwise, they most likely will not display properly, especially on mobile devices.

I found the official Google Maps JavaScript API user control example to be quite complex, and I never remember the position parameters. So, I created a tiny 1.72KB JS add-in in the GitHub library called CONTROL-JS that allows you to simply create your custom content as a string, for example var html = "<h1>Hi</h1>" , then pass its object named control , where each position is a method (the intellisense IDE reminds you of possible positions).

So, in your case, not having CONTROL-JS, just

 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}();