Google Maps Uncaught TypeError: Cannot read property 'LatLng' of undefined
Solution 1
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?
Solution 2
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
mike628
Updated on August 13, 2020Comments
-
mike628 over 3 years
I keep getting this error "Uncaught TypeError: Cannot read property 'LatLng' of undefined" when trying to create a map
In the Head:<script type="text/javascript" src="https://www.google.com/jsapi"></script> <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>.............
function init(){ var latlng = new google.maps.LatLng(-43.552965, 172.47315); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); }.............
<body> <div id="map" style="width:600px;height: 600px;"> </div> <ul class="navigation"> </ul> </body>