smocohiba
asked on
Modifying Google Maps location on webpage
Hi I'm just learning HTML, CSS and JS, so please excuse this super noob question. I downloaded the Zoon under construction template to play around with and use in one of my sites: http://www.styleshout.com/free-templates/zoon/
Here's index.html from the Zoon template:
What I can't figure out is how to modify the location section so the displayed map centers on the place I want. I tried following this guide: http://stiern.com/tutorials/adding-custom-google-maps-to-your-website/ and placing this block of code in the head:
but it just returned
"error"
"SyntaxError: Unexpected end of input"
"error"
"ReferenceError: initialize is not defined
at onload (http://null.jsbin.com/runner:1:2041)"
I'm pretty sure I'm missing something really simple -thanks in advance!
Here's index.html from the Zoon template:
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Zoon - Free Responsive HTML5/CSS3 Template</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/media-queries.css">
<!-- Script
================================================== -->
<script src="js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.png" >
</head>
<body>
<div id="preloader">
<div id="status">
<img src="images/preloader.gif" height="64" width="64" alt="">
</div>
</div>
<!-- Intro Section
================================================== -->
<section id="intro">
<header class="row">
<div id="logo" >
<a href="#" >
<img src="images/logo.png" alt="Zoon">
</a>
</div>
<nav id="nav-wrap">
<a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li class="current"><a class="smoothscroll" href="#home">Home</a></li>
<li><a class="smoothscroll" href="#about">About</a></li>
<li><a class="smoothscroll" href="#location">Location</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
</header> <!-- Header End -->
<div id="main" class="row">
<div class="twelve columns">
<h1>We are currently working on something awesome. Stay tuned!</h1>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<h5>Time Left Until Launching</h5>
<div id="counter" class="cf">
<span>134 <em>days</em></span>
<span>12 <em>hours</em></span>
<span>50 <em>minutes</em></span>
<span>33 <em>seconds</em></span>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://facebook.us8.list-manage.com/subscribe/post?u=cdb7b577e41181934ed6a6a44&id=e65110b38d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_cdb7b577e41181934ed6a6a44_e65110b38d" value=""></div>
<!-- <div class="clear"> --><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"><!-- </div> -->
</form>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>
</div>
</div> <!-- main end -->
</section> <!-- end intro section -->
<!-- About Section
================================================== -->
<section id="about">
<div class="row section-header">
<div class="twelve columns">
<div class="icon-wrap">
<i class="fa fa-group"></i>
</div>
<h1>About Us.</h1>
<p class="lead">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusanti doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam.
</p>
</div>
</div> <!-- end section-header -->
<div class="row section-content">
<div class="six columns">
<h3>Our Process.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
<div class="six columns">
<h3>Our Approach.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
</div> <!-- end section-content -->
<div class="row section-content">
<div class="six columns">
<h3>Our Vision.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
<div class="six columns">
<h3>Our Objective.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
</div> <!-- end section-content -->
<div id="call-to-action">
<div class="row section-ads">
<div class="twelve columns">
<h2><a href="http://www.dreamhost.com/r.cgi?287326|STYLESHOUT">Host This Template on Dreamhost.</a></h2>
<p class="lead">
Looking for an awesome and reliable webhosting? Try <a href="http://www.dreamhost.com/r.cgi?287326|STYLESHOUT"><span>DreamHost</span></a>.
Get <span>$50 off</span> when you sign up with the promocode <span>styleshout</span>.
<!-- Simply type the promocode in the box labeled “Promo Code” when placing your order. -->
</p>
<div class="action">
<a href="http://www.dreamhost.com/r.cgi?287326|STYLESHOUT" class="button">Sign Up Now</a>
</div>
</div>
</div> <!-- end section-ads -->
</div> <!-- end call-to-action -->
</section> <!-- About Section End-->
<!-- Location Section
================================================== -->
<section id="location">
<div class="contacts">
<div class="row contact-details">
<div class="columns">
<h3><i class="fa fa-home"></i>Address.</h3>
<p>5th Avenue, Fort Bonifacio<br>
Taguig, Metro Manila <br>
Philippines
</p>
</div>
<div class="columns">
<h3><i class="fa fa-phone"></i>Phone Numbers.</h3>
<p>Phone: (000) 777 1515<br>
Mobile: (000) 777 0100<br>
Fax: (000) 777 0101
</p>
</div>
<div class="columns end">
<h3><i class="fa fa-envelope"></i>Emails.</h3>
<p>johndoe@zoon.com<br>
janedoe@zoon.com <br>
juandelacruz@zoon.com
</p>
</div>
</div> <!-- end contact-details -->
</div> <!-- end contacts -->
<div id="map">
<p class="map-error">Something went wrong... Unable to load map... Please try to enable javascript</p>
</div> <!-- end map -->
</section> <!-- end location section -->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="copyright">
<li>© Copyright 2014 Zoon</li>
<li>Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a></li>
</ul>
</div>
</div>
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="js/gmaps.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/backstretch.js"></script>
<script src="js/init.js"></script>
</body>
</html>What I can't figure out is how to modify the location section so the displayed map centers on the place I want. I tried following this guide: http://stiern.com/tutorials/adding-custom-google-maps-to-your-website/ and placing this block of code in the head:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map"), settings);
</script>but it just returned
"error"
"SyntaxError: Unexpected end of input"
"error"
"ReferenceError: initialize is not defined
at onload (http://null.jsbin.com/runner:1:2041)"
I'm pretty sure I'm missing something really simple -thanks in advance!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Discovered the issue on my own, rather unrelated to what was presented in the question
Open in new window