Hello World

<head>
    <script src="//scribblemaps.com/api/js/"></script>

    <script>
        window.onload = function () {
            var sm = new ScribbleMapViewer(document.getElementById('ScribbleMap'));

            sm.draw.circle([42.30729368312444, -82.96805852527628], "45km")
                   .mouseover(function () {
                       this.setStyle({ "fillColor": "#0000FF" })
                   })
                   .mouseout(function () {
                       this.setStyle({ "fillColor": "#00FF00" })
                   })
                   .mousedown(function () {
                       this.setStyle({ "fillColor": "#FFFFFF" })
                   })
                   .mouseup(function () {
                       this.setStyle({ "fillColor": "#0000FF" })
                   })
                   .click(function () {
                       alert("You Clicked Me! " + this.getCoords())
                   });
        }
    </script>
</head>

<body>
    <div id="ScribbleMap" style="width: 730px; height: 500px"></div>
</body>
Open in new window