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:
<!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&amp;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>&copy; 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>

Open in new window


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>

Open in new window


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!
smocohibaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
You are missing a closing "}" at the very end of your initialize function.  As given, it's definition is incomplete.
	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);
    } // <== You are missing this.

Open in new window

1
smocohibaAuthor Commented:
Hi Thanks for replying and yes i was missing that.  Turns out though that all the settings were in a init.js file included with the template.  There's already a function in there that's called by 'maps' which is why no new function i created seemed to do anything.  Thanks for your help!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smocohibaAuthor Commented:
Discovered the issue on my own, rather unrelated to what was presented in the question
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.