WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

MAPS

  1. Home
  2. Shortcodes
  3. Maps

Grayscale Google Map

Show Code 
<!-- 
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" src="assets/plugins/gmaps.js"></script>
<script type="text/javascript">

	jQuery(document).ready(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>

Basic Google Map

Show Code 
<!-- 
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="map" 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(){

		/**
			@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>

Multiple Markers Google Map

Show Code 
<!-- 
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>

Panorama Google Map

Show Code 
<!-- 
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>