File: /home/vmasmheia229/domains/nslpguide.com/html/googlemaps.html
<!DOCTYPE html>
<!--[if lt IE 7]><html dir="ltr" lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html dir="ltr" lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html dir="ltr" lang="en-US" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html dir="ltr" lang="en-US"><!--<![endif]-->
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<meta name="description" content="cmsmasters responsive html5 website template" />
<meta name="keywords" content="html5, css3, template, responsive, adaptive" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/fonts.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles/jquery.prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/jquery.jPlayer.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/styles/ie.css" type="text/css" />
<link rel="stylesheet" href="css/styles/ieCss3.css" type="text/css" media="screen" />
<![endif]-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.all.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<title>Halsey</title>
</head>
<body>
<!-- __________________________________________________ Start Page -->
<section id="page">
<a href="#" id="slide_top"></a>
<div class="container">
<!-- __________________________________________________ Start Header -->
<header id="header">
<div class="header_inner">
<a class="logo" href="index.html"><img src="images/logo.png" alt="" /></a>
<a class="resp_navigation" href="javascript:void(0);"></a>
<nav>
<ul id="navigation">
<li class="drop">
<a href="javascript:void(0);"><span>Home</span></a>
<ul>
<li><a href="index.html"><span>Responsive Slider</span></a></li>
<li><a href="index-2.html"><span>Revolution Slider</span></a></li>
</ul>
</li>
<li class="current_page_item drop"><a href="javascript:void(0);"><span>Features</span></a>
<ul>
<li class="current_page_item drop"><a href="javascript:void(0);"><span>Shortcodes</span></a>
<ul>
<li><a href="buttons.html"><span>Buttons</span></a></li>
<li><a href="boxes.html"><span>InfoBoxes</span></a></li>
<li><a href="columns.html"><span>Columns</span></a></li>
<li><a href="tabs.html"><span>Tabs & Toggle</span></a></li>
<li><a href="shortcodes.html"><span>Post type shortcode</span></a></li>
<li><a href="media.html"><span>Media</span></a></li>
<li><a href="player.html"><span>Audio & Video Players</span></a></li>
<li><a href="pricing.html"><span>Pricing Tables</span></a></li>
<li><a href="lightboxes.html"><span>Lightboxes</span></a></li>
<li><a href="tour.html"><span>Site Tour</span></a></li>
<li class="current_page_item"><a href="googlemaps.html"><span>Google Maps</span></a></li>
</ul>
</li>
<li><a href="widgets.html"><span>Widgets</span></a></li>
<li><a href="typography.html"><span>Typography</span></a></li>
<li class="drop"><a href="javascript:void(0);"><span>Layouts</span></a>
<ul>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="error.html"><span>404 Error Page</span></a></li>
<li><a href="sitemap.html"><span>Sitemap</span></a></li>
<li><a href="lsidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="rsidebar.html"><span>Right Sidebar</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Heading Templates</span></a>
<ul>
<li><a href="heading.html"><span>Standard Heading</span></a></li>
<li><a href="heading_icon.html"><span>With Icon</span></a></li>
<li><a href="heading_text.html"><span>With Text</span></a></li>
<li><a href="heading_icon_text.html"><span>Heading With Icon & Text</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="drop">
<a href="javascript:void(0);"><span>Portfolio</span></a>
<ul>
<li class="drop"><a href="javascript:void(0);"><span>Sortable Portfolio</span></a>
<ul>
<li><a href="portfolio_sort_four.html"><span>Four Columns</span></a></li>
<li><a href="portfolio_sort_three.html"><span>Three Columns</span></a></li>
<li><a href="portfolio_sort_two.html"><span>Two Columns</span></a></li>
<li><a href="portfolio_sort_one.html"><span>One Column</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Portfolio</span></a>
<ul>
<li><a href="portfolio_four.html"><span>Four Columns</span></a></li>
<li><a href="portfolio_three.html"><span>Three Columns</span></a></li>
<li><a href="portfolio_two.html"><span>Two Columns</span></a></li>
<li><a href="portfolio_one.html"><span>One Column</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Project layouts</span></a>
<ul>
<li><a href="project_slider.html"><span>Image Slider</span></a></li>
<li><a href="project_video.html"><span>Video</span></a></li>
<li><a href="album_four.html"><span>Album Four Columns</span></a></li>
<li><a href="album_three.html"><span>Album Three Columns</span></a></li>
<li><a href="album_two.html"><span>Album Two Columns</span></a></li>
<li><a href="album_one.html"><span>Album One Column</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="drop">
<a href="javascript:void(0);"><span>Blogs</span></a>
<ul>
<li><a href="blog_sidebar.html"><span>Blog with Sidebar</span></a></li>
<li><a href="blog_fwidth.html"><span>Full width Blog</span></a></li>
<li><a href="openpost.html"><span>Blog Post</span></a></li>
</ul>
</li>
<li>
<a href="contacts.html"><span>Contacts</span></a>
</li>
</ul>
</nav>
<div class="cl"></div>
</div>
</header>
<!-- __________________________________________________ Finish Header -->
<!-- __________________________________________________ Start Middle -->
<section id="middle">
<div class="headline">
<h2>Google Maps</h2>
</div>
<div class="cont_nav"><a href="index.html">Home</a> / <a href="shortcodes.html">Features</a> / <a href="shortcodes.html">Shortcodes</a> / <span>Google Maps</span></div>
<div class="content_wrap">
<!-- __________________________________________________ Start Content -->
<section id="content">
<div class="entry">
<div class="togg">
<a href="#" class="tog">
<span class="cmsms_plus">
<span class="vert_line"></span>
<span class="horiz_line"></span>
</span>
Settings
</a>
<div class="tab_content" style="display:none;">
<ul class="styled arrow_dash_r">
<li><strong class="color_3">width</strong></li>
<li><strong class="color_3">height</strong></li>
<li><strong class="color_3">address</strong>: Address on which the viewport will be centered.</li>
<li><strong class="color_3">latitude</strong>: Point on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.</li>
<li><strong class="color_3">longitude</strong>: Same as above but for longitude...</li>
<li><strong class="color_3">zoom</strong>: Zoom value from 1 to 19 where 19 is the greatest and 1 the smallest.</li>
<li><strong class="color_3">html</strong>: Content that will be shown within the info window for this marker.</li>
<li><strong class="color_3">popup</strong>: If true the info window for this marker will be shown when the map finished loading. If "html" is empty this option will be ignored.</li>
<li><strong class="color_3">mapTypeControl</strong>: Set to false to disable MapType control. The MapType control lets the user toggle between map types (such as ROADMAP and SATELLITE).</li>
<li><strong class="color_3">zoomControl</strong>: Set to false to disable Zoom control. The Zoom control displays a slider (for large maps) or small "+/-" buttons (for small maps) to control the zoom level of the map.</li>
<li><strong class="color_3">panControl</strong>: Set to false to disable Pan control. The pan control displays buttons for panning the map.</li>
<li><strong class="color_3">scaleControl</strong>: Set to false to disable Scale control. The scale control displays a map scale element.</li>
<li><strong class="color_3">streetViewControl</strong>: Set to false to disable Street View control. The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View.</li>
<li><strong class="color_3">scrollwheel</strong>: Set to false to disable zooming with your mouses scrollwheel.</li>
<li><strong class="color_3">maptype</strong>: Predefined variable for setting the map type. Possible values: google.maps.MapTypeId.ROADMAP, maptype:google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN.</li>
<li><strong class="color_3">marker</strong>: Set to false to disable display a marker in the viewport.</li>
</ul>
</div>
</div>
<h4>Simple Road Map</h4>
<div class="resizable_block">
<div id="google_map_1" class="google_map fullwidth"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_1').gMap( {
zoom : 1,
latitude : 0,
longitude : 0
} );
} );
</script>
<br />
<div class="divider"></div>
<h4>Simple Google Earth Map</h4>
<div class="resizable_block">
<div id="google_map_2" class="google_map fullwidth"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_2').gMap( {
zoom : 1,
latitude : 0,
longitude : 0,
maptype : google.maps.MapTypeId.SATELLITE
} );
} );
</script>
<br />
<div class="divider"></div>
<h4>Simple Mixture Map</h4>
<div class="resizable_block">
<div id="google_map_3" class="google_map fullwidth"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_3').gMap( {
zoom : 1,
latitude : 0,
longitude : 0,
maptype : google.maps.MapTypeId.HYBRID
} );
} );
</script>
<br />
<div class="divider"></div>
<h4>Simple Physical Map</h4>
<div class="resizable_block">
<div id="google_map_4" class="google_map fullwidth"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_4').gMap( {
zoom : 1,
latitude : 0,
longitude : 0,
maptype : google.maps.MapTypeId.TERRAIN
} );
} );
</script>
<br />
<div class="divider"></div>
<h4>Map With Marker</h4>
<div class="resizable_block">
<div id="google_map_5" class="google_map fullwidth"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_5').gMap( {
zoom : 1,
markers : [ {
address : '',
latitude : 51.486782,
longitude : -0.143242,
html : '',
popup : false
} ],
mapTypeControl : true,
zoomControl : true,
panControl : true,
scaleControl : true,
streetViewControl : true,
scrollwheel : true
} );
} );
</script>
<br />
<div class="divider"></div>
<h4>Map Without Control</h4>
<div class="resizable_block">
<div id="google_map_6" class="google_map fullwidth"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_6').gMap( {
zoom : 1,
latitude : 0,
longitude : 0,
mapTypeControl : false,
zoomControl : false,
panControl : false,
scaleControl : false,
streetViewControl : false,
scrollwheel : true
} );
} );
</script>
<br />
<div class="divider"></div>
<h4>Map With Marker & Information</h4>
<div class="resizable_block">
<div id="google_map_7" class="google_map fullwidth"></div>
</div>
<br />
<br />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#google_map_7').gMap( {
zoom : 7,
markers : [ {
address : '',
latitude : 51.486782,
longitude : -0.143242,
html : 'London, United Kingdom',
popup : true
} ],
mapTypeControl : true,
zoomControl : true,
panControl : true,
scaleControl : true,
streetViewControl : true,
scrollwheel : true
} );
} );
</script>
<div class="cl"></div>
</div>
</section>
<!-- __________________________________________________ Finish Content -->
<!-- __________________________________________________ Start Sidebar -->
<section id="sidebar">
<div class="one_first">
<aside class="widget widget_custom_contact_form_entries">
<h3 class="widgettitle">Quick Form</h3>
<div class="cmsms-form-builder">
<div class="widgetinfo">Thank you! <br />Your message has been sent successfully.</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#form_contact_form_widget_001').validationEngine('init');
jQuery('#form_contact_form_widget_001 a#contact_form_widget_001_wformsend').click(function () {
var form_builder_url = jQuery('#contact_form_widget_001_wurl').val();
jQuery('#form_contact_form_widget_001 .loading').animate( {
opacity : 1
} , 250);
if (jQuery('#form_contact_form_widget_001').validationEngine('validate')) {
jQuery.post(form_builder_url, {
field_003 : jQuery('#field_003').val(),
field_004 : jQuery('#field_004').val(),
formname : 'contact_form_widget_001',
formtype : 'widget'
}, function () {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
document.getElementById('form_contact_form_widget_001').reset();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').hide();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').fadeIn('fast');
jQuery('html, body').animate( { scrollTop : (jQuery('#form_contact_form_widget_001').offset().top - 100) }, 'slow');
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').delay(5000).fadeOut(1000);
} );
return false;
} else {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
return false;
}
} );
} );
</script>
<form action="#" method="post" id="form_contact_form_widget_001">
<div class="form_info cmsms_input">
<label for="field_003">Email<span class="color_3"> *</span></label>
<input type="text" name="wemail" id="field_003" size="22" tabindex="12" class="validate[required,custom[email]]" />
</div>
<div class="form_info cmsms_textarea">
<label for="field_004">Message<span class="color_3"> *</span></label>
<textarea name="wmessage" id="field_004" cols="28" rows="6" tabindex="13" class="validate[required,minSize[3]]"></textarea>
</div>
<div class="loading"></div>
<div><input type="hidden" name="contact_form_widget_001_wurl" id="contact_form_widget_001_wurl" value="http://yoursite.com/php/sendmail.php" /></div><!-- Here you need to set the path to the sendmail file -->
<div><a href="#" id="contact_form_widget_001_wformsend" class="button_small" tabindex="14">Submit</a></div>
</form>
</div>
</aside>
</div>
<div class="one_first">
<aside class="widget widget_custom_flickr_entries">
<h3 class="widgettitle">Flickr</h3>
<ul id="flickr_images_sidebar"></ul>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#flickr_images_sidebar').jflickrfeed({
limit: 6,
qstrings: {
id: '49053047@N04'
},
itemTemplate: '<li><a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
});
});
</script>
</aside>
</div>
<div class="one_first">
<aside class="widget widget_custom_tweets_entries">
<h3 class="widgettitle">Tweets</h3>
<div id="tweetFeed"></div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tweetFeed').jTweetsAnywhere({
username: 'cmsmasters',
count: 2,
showTweetFeed : {
showTwitterBird: false
}
});
});
</script>
</aside>
</div>
</section>
<div class="cl"></div>
<!-- __________________________________________________ Finish Sidebar -->
</div>
</section>
<!-- __________________________________________________ Finish Middle -->
<!-- __________________________________________________ Start Bottom -->
<section id="bottom">
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Social</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Vimeo</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Popular resources</h3>
<ul>
<li><a href="#">How to Write a Blog</a></li>
<li><a href="#">Create a Blog in 4 Steps</a></li>
<li><a href="#">15 Tips to Increase Traffic</a></li>
<li><a href="#">20 Blog Post Ideas</a></li>
<li><a href="#">Top 10 for Beginner Bloggers</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Blogroll</h3>
<ul>
<li><a href="#">Blogs Blog</a></li>
<li><a href="#">Roll Up Roll Up</a></li>
<li><a href="#">Blog Free</a></li>
<li><a href="#">Wordpress Blog</a></li>
<li><a href="#">Start Blogging</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">About</h3>
<ul>
<li><a href="#">Halsey</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Company news</a></li>
<li><a href="#">Investor relations</a></li>
<li><a href="#">Site map</a></li>
</ul>
</aside>
</div>
</section>
<!-- __________________________________________________ Finish Bottom -->
</div>
<!-- __________________________________________________ Start Footer -->
<footer id="footer">
<ul class="social_list">
<li><a href="#" title="Facebook"><img src="images/socicons/facebook.png" alt="" /></a></li>
<li><a href="#" title="Flickr"><img src="images/socicons/flickr.png" alt="" /></a></li>
<li><a href="#" title="Twitter"><img src="images/socicons/twitter.png" alt="" /></a></li>
<li><a href="#" title="Vimeo"><img src="images/socicons/vimeo.png" alt="" /></a></li>
<li><a href="#" title="Google Plus"><img src="images/socicons/googleplus.png" alt="" /></a></li>
</ul>
<span class="cmsms_copy">© 2012 Halsey</span>
<ul class="footer_nav">
<li><a href="contacts.html">Contact us</a></li>
<li><a href="#">Privacy statement</a></li>
</ul>
</footer>
<!-- __________________________________________________ Finish Footer -->
</section>
<!-- __________________________________________________ Finish Page -->
<script src="js/jquery.script.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.jtweetsanywhere.js" type="text/javascript"></script>
<script src="js/jquery.flickrfeed.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-lang.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="js/jquery.gMap.js" type="text/javascript"></script>
</body>
</html>