Google Maps api's dynamic loading

Question

I am trying to load dynamic goi cards dynamically. I am using the following code:

var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'http://www.google.com/jsapi?key=<MY_KEY>; head.appendChild(script); 

but when trying to create a map

 map = new GMap2(document.getElementById("map")); 

or

 map = new google.maps.Map2(document.getElementById("map")); 

I get an error that google (or GMap2) is undefined.

Answer 1

Can you do this. You can add the name of the callback function to the URL. It will be called when the API boots. This callback function must be available in the document area.

I did this a while ago, triggering a custom event in a window using jQuery: http://jsfiddle.net/fZqqW/5/

used http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback "

 window.gMapsCallback = function(){ $(window).trigger('gMapsLoaded'); } $(document).ready((function(){ function initialize(){ var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); } function loadGoogleMaps(){ var script_tag = document.createElement('script'); script_tag.setAttribute("type","text/javascript"); script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); } $(window).bind('gMapsLoaded', initialize); loadGoogleMaps(); })());​ 

API Asynchronous Download

You might want to download the Maps API JavaScript code after your page or on demand. To do this, you can tag in response to a window.onload event or function call, but you need to additionally instruct the JavaScript Maps API bootstrap to delay the execution of your application code until the JavaScript Maps API code is fully loaded. You can do this by using a callback parameter, which takes as an argument the function that executes when the API download finishes.

The following code indicates that the application loads the Maps API after the page is fully loaded (using window.onload) and the Maps JavaScript API is written to the tag inside the page. Additionally, we instruct the API to only perform the initialize () function after the API is fully loaded by passing the callback = initialization to Maps

See HERE: https://developers.google.com/maps/documentation/javascript/tutorial

Answer 2

Make sure you do not instantiate the map before Javascript finishes loading.

In addition, if you want to use the AJAX API loader, you need to do this as follows:

 <script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script> <script type="text/javascript"> google.load("maps", "2.x"); // Call this function when the page has been loaded function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } google.setOnLoadCallback(initialize); </script> 

Otherwise, just use the regular Maps API script:

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" type="text/javascript"></script> 

Answer 3

I made it this way ... this example uses jQuery and google map v3.x

 $.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function () {}); function MapApiLoaded() { //.... put your map setup code here: new google.maps.Map(...) etc } 

Answer 4

This works for me:

  const myApiKey = '12345'; const lat = -34.397; const lng = 150.644; const zoom = 8; const parentElement = document.getElementById('map'); // a <div> const script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js?key=${myApiKey}'; script.async = true; script.defer = true; script.onload = function () { new google.maps.Map(parentElement, { center: {lat, lng}, zoom }); }; parentElement.insertBefore(script, null);