Version: 1.2
By: nileforest
eMail: support@nileforest.com
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to write us an email or contact us via our wrapbootstrap user page.
Support via eMail Go to WrapbootstrapThe Basic Structure contains:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mazel - Multiprapose Html template</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="nileforest">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--[if IE]>
<!-- Favicone Icon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="apple-touch-icon" href="img/favicon.png">
<!-- CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
<link href="css/plugin/jPushMenu.css" rel="stylesheet" type="text/css" />
<link href="css/plugin/animate.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
{ here links to required css & js files }
</head>
<body>
<!-- Preloader -->
<section id="preloader">
{ Content }
</section>
<!-- End Preloader -->
<!-- Sidemenu -->
<section class="side-menu">
{ Content }
</section>
<!-- End Sidemenu -->
<!-- Search menu -->
<section class="top-search-bar">
{ Content }
</section>
<!-- End Search menu -->
<!-- Site Wraper -->
<div class="wrapper">
<!-- HEADER ------------------------------------------------------------------------------>
<header class="header">
<div class="container">
<!-- logo -->
<div class="logo">
<a href="home.html">
<img class="l-black" src="img/logo-black.png" />
<img class="l-white" src="img/logo-white.png" />
<img class="l-color" src="img/logo-color.png" />
</a>
</div>
<!--End logo-->
<!-- Rightside Menu (Search, Cart, Bart icon) -->
<div class="side-menu-btn">
<ul>
<!-- Search Icon -->
<li class="">
<a class="right-icon search toggle-menu menu-top push-body"><i class="fa fa-search"></i></a>
</li>
<!-- End Search Icon -->
<!-- Cart Icon -->
<li class="">
<a href="shop-checkout.html" class="right-icon cart">
<i class="fa fa-shopping-cart"></i>
<span class="cart-notification">2</span>
</a>
<!-- Cart Dropdown List -->
<div class="cart-dropdown">
<ul class="cart-list">
<li class="light-color">
<a class="close-cart-list"><i class="fa fa-times-circle"></i></a>
<div class="media">
<a class="pull-left">
<img src="img/product/02.jpg" alt="fashion" /></a>
<div class="media-body">
<h6><a>Fashion Model New /01</a></h6>
<p>$399.00</p>
</div>
</div>
</li>
<li class="light-color">
<a class="close-cart-list"><i class="fa fa-times-circle"></i></a>
<div class="media">
<a class="pull-left">
<img src="img/product/06.jpg" alt="fashion" /></a>
<div class="media-body">
<h6><a>Fashion Model New /02</a></h6>
<p>$399.00</p>
</div>
</div>
</li>
</ul>
<p class="cart-sub-totle"><span class="pull-left">Cart Subtotal</span><span class="pull-right totle"><strong>$798.00</strong></span></p>
<div class="clearfix"></div>
<div class="cart-checkout-btn">
<a href="shop-checkout.html" class="btn btn-md btn-color-b form-full checkout">Checkout</a>
</div>
</div>
<!-- End Cart Dropdown List -->
</li>
<!-- End Cart Icon -->
<!--Sidebar Menu Icon-->
<li class="">
<a class="right-icon bar-icon toggle-menu menu-right push-body"><i class="fa fa-bars"></i></a>
</li>
<!-- End Sidebar Menu Icon-->
</ul>
</div>
<!-- End Rightside Menu -->
<!-- Navigation Menu -->
<nav class='navigation'>
<ul>
<li>
<a href="home.html">Home</a>
<!-- Nav Dropdown -->
<ul class="nav-dropdown">
<li class="nav-has-sub">
<a href="#">Multi Page</a>
<ul class="nav-sub-dropdown">
<li><a href="home.html">Default</a></li>
<li><a href="home-video.html">Intro Video</a></li>
<li><a href="home-youtube.html">Intro Youtube</a></li>
<li><a href="home-static.html">Intro Static</a></li>
<li><a href="home-agency-grid.html">Agency Grid</a></li>
<li><a href="home-agency-masonry.html">Agency Masonry</a></li>
<li><a href="home-fullwidth-slider.html">Fullwidth Slider</a></li>
<li><a href="home-text-rotator1.html">Text Rotator1</a></li>
<li><a href="home-text-rotator2.html">Text Rotator2</a></li>
<li><a href="home-personal.html">Personal</a></li>
<li><a href="home-fullscreen.html">Full Screen</a></li>
<li><a href="home-canvas-pattern.html">Canvas Pattern</a></li>
<li><a href="home-section-scroll.html">Page Section Scroll</a></li>
<li><a href="shop-2col.html">Shop</a></li>
<li><a href="home-coming-soon.html">Comming Soon</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="#">One Page</a>
<ul class="nav-sub-dropdown">
<li><a href="onepage.html">Default</a></li>
<li><a href="onepage-personal.html">Personal</a></li>
<li><a href="onepage-video.html">Video</a></li>
<li><a href="onepage-youtube.html">Youtube</a></li>
<li><a href="onepage-static.html">Static</a></li>
<li><a href="onepage-fullwidth-slider.html">Fullwidth</a></li>
<li><a href="onepage-text-rotator1.html">Text Rotator1</a></li>
<li><a href="onepage-text-rotator2.html">Text Rotator2</a></li>
<li><a href="onepage-canvas-pattern.html">Canvas Pattern</a></li>
</ul>
</li>
</ul>
<!-- End Nav Dropdown -->
</li>
<li class="nav-has-sub">
<a>Page</a>
<!-- Nav Dropdown -->
<ul class="nav-dropdown">
<li class="nav-has-sub">
<a href="#">About Us</a>
<ul class="nav-sub-dropdown">
<li><a href="about-1.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
<li><a href="about-3.html">About 3</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="#">Service</a>
<ul class="nav-sub-dropdown">
<li><a href="service-1.html">Service 1</a></li>
<li><a href="service-2.html">Service 2</a></li>
<li><a href="service-3.html">Service 3</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="#">Contact Us</a>
<ul class="nav-sub-dropdown">
<li><a href="contact-1.html">Contact 1</a></li>
<li><a href="contact-2.html">Contact 2</a></li>
<li><a href="contact-3.html">Contact 3</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="#">Faq</a>
<ul class="nav-sub-dropdown">
<li><a href="faq-1.html">Faq 1</a></li>
<li><a href="faq-2.html">Faq 2</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="#">Login / Register</a>
<ul class="nav-sub-dropdown">
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login-register.html">Login / Register</a></li>
</ul>
</li>
<li><a href="pricing.html">Pricing</a></li>
<li class="nav-has-sub">
<a href="#">404 Error</a>
<ul class="nav-sub-dropdown">
<li><a href="404-error-1.html">404 page1</a></li>
<li><a href="404-error-2.html">404 page2</a></li>
</ul>
</li>
<li><a href="sidebar-left.html">Sidebar Left</a></li>
<li><a href="sidebar-right.html">Sidebar Right</a></li>
<li><a href="blank-page.html">Blank Page</a></li>
</ul>
<!-- End Nav Dropdown-->
</li>
<li>
<a>Portfolio</a>
<!-- Nav Dropdown -->
<ul class="nav-dropdown">
<li class="nav-has-sub">
<a href='#'>Grid</a>
<ul class="nav-sub-dropdown">
<li><a href="portfolio-grid-2col.html">2 Columns</a></li>
<li><a href="portfolio-grid-2col-no_spacing.html">2 Columns no-Spacing</a></li>
<li><a href="portfolio-grid-3col.html">3 Columns</a></li>
<li><a href="portfolio-grid-3col-no_spacing.html">3 Columns no-Spacing</a></li>
<li><a href="portfolio-grid-4col.html">4 Columns</a></li>
<li><a href="portfolio-grid-4col-no_spacing.html">4 Columns no-Spacing</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="">Masonry</a>
<ul class="nav-sub-dropdown">
<li><a href="portfolio-masonry-2col.html">2 Columns</a></li>
<li><a href="portfolio-masonry-2col-no_spacing.html">2 Columns no-Spacing</a></li>
<li><a href="portfolio-masonry-3col.html">3 Columns</a></li>
<li><a href="portfolio-masonry-3col-no_spacing.html">3 Columns no-Spacing</a></li>
<li><a href="portfolio-masonry-4col.html">4 Columns</a></li>
<li><a href="portfolio-masonry-4col-no_spacing.html">4 Columns no-Spacing</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="">wide</a>
<ul class="nav-sub-dropdown">
<li><a href="portfolio-wide-grid.html">Grid</a></li>
<li><a href="portfolio-wide-grid-no_spacing.html">Grid no-Spacing</a></li>
<li><a href="portfolio-wide-masonry.html">Masonry</a></li>
<li><a href="portfolio-wide-masonry-no_spacing.html">Masonry no-Spacing</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href='#'>Classical</a>
<ul class="nav-sub-dropdown">
<li><a href="portfolio-classical-spacing.html">Spacing</a></li>
<li><a href="portfolio-classical-no_spacing.html">no-Spacing</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href='#'>Lightbox</a>
<ul class="nav-sub-dropdown">
<li><a href="portfolio-lightbox-grid.html">Grid</a></li>
<li><a href="portfolio-lightbox-masonry.html">Masonry</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="">Single</a>
<ul class="nav-sub-dropdown">
<li><a href="portfolio-single1.html">Single 1</a></li>
<li><a href="portfolio-single2.html">Single 2</a></li>
<li><a href="portfolio-single3.html">Single 3</a></li>
<li><a href="portfolio-single4.html">Single 4</a></li>
<li><a href="portfolio-single5-slider.html">Single 5 - Slider</a></li>
<li><a href="portfolio-single6-video.html">Single 6 - Video</a></li>
<li><a href="portfolio-single7-youtube.html">Single 7 - youtube</a></li>
<li><a href="portfolio-single8-vimeo.html">Single 8 - vimeo</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>Blog</a>
<!-- Nav Dropdown -->
<ul class="nav-dropdown">
<li class="nav-has-sub">
<a href=''>Grid</a>
<ul class="nav-sub-dropdown">
<li><a href="blog-grid-2col.html">2 Columns</a></li>
<li><a href="blog-grid-2col-sidebar.html">2 Columns - sidebar</a></li>
<li><a href="blog-grid-3col.html">3 Columns</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="">Masonry</a>
<ul class="nav-sub-dropdown">
<li><a href="blog-masonry-2col.html">2 Columns</a></li>
<li><a href="blog-masonry-2col-sidebar.html">2 Columns - sidebar</a></li>
<li><a href="blog-masonry-3col.html">3 Columns</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="">One Columns</a>
<ul class="nav-sub-dropdown">
<li><a href="blog-1col.html">no-sidebar</a></li>
<li><a href="blog-1col-sidebar.html">with sidebar</a></li>
</ul>
</li>
<li class="nav-has-sub">
<a href="">Blog Detail</a>
<ul class="nav-sub-dropdown">
<li><a href="blog-single-image-post.html">Image Post</a></li>
<li><a href="blog-single-slider-post.html">Slider Post</a></li>
<li><a href="blog-single-video-post.html">Video Post</a></li>
<li><a href="blog-single-audio-post.html">Audio Post</a></li>
<li><a href="blog-single-youtube-post.html">Youtube Post</a></li>
<li><a href="blog-single-vimeo-post.html">Vimeo Post</a></li>
<li><a href="blog-single-quote-post.html">Quote Post</a></li>
</ul>
</li>
</ul>
<!-- End Nav Dropdown -->
</li>
<li>
<a>Elements</a>
<!-- Nav Dropdown -->
<ul class="nav-dropdown">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
<!-- End Nav Dropdown -->
</li>
<li>
<a href="">Shop</a>
<!-- Nav Dropdown -->
<ul class="nav-dropdown">
<li class=""><a href="shop-2col.html">2 Columns</a></li>
<li class=""><a href="shop-3col.html">3 Columns</a></li>
<li class=""><a href="shop-4col.html">4 Columns</a></li>
<li class=""><a href="shop-left-sidebar.html">Left Sidebar</a></li>
<li class=""><a href="shop-right-sidebar.html">Right Sidebar</a></li>
<li class=""><a href="shop-detail.html">Shop Detail</a></li>
<li class=""><a href="shop-checkout.html">Checkout</a></li>
</ul>
<!-- End Nav Dropdown -->
</li>
</ul>
</nav>
<!--End Navigation Menu -->
</div>
</header>
<!-- End HEADER ------------------------------------------------------------------------------>
<!-- CONTENT --------------------------------------------------------------------------------->
<!-- Intro Section -->
<section class="intro">
{ Content }
</section>
<!-- End Intro Section -->
<!-- Content Section -->
<section class="ptb ptb-sm-80">
{ site content }
</section>
<!-- End Content Section -->
<!-- END CONTENT --------------------------------------------------------------------------------->
<!-- FOOTER -------------------------------------------------------------------------------------->
<footer class="footer">
{ Content }
</footer>
<!-- END FOOTER -------------------------------------------------------------------------------------->
</div>
<!-- End Site Wraper -->
<!-- JS -->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.flexslider.js" type="text/javascript"></script>
<script src="js/plugin/background-check.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fitvids.js" type="text/javascript"></script>
<script src="js/plugin/jquery.viewportchecker.js" type="text/javascript"></script>
<script src="js/plugin/jquery.stellar.min.js" type="text/javascript"></script>
<script src="js/plugin/wow.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="js/plugin/owl.carousel.min.js" type="text/javascript"></script>
<script src="js/plugin/isotope.pkgd.min.js" type="text/javascript"></script>
<script src="js/plugin/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/plugin/jPushMenu.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fs.tipper.min.js" type="text/javascript"></script>
<script src="js/plugin/mediaelement-and-player.min.js"></script>
<script src="js/theme.js" type="text/javascript"></script>
<script src="js/navigation.js" type="text/javascript"></script>
<script type="text/javascript">
// { Script }
</script>
</body>
</html>
All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
01. style.css - Specific theme settings
02. navigation.css - Navigation Menu settings
03. bootstrap.css - Responsive 12 Column Grid settings
04. jquery-ui.css - jQuery UI Css (Tab, Accordian, Price Slider, etc)
05. font-awesome.css - Theme Used Font Icon
06. ionicons.css - Theme Used Font Icon
07. animate.css - Object Animation Element
08. colorbox.css - Lightbox Popup
09. flexslider.css - Flex Slider settings
10. owl.carousel.css - Owl Slider settings
11. jPushMenu.css - Push Menu (Left, Right, Top, Bottom, Sidemenu) Setting
12. jquery.fs.tipper.css - Tooltip Setting
13. jquery.fullPage.css - Fullpage Section Scroll Setting
14. mediaelementplayer.css - Video & Audio player Setting
15. YTPlayer.css - Youtube Player Setting
16. smoothproducts.css - Product Zoom Setting (Example: Shop Detail Page)
/*
* BASIC STYLE
- General Style
- Headings Style
- Button Style
- Form Style
- Spacer Style
* HEADER
- Header Style
- Navigation Menu
- Right Side Menu Button (Search, Cart, Bar, etc)
* FOOTER
* ELEMENTS
- Team Box
- Skills Bar
- Accordion Tab
- Counter
- Service Box
- Pricing
- Testimonials
- Client Logo
- Icon
- Table
* GLOBAL STYLES
- Push Menu Style (Top, Bottom, Left, right)
- Contents (Body, Container, Section, etc)
- Contants (Portfolio, Blog, Shop etc)
- Parallax
- Slider
- Preloader
- Additional
*/
Edit Css Example
body {
line-height: 24px;
color: #323232;
font-size: 13px;
font-family: 'Raleway', sans-serif;
font-weight: 400;
letter-spacing: 1px;
}
.footer {
background-color: #f7f7f7;
color: #323232;
position: relative;
width: 100%;
display: block;
}
At theme directory "img" folder, you will see logo images theme. Basically you need three logo. To change logo, go the HTML file for example home.html and find "logo-black.png", "logo-white.png" and "logo-color.png". You should see code as below:
<!-- logo -->
<div class="logo">
<a href="home.html">
<img class="l-black" src="img/logo-black.png" />
<img class="l-white" src="img/logo-white.png" />
<img class="l-color" src="img/logo-color.png" />
</a>
</div>
<!--End logo-->
Find in The HTML page:
<!-- Replace Your Image Path To Change example "img/yourImagesName.jpg" -->
<!-- JPG File -->
<img src="img/yourImagesName.jpg" />
<!-- PNG File -->
<img src="img/yourImagesName.png" />
<!-- GIF File -->
<img src="img/yourImagesName.gif" />
Find this .bg-img1 Class Replace your Image Path in styles.css
.bg-img1 {
background-image: url("../img/full/01.jpg"); /* Change Your Images Path */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Add attribute to your images In HTML Page
<div style="background: url('img/full/01.jpg') no-repeat center center;"></div>
To give a container a parallax add the class="parallax"
Section Parallax class="parallax parallax-section1", or
Backgraund Image Parallax class="parallax parallax-background1".
<!-- Intro Section Parallax -->
<div class="parallax parallax-section1">
Your Content
</div>
<!-- Intro Background Image Parallax -->
<div class="parallax parallax-background1">
Your Content
</div>
<!-- Content Section Parallax -->
<section style="background-image: url('img/full/01.jpg');" data-stellar-background-ratio="0.5">
Your Content
</section>
Open the HTML file Change Your content
<!-- Change Hadding Title -->
<h1> Change Your Title </h1>
<h2> Change Your Title </h2>
<h3> Change Your Title </h3>
<h4> Change Your Title </h4>
<h5> Change Your Title </h5>
<h6> Change Your Title </h6>
<!-- Change Paragraph Content -->
<p> Change Your Content </p>
<!-- Change Anchor Link Tag Content -->
<a href="example-link.html"> example link content "See More" </a>
In this theme used font icons Set from fortAwesome and ionicons
Example
<!-- Change font Awesome Icon -->
<i class="fa fa-motorcycle"></i>
<!-- Change font Ionicons Icon -->
<i class="ion ion-ios-gear-outline"></i>
I used FitVids.js for responsive video. Please check the plugin github page to learn everything about the plugin.
Add or Edit Video, I used Plugin Player mediaelementjs
Example
<video class="bg-video" style="width: 100%;" width="" height="" id="player2" muted="" preload="auto" poster="media/youPosterImageName.jpg" autoplay="" loop="">
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="media/changeVideoFileName.mp4" />
<!-- WebM for Firefox 4 and Opera -->
<source type="video/webm" src="media/changeVideoFileName.webm" />
<!-- OGG for Firefox 3 -->
<source type="video/ogg" src="media/changeVideoFileName.ogv" />
</video>
Contact form will use php to send emails. So just open send-mail.php file. Change the current email 'user@yourdomain.com' to your email address. Your form is ready.
$to = 'user@yourdomain.com'; // Change your email address
You only need this HTML. Do all settings in "js/map.js".
<div id="map"></div>
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 15,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(21.170240, 72.831061), // Surat, Gujarat, India
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d3d3d3"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"color": "#808080"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#b3b3b3"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"weight": 1.8
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#d7d7d7"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ebebeb"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#a7a7a7"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#efefef"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#696969"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#737373"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#d6d6d6"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#dadada"
}
]
}
]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(21.170240, 72.831061),
map: map,
title: 'Nileforest',
icon: 'img/map-marker.png'
});
};
how to create location latitude and longitude? Click Here