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 type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></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
	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 type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></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
	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 type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></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
	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 type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></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>

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 type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyCqCn84CgZN6o1Xc3P4dM657HIxkX3jzPY"></script>
<script type="text/javascript" src="assets/plugins/gmaps.js"></script>
<script type="text/javascript">
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>