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

JavascriptFirefoxGoogle MapsCross Browser

Javascript Problem Overview

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 a "google is not defined" error on the first line that I try to use a google object

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

It only occurs in FF and only occurs remotely (i.e., if I load the file into FF locally, it works well). Chrome and Safari seem to be working great regardless, as is my Android and iPod browsers.

Here's what I tried so far:

  1. Moved <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> to top of the <head> section.
  2. Moved all content of $(function() {...}); to a function called initialize() and added <body onload="initialize()">
  3. Played with scripts and css files order
  4. Pasted the URL http://maps.google.com/maps/api/js?sensor=false into FF address box and verified I'm getting the legit script

But since this is only happening in FF on a remote machine and works well otherwise, I don't think it has anything to do with my code. Maybe the load order in FF5 is screwed. Maybe it prioritizes network resources differently than other browsers. I really do not know what to make of it at this point.

Any help is appreciated.
Guy

Update:
Just wanted to add the following fact: After trying the previous on a Mac, I tried FF5 in Windows, and have replicated the exact same behavior.
For good measure, I tried Pale Moon as well - same results. Chrome 14, Opera 11.50 and even frickin' IE9 (which wasn't included in the test plan) work. It just FF5, now on both Mac and Windows 7, that fails on that page.

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

I had the same error "google is not defined" while using Gmap3. The problem was that I was including 'gmap3' before including 'google', so I reversed the order:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/assets/gmap3.js?body=1" type="text/javascript"></script>

Solution 3 - Javascript

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: https://stackoverflow.com/questions/3698200/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.

Solution 4 - Javascript

Try using this:

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

Solution 5 - Javascript

try this:

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

it works for me... the point is, change HTTP to HTTPS

Solution 6 - Javascript

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.

Solution 7 - Javascript

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.

Solution 8 - Javascript

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.

Solution 9 - Javascript

You can try the following:

First, add async defer. This specifies that the script will be executed asynchronously as soon as it is available and when the page has finished parsing.

Second, add the initMap() function as a callback in a script tag inside your html. In this way the map will be initialized before the document.ready and window.onload:

<script async defer src="{{ 'https://maps.googleapis.com/maps/api/js?key=$key&language='.$language.'&region='.$country.'&callback=initMap' }}"></script>

<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 4,
            disableDefaultUI: false,
            scrollwheel: false,
            styles: [{ ... }]
        });
    }
</script>

Finally, you can use the map object inside your js files.

Solution 10 - Javascript

Changed the

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"> 
      function(){
            myMap()
                }
</script>

and made it

<script type="text/javascript">
      function(){
            myMap()
                }
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"></script>

It worked :)

Solution 11 - Javascript

I think the easiest trick is:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&callback=initMap">google.maps.event.addDomListener(window,'load', initMap);</script>

It will init the map when your app is ready.

Check this.

Solution 12 - Javascript

I don't know for sure but here are my best suggestions.

You're using jQuery. So instead of setting the event you should really be using $(function() {... }); to do your initialization. The reason to use this is that it ensures that all the scripts on the page have loaded and you're not limited to just one init function like you are with the onload body tag.

Also, be sure your Javascript code is after the Google include. Otherwise your code might execute before the Google objects are created.

I would also suggest taking a look at this page about event order.

http://dean.edwards.name/weblog/2005/09/busted/

Solution 13 - Javascript

Please check the order you are calling, your libraries, the following order

  1. <script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.js"></script>

  2. <script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.min.js"></script>

  3. <script type = "text/javascript" src="http://maps.googleapis.com/maps/api/

  4. METOD <script type = "text/javascript" src = "googleMaps/mapa.js"></script>

I was with this problem, I just adjusted my order.

Solution 14 - Javascript

In my case I was loading the google script via http while my server had SSL and its being loaded over https. So I had to load script via https

Solution 15 - Javascript

If you have mentioned a call back function in API call, you should wrap your google map code inside a JavaScript function with same name. Else you will get this error.

Categories
Recommended Javascript Solutions
Recommended Firefox Solutions
Recommended Google Maps Solutions
Recommended Cross Browser Solutions

Previous Solution:

InterfaceError (0, '')

PythonMysqlDjango

Next Solution:

Android Kernel Debugging

AndroidDebuggingKernel

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTraveling Tech GuyView Question on Stackoverflow
Solution 1 - Javascriptuser841019View Answer on Stackoverflow
Solution 2 - JavascriptDiego PinoView Answer on Stackoverflow
Solution 3 - JavascriptYann ChabotView Answer on Stackoverflow
Solution 4 - JavascriptHrishikesh ChoudhariView Answer on Stackoverflow
Solution 5 - Javascriptdanisupr4View Answer on Stackoverflow
Solution 6 - JavascriptJulzView Answer on Stackoverflow
Solution 7 - JavascriptMuhammad Usama RabaniView Answer on Stackoverflow
Solution 8 - JavascriptrobsonView Answer on Stackoverflow
Solution 9 - Javascripttsveti_ikoView Answer on Stackoverflow
Solution 10 - JavascriptAbhinav AnandView Answer on Stackoverflow
Solution 11 - JavascriptMke NtView Answer on Stackoverflow
Solution 12 - JavascriptPaul MendozaView Answer on Stackoverflow
Solution 13 - JavascriptSamael Pereira SimõesView Answer on Stackoverflow
Solution 14 - JavascriptYinkaView Answer on Stackoverflow
Solution 15 - JavascriptKogaView Answer on Stackoverflow