var drawingManager;

        var selectedShape;

        var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];

        var selectedColor;

        var colorButtons = {};

        var MIN_ZOOM = 11;

        var MAX_ZOOM = 13;

​

        function clearSelection() {

            console.log('De-Select: ', selectedShape);

            if (selectedShape) {

                selectedShape.setEditable(false);

                selectedShape = null;

            }

        }

​

        function setSelection(shape) {

            clearSelection();

            selectedShape = shape;

            console.log('Select: ', selectedShape);

            shape.setEditable(true);

            selectColor(shape.get('fillColor') || shape.get('strokeColor'));

        }

​

        function deleteSelectedShape() {

            console.log('Delete: ', selectedShape);

            if (selectedShape) {

                selectedShape.setMap(null);

            }

        }

​

        function selectColor(color) {

            selectedColor = color;

            for (var i = 0; i < colors.length; ++i) {

                var currColor = colors[i];

                colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';

            }

​

            // Retrieves the current options from the drawing manager and replaces the

            // stroke or fill color as appropriate.

            var polylineOptions = drawingManager.get('polylineOptions');

            polylineOptions.strokeColor = color;

            drawingManager.set('polylineOptions', polylineOptions);

​

            var rectangleOptions = drawingManager.get('rectangleOptions');

            rectangleOptions.fillColor = color;

            drawingManager.set('rectangleOptions', rectangleOptions);

​

            var circleOptions = drawingManager.get('circleOptions');

            circleOptions.fillColor = color;

            drawingManager.set('circleOptions', circleOptions);

​

            var polygonOptions = drawingManager.get('polygonOptions');

            polygonOptions.fillColor = color;

            drawingManager.set('polygonOptions', polygonOptions);

        }

​

        function setSelectedShapeColor(color) {

            console.log('Select Shape: ', selectedShape);

            if (selectedShape) {

                if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {

                    selectedShape.set('strokeColor', color);

                } else {

                    selectedShape.set('fillColor', color);

                }

            }

        }

​

        function makeColorButton(color) {

            var button = document.createElement('span');

            button.className = 'color-button';

            button.style.backgroundColor = color;

            google.maps.event.addDomListener(button, 'click', function () {

                selectColor(color);

                setSelectedShapeColor(color);

            });

​

            return button;

        }

​

        function buildColorPalette() {

            var colorPalette = document.getElementById('color-palette');

            for (var i = 0; i < colors.length; ++i) {

                var currColor = colors[i];

                var colorButton = makeColorButton(currColor);

                colorPalette.appendChild(colorButton);

                colorButtons[currColor] = colorButton;

            }

            selectColor(colors[0]);

        }

​

        function getNormalizedCoord(coord, zoom) {

        //Amount of total tiles:

        // MIN_ZOOM    ->     1 tile

        // MIN_ZOOM+1  ->     2 tiles

        // MIN_ZOOM+2  ->     4 tiles

        var totalTiles = 1 << (zoom - MIN_ZOOM),

            y = coord.y,

            x = coord.x;

        var originx = 1 << (zoom-1),

            originy = 1 << (zoom-1);

        if(y < originx || y >= originx + totalTiles ||

            x < originx || x >= originx + totalTiles){

            return null;

        }

        x -= originx;

        y -= originy;

        return { x:x, y:y };

     }

​

​

​

        var map;

        var viewportBox;

​

        function initialize() {

            var siteMapOptions = {

        getTileUrl: function (coord, zoom) {

             var normalizedCoord = getNormalizedCoord(coord, zoom);

             if (normalizedCoord) {

                 return 'https://edocstorage.blob.core.windows.net/siteimages/2fa9fc72-23a7-41ed-86a1-b83a3ba04790/_siteTiles/tile_' + 

                        (zoom-MIN_ZOOM) + '_' + 

                        normalizedCoord.x + '-' + 

                        normalizedCoord.y + '.png';

             } else {

                 return 'content/tilecutter/empty.jpg';

             }

        },

        tileSize: new google.maps.Size(256, 256),

        maxZoom: MAX_ZOOM,

        minZoom: MIN_ZOOM,

        radius: 1738000,

        name: "Site Plan"

    }; 

            var siteMapType = new google.maps.ImageMapType(siteMapOptions);

            map = new google.maps.Map(document.getElementById('map'), {

                zoom: MIN_ZOOM,

                center: new google.maps.LatLng(0, 0),

                //mapTypeId: google.maps.MapTypeId.ROADMAP,

                disableDefaultUI: true,

                zoomControl: true,

                streetViewControl: false,

                mapTypeControlOptions: {

                    mapTypeIds: ["siteMap"]

                }

            });

            map.mapTypes.set('siteMap', siteMapType);

            map.setMapTypeId('siteMap');

            var polyOptions = {

                strokeWeight: 0,

                fillOpacity: 0.45,

                editable: true

            };

            // Creates a drawing manager attached to the map that allows the user to draw

            // markers, lines, and shapes.

            drawingManager = new google.maps.drawing.DrawingManager({

                drawingMode: google.maps.drawing.OverlayType.POLYGON,

                markerOptions: {

                    draggable: true

                },

                polylineOptions: {

                    editable: true

                },

                rectangleOptions: polyOptions,

                circleOptions: polyOptions,

                polygonOptions: polyOptions,

                map: map,

               drawingControlOptions: {

                  position: google.maps.ControlPosition.TOP_RIGHT,

                  drawingModes: [

                    google.maps.drawing.OverlayType.MARKER,

                    google.maps.drawing.OverlayType.POLYGON

                  ]

                }

            });

​

            google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {

                console.log('Drawing Complete: ', e);

                if (e.type != google.maps.drawing.OverlayType.MARKER) {

                    // Switch back to non-drawing mode after drawing a shape.

                    drawingManager.setDrawingMode(null);

                    prompt('Url');

                    // Add an event listener that selects the newly-drawn shape when the user

                    // mouses down on it.

                    var newShape = e.overlay;

                    newShape.type = e.type;

                    google.maps.event.addListener(newShape, 'click', function () {

                        setSelection(newShape);

                    });

                    setSelection(newShape);

                }

            });

​

            // Clear the current selection when the drawing mode is changed, or when the

            // map is clicked.

            google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);

            google.maps.event.addListener(map, 'click', clearSelection);

            google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

​

            buildColorPalette();

        }

        google.maps.event.addDomListener(window, 'load', initialize);