Best IT Recipes

Google Maps API throws "Uncaught ReferenceError: google undefined" only when using AJAX

I have a page that uses the Google Maps API to display a map. When I load the page directly, a map is displayed. However, when I try to load a page using AJAX, I get an error message:

Uncaught ReferenceError: google is not defined

Why is this?

This is the map page:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map); } $(document).ready(function(e) { initialize() }); </script> <div id="map_canvas" style="height: 354px; width:713px;"></div>

And this page with an AJAX call:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <script> $(document).ready(function(e) { $('button').click(function(){ $.ajax({ type: 'GET', url: 'map-display', success: function(d) { $('#a').html(d); } }) }); }); </script> <button>Call</button> <div id="a"></div> </body> </html>

Thanks for your help.

+75
ajax google-maps-api-3
Jan 09 '13 at 6:44
source share
8 answers

The API cannot be loaded after the default document has finished loading, you need to load it asynchronously.

change page using map:

 <div id="map_canvas" style="height: 354px; width:713px;"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> <script> var directionsDisplay, directionsService, map; function initialize() { var directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map); } </script>

For more information, see: / questions / 110360 / async-google-maps-api-v3-undefined-is-not-a-function / 688573 # 688573

Example: http://jsfiddle.net/doktormolle/zJ5em/

+81
Jan 9 '13 at 12:45
source share

I know that this answer is not directly related to the problem of these questions, but in some cases the problem "Failure of ReferenceError: google not defined" will occur if your js file is called before you use the Google Maps api that you use .. . therefore DO NOT:

 <script type ="text/javascript" src ="SomeJScriptfile.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
+36
Jul 16 '14 at 3:57
source share

Assuming you initialize something before you initialize: var directionsService = new google.maps.DirectionsService();

Move this to a function, so it will not try to execute it before the page loads.

 var directionsDisplay, directionsService; var map; function initialize() { directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer();
+7
Jan 09 '13 at 9:07
source share

It may not be relevant for everyone, but this small detail makes me not work:

Change the div:

 <div class="map">

To that:

 <div id="map">
+1
Oct 27 '17 at 10:11
source share

Uncaught ReferenceError: Google is not defined. The error will disappear if you remove the asynchronous delay from the map API script tag.

+1
May 7, '19 at 7:45
source share

After all your workarounds, the API call worked for me:

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places" type="text/javascript"></script>

before mine: <div id="map"></div>

I am using .ASP NET (MVC)

+1
Jul 30 '19 at 12:50
source share

For me

Adding this line

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Before this line.

 <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

worked

0
Jan 30 '16 at 16:43
source share

Possible use

 <body onload="initialize();">

instead

 $(function(){ initialize(); });

can help you.

-2
Sep 01 '16 at 10:26
source share


More articles:


All Articles