“google is not defined” when using Google Maps V3 in Firefox remotely

Question

Here\'s my conundrum: I have a page that uses Google Maps V3 and jQuery. It all worked well locally in FF5, Chrome and Safari.

Once I uploaded to a web site, I get

Answer 1

instead of this

var defaultLocation = new google.maps.LatLng(lat, lng);

use this

var defaultLocation = new window.google.maps.LatLng(lat, lng);

and this worked for me.

Answer 2

Try using this:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

Answer 3

Add the type for the script

<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>

So the important part is the type text/javascript.

Answer 4

I faced 'google is not defined' several time. Probably Google Script has some problem not to be loaded well with FF-addon BTW. FF has restart option ( like window reboot ) Help > restart with Add-ons Disabled

Answer 5

From Firefox 23, there is Mixed Content Blocking Enabled set by default (locally disabled). It blocks some APIs from Google also if you use secure connection and some unsecure APIs.

To disable it you'll have to click shield which appears in location bar when there are some unsecure contents, set 'Disable protection' and then you'll have to look at yellow exclamation mark in location bar :(

https://blog.mozilla.org/.../mixed-content-blocking-enabled-in-firefox-23/

You can always try also replace http protocol with https in the API url. If API is provided also in secure connection - you will not see any warnings.

It works for me.

Answer 6

Another suggestion that helped me:

Here is what happent to me => My script was working once in 3 time I was loading the page and the error was the «google is not defined».

My function using the google map was in my jQuery document's ready function

$(function(){
   //Here was my logic
})

I simply added this code to make sure it works:

$(function(){
   $(window).load(function(){
       //Here is my logic now
   });
});

It works like a charm. If you want more details on difference between document ready and window load, here is a great post about it: window.onload vs $(document).ready()

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.