jQuery ui map init

head.html

/* head */
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/shared/plugins/jquery.ui.map.js"></script>
<script type="text/javascript" src="/shared/plugins/jquery.ui.map.overlays.js"></script>
<script type="text/javascript" src="/shared/plugins/jquery.ui.map.extensions.js"></script>

/* style */
<style>
.ui-mobile-rendering>*{visibility:visible;}
#map_canvas {
  height: 600px;
  min-height:100%;
  width: 100%;
}
</style>

map.init.js

$("#map_canvas").gmap({"center": '42.89515,-85.81172', "zoom": 16, "callback": function() {
		var self = this;
		self.addMarker({'position': this.get('map').getCenter() });
		self.addShape('Circle', { 'strokeWeight': 2, 'strokeColor': "#008595", 'fillColor': "#008595", 'fillOpacity': 0.25, 'center': this.get('map').getCenter(), 'radius': 200, clickable: false });
}});//map canvas function