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=""></script>
<script type="text/javascript" src=".8.3/jquery.js"/>
<script type="text/javascript" src=";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>
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>
4 Answers
Reset to default 7Both 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?
When do you run your init function? if init function runs before google.js loaded, you can get this error.
try call init function like this.
function init(){
//...
}
google.maps.event.addDomListener(window, 'init', Initialize);
I also had the same issue, all syntax was correct. Tried to fix by moving script files up/down of the HTML file but none of them was successful.
What I did was, removed the &callback=init from the URL and call that method inside the $(document).ready(function () {}). Now it works perfectly.