jQM Draw on Google Map

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=drawing&amp;.js"></script>
<div data-role="page">
    <div data-role="header">
        <h1>My Map</h1>
    </div>
    <div data-role="content">
        <div id="map"></div>

    </div>
    
    <div data-role="footer">
                <button data-icon="delete" id="removeDM" data-inline="true" class="dmButton" >Remove Drawing Manager</button>
        <button data-icon="plus" id="addDM" data-inline="true" class="dmButton" >Add Drawing Manager</button>
    </div>
</div>

CSS

#map{
    width: 100%;
    height: 300px;
    border: 2px solid black;
}

JavaScript

var map;
var elevator;
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(36.231719,-113.030911),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var dm = new google.maps.drawing.DrawingManager({map: map, polygonOptions: {editable:true,fillColor:'#777777',strokeColor:'#595959',strokeWeight:2}});


$(".dmButton").on("click", function(){
    var id = $(this).attr("id");
    if (id == "removeDM"){
        dm.setMap(null);
    } else {
        dm.setMap(map);
        dm.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);        
    }
});