mike628
mike628

Reputation: 49351

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

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>

Upvotes: 6

Views: 45565

Answers (4)

maxxi
maxxi

Reputation: 309

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.

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

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?

Upvotes: 5

RedBirdISU
RedBirdISU

Reputation: 77

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

Upvotes: 7

&#214;zg&#252;r Kara
&#214;zg&#252;r Kara

Reputation: 1333

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);

Upvotes: 0

Related Questions