Google Maps Uncaught TypeError: Cannot read property 'LatLng' of undefined

Both the answers above will solve this problem if used together. Property LatLng is undefined because google object is not yet available.

You always close your <script> tag period.

google object wont be available till DOM is loaded. So in you javascript you have to use the google map's addDomListener(). Kara's solution is right but it wont work in your case since function name is init and addDomListener has to wait for "load". You would need:

google.maps.event.addDomListener(window, 'load', init);

Another very easy solution for this is to add the callback to the script

src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&callback=init

callback will wait for the script to load and then trigger your init function to initialize and draw your map.

I put the solution on CodePen here http://codepen.io/redbirdisu/pen/BHivq

Looks like the problem is this is missing the closing tag for <script> for the include of jquery.js:

 <script 
   type="text/javascript"
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"/>
 <script 
   type="text/javascript" 
   src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true">
 </script>

<script> tags need to be closed with </script>, it should be:

 <script 
   type="text/javascript" 
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js">     
 </script>
 <script 
   type="text/javascript" 
   src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true">
 </script>

For more information see: Why don't self-closing script tags work?