“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

try this:

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

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.