MapFont - Google Map integration

by Dmitry Kosatchev

HTML

<!--style-->
<link href="//mapfont.org/css/mapfont.css" rel="stylesheet">

<h2>Google Map integration</h2>
<div>
	<div id="googlemap"></div>
</div>

<!--Google Maps API-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>

CSS

h2 {
	font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 100;
	margin-bottom: 10px;
	font-size: 25px;
	color: #1568b1;
}
#googlemap {
	height: 400px;
}

JavaScript

function gInit() {
	
	myOptions = {
		zoom: 14,
		center: new google.maps.LatLng(57.145, 65.523),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	},
	
	gMap = new google.maps.Map( document.getElementById( 'googlemap' ), myOptions ),
	
	point = new MarkerWithLabel({
		position: new google.maps.LatLng(57.145, 65.523),
		draggable: true,
		raiseOnDrag: true,
		icon: ' ',// Type "spacebar" to deactivate standard icon
		map: gMap,
		labelContent: '<i class="mf mf-map-marker-square mf-gmap-api"></i>',// Use standard MapFont classes with addition class mf-gmap-api
		labelAnchor: new google.maps.Point(57.145, 65.523)
	});
	
	point.setMap( gMap );
	
}

gInit();