Google Map To Canvas

Google Map To Canvas

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="imp-modal modal" role="dialog" id="sidemenu378">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<div class="row">
					<div class="col-md-12">
						Loading Google Maps into FabricJS
					</div>
				</div>
			</div>
            <div class="modal-body">
				<div class="row">
					<div>
                        <div>Canvas A</div>
                        <div>
                        <canvas id="a"></canvas></div>
                        <div>Navigate on the mapping layer below then click the button to set the canvas background above. <button id="btn-set-bkg" type="button">Set Canvas Background</button>
                        <div id='mapDiv' style="position:relative; width:600px; height:400px;"></div> 
                        </div>
					</div>
				</div>
			</div>
            <div class="modal-footer">
				<div class="row">
					<div class="col-md-12">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

canvas {
    border: 1px solid #999;
}

.imp-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index:1002;
  display:block;
    background-color: #FFF;
}

.imp-modal .modal-header {
  position: absolute;
  top: 0;
  height: 20px;
  width: 100%;
    background-color: #f0f0f0;
}
.imp-modal .modal-body {
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 100%;
  overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}
.imp-modal .modal-footer {
  position: absolute;
  bottom: 0;
  height: 20px;
  width: 100%;
    background-color: #f0f0f0;
}
.imp-modal .modal-content,
.imp-modal .modal-dialog {
  height: 100%;
  width: 70%;
}
.imp-modal .close {
  opacity: 1;
}

JavaScript

var zoom = 16;
var format = 'png';
var imagerySet = 'r';
var lat = 40.714728;
var lng = -73.998672;
var map = null;
var height = 400;
var width = 600;

$(function(){ 
    console.log('window loaded');
    GetMap(); 
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = new fabric.Canvas('a', {
			backgroundColor: '#FFFFCC',
			selection: false,
			isDrawingMode: true
		});
		
		canvas.canvas_h = height;
		canvas.canvas_w = width;
		canvas.freeDrawingBrush.width = 2;
		canvas.freeDrawingBrush.color = '#005E7A';
		canvas.setHeight(canvas.canvas_h).setWidth(canvas.canvas_w);

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});


/*---------------------------
 * Canvas Prototype
 *----------------------------*/
$.extend(fabric.Canvas.prototype, {
    
    /**
	 * Load Canvas Background
	 */
	loadBackground: function(img){
		var self = this;
			
		//NOTE: in order for the aspect ratio to be correct you must 
		//      first set the height and width of the canvas to the image size 
		//		then resize the canvas itself.
		self.setHeight(img.height).setWidth(img.width);
		
		
		//Set object_scale_factor based on the smaller of the height or width
		self.object_scale_factor = img.height > img.width? img.width / 450 : img.height / 450;
		self.font_size = self.font_size*self.object_scale_factor;
		
		self.setBackgroundImage(img.src, self.renderAll.bind(self), {
            originX: 'left',
            originY: 'top',
            left: 0,
		    top: 0,
		    scaleY: self.height / img.height,
		    scaleX: self.width / img.width
		    //scaleY: self.height / img.height,
		    //scaleX: self.width / img.width
		});
	}
});

// ADD YOUR CODE HERE
// clear canvas
canvas.clear();



function GetMap()
{   
    map =  new google.maps.Map(document.getElementById('mapDiv'), {
        zoom: zoom,
        center: new...