Add custom controls to Google Maps with ease.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
control.js
control.min.js
index.html
screenshot.jpg
style.css

README.md

control.js

Synopsis

Add custom controls to Google Maps with ease.

Custom copyrights and logos should be added to Google Maps via custom controls vs simple CSS positioning.

Control.js is an add-on JavaScript library of custom control methods with IDE intellisense/auto-complete showing control positioning to Google Maps via the Javascript API.

Code Example

//Apply CSS Id's and Classes as normal
var html0 = '<a href="http://www.rack.pub"><img src="http://www.rack.pub/favicons/android-chrome-192x192.png" alt="logo" class="logo"></a>';
var html1 = '<a href="http://www.rack.pub" class="copyright">&#169; My Copyright</a>';

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

screenshot

## Motivation

The Official Google Maps JavaScript API custom controls example example is not easy and the number of control positions are difficult to remember.

The official examples use JavaScript to dynamically create HTML and CSS which are then passed to a constructor function. This add-on makes adding custom controls easy.

Installation

🏁 Load via rack.pub's global CDN

<script src="https://rack.pub/control.min.js"></script>

🚀 Embed control.min.js in your javascript when putting in production for best page loading performance.

API Reference

Simply hand one of the methods a valid HTML string as an argument. CSS can be inline or referenced as usual. Using intellesense in your IDE is recommended as it remonds you of the possible location options for your new custom control.

    control.topCenter.add(html)
    control.topLeft.add(html)
    control.topRight.add(html)
    control.leftTop.add(html)
    control.rightTop.add(html)
    control.leftCenter.add(html)
    control.rightCenter.add(html)
    control.leftBottom.add(html)
    control.rightBottom.add(html)
    control.bottomCenter.add(html)
    control.bottomLeft.add(html)
    control.bottomRight.add(html)

Contributors

Ron Royston

License

Ron Royston, https://rack.pub, MIT License