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

	h-100

	h-150

	h-200

	h-250

	h-300

	h-350

	h-400

	h-450

	h-500

	h-550

	h-600

-->

<div id="map2" class="h-300 grayscale"></div>





<!-- 

	GMAP.JS 

	http://hpneo.github.io/gmaps/

-->

<script src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></script>

<script src="assets/plugins/gmaps.js"></script>

<script>



	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

	h-100

	h-150

	h-200

	h-250

	h-300

	h-350

	h-400

	h-450

	h-500

	h-550

	h-600

-->

<div id="map" class="h-300 grayscale"></div>





<!-- 

	GMAP.JS 

	http://hpneo.github.io/gmaps/

-->

<script src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></script>

<script src="assets/plugins/gmaps.js"></script>

<script>



	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

	h-100

	h-150

	h-200

	h-250

	h-300

	h-350

	h-400

	h-450

	h-500

	h-550

	h-600

-->

<div id="map3" class="h-300 grayscale"></div>





<!-- 

	GMAP.JS 

	http://hpneo.github.io/gmaps/

-->

<script src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></script>

<script src="assets/plugins/gmaps.js"></script>

<script>



	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

	h-100

	h-150

	h-200

	h-250

	h-300

	h-350

	h-400

	h-450

	h-500

	h-550

	h-600

-->

<div id="panorama" class="h-300 grayscale"></div>





<!-- 

	GMAP.JS 

	http://hpneo.github.io/gmaps/

-->

<script src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></script>

<script src="assets/plugins/gmaps.js"></script>

<script>



	jQuery(document).ready(function(){



		/**

			@PANORAMA GOOGLE MAP

		**/

		var panorama = GMaps.createPanorama({

			el: '#panorama',

			lat: 42.3455,

			lng: -71.0983

		});



	});



</script>

Fullscreen Google Map

FULLSCREEN MAP
Show Code 

<!-- HTML CODE -->

<a id="togglemap" href="#" class="btn btn-default btn-sm m-0"><i class="fa fa-map-o"></i> MAP</a>



<!-- FULLSCREEN MAP -->

<div id="map-fullscreen">

	<button><i class="fa fa-remove"></i> </button>

	<div id="gmap-init"></div>

</div><!-- /FULLSCREEN MAP -->







<!-- 

	GMAP.JS 

	http://hpneo.github.io/gmaps/

-->

<script src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></script>

<script src="assets/plugins/gmaps.js"></script>

<script>

jQuery("#togglemap").bind('click', function(e) {

	e.preventDefault();



	jQuery("#map-fullscreen").show(0, function() {



		/**

			@BASIC GOOGLE MAP

		**/

		var map = new GMaps({

			div: '#gmap-init',

			lat: -12.043333,

			lng: -77.028333

		});



		var marker = map.addMarker({

			lat: -12.043333,

			lng: -77.028333,

			title: 'Company, Inc.'

		});



	});



	jQuery("#map-fullscreen>button").bind('click', function(e) {

		e.preventDefault();

		jQuery("#map-fullscreen").hide();

	});



</script>