Google Maps

<!-- 
Available heights
	height-100
	height-150
	height-200
	height-250
	height-300
	height-350
	height-400
	height-450
	height-500
	height-550
	height-600
-->
<div id="map2" class="height-300 grayscale"></div>


<!-- 
	GMAP.JS 
	http://hpneo.github.io/gmaps/
-->
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

	jQuery(document).ready(function(){
		loadScript(plugin_path + "gmaps.js", function(){

			/**
				@BASIC GOOGLE MAP
			**/
			var map2 = new GMaps({
				div: '#map2',
				lat: -12.043333,
				lng: -77.028333,
				scrollwheel: false
			});

			var marker = map2.addMarker({
				lat: -12.043333,
				lng: -77.028333,
				title: 'Company, Inc.'
			});

		});
	});

</script>

<!-- 
Available heights
	height-100
	height-150
	height-200
	height-250
	height-300
	height-350
	height-400
	height-450
	height-500
	height-550
	height-600
-->
<div id="map2" class="height-300"></div>


<!-- 
	GMAP.JS 
	http://hpneo.github.io/gmaps/
-->
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

	jQuery(document).ready(function(){
		loadScript(plugin_path + "gmaps.js", function(){

			/**
				@BASIC GOOGLE MAP
			**/
			var map = new GMaps({
				div: '#map',
				lat: -12.043333,
				lng: -77.028333
			});

			var marker = map.addMarker({
				lat: -12.043333,
				lng: -77.028333,
				title: 'Company, Inc.'
			});

		});
	});

</script>

<!-- 
Available heights
	height-100
	height-150
	height-200
	height-250
	height-300
	height-350
	height-400
	height-450
	height-500
	height-550
	height-600
-->
<div id="map3" class="height-300 grayscale"></div>


<!-- 
	GMAP.JS 
	http://hpneo.github.io/gmaps/
-->
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmaps.js"></script>
<script type="text/javascript">

	jQuery(document).ready(function(){

		/**
			@MULTIPLE MARKERS GOOGLE MAP
		**/
		map3 = new GMaps({
			div: '#map3',
			lat: -12.043333,
			lng: -77.028333
		});
		
		// Marker 1
		map3.addMarker({
			lat: -12.043333,
			lng: -77.03,
			title: 'Lima',
			details: {
			database_id: 42,
			author: 'HPNeo'
			},
			click: function(e){
				if(console.log) {
					console.log(e);
				}
				alert('You clicked in this marker');
			}
		});
		
		// Marker 2
		map3.addMarker({
			lat: -12.042,
			lng: -77.028333,
			title: 'Marker with InfoWindow',
			infoWindow: {
				content: '<p>HTML Content</p>'
			}
		});

	});

</script>

<!-- 
Available heights
	height-100
	height-150
	height-200
	height-250
	height-300
	height-350
	height-400
	height-450
	height-500
	height-550
	height-600
-->
<div id="panorama" class="height-300 grayscale"></div>


<!-- 
	GMAP.JS 
	http://hpneo.github.io/gmaps/
-->
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmaps.js"></script>
<script type="text/javascript">

	jQuery(document).ready(function(){

		/**
			@PANORAMA GOOGLE MAP
		**/
		var panorama = GMaps.createPanorama({
			el: '#panorama',
			lat: 42.3455,
			lng: -71.0983
		});

	});

</script>