Loading Google Maps API with Ajax using JavascriptJQuery, Callback not setup correctly - Stack Overflow

admin管理员组

文章数量:1314843

I would appreciate some guidance on getting this script to work. The map loads fine but the Callback isn't setup correctly so the page keeps appending the Google maps API script to the document each time the button is clicked.

I am using JQuery's $.load to add an HTML page (map.html) into a DOM element (a div container).

$('.button').click(function() {
        $('#mapcontainer').load('/map.html');
}); 

Here is what map.html is using to load the map, the script I'm using originated from here:

<script>

var gMapsLoaded = false;
window.gMapsCallback = function(){
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');}

window.loadGoogleMaps = function(){
if(gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",";sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){

   function initialize(){

var mapOptions = {

  }
};

map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}

$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});

</script>

<div style="height:400px;width:650px;" id="map_canvas"></div>

Here's another example of a different way to setup a callback for dynamically loading the Google Maps Javascript API: / This is what I am hoping to acplish by modifying the script I'm currently using (as opposed to back-engineering a new script).

Thanks.

Edit: Solved the issue, solution posted in response below

I would appreciate some guidance on getting this script to work. The map loads fine but the Callback isn't setup correctly so the page keeps appending the Google maps API script to the document each time the button is clicked.

I am using JQuery's $.load to add an HTML page (map.html) into a DOM element (a div container).

$('.button').click(function() {
        $('#mapcontainer').load('/map.html');
}); 

Here is what map.html is using to load the map, the script I'm using originated from here: https://stackoverflow./a/12602845/1607449

<script>

var gMapsLoaded = false;
window.gMapsCallback = function(){
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');}

window.loadGoogleMaps = function(){
if(gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google./maps/api/js?key=KEYGOESHERE&sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){

   function initialize(){

var mapOptions = {

  }
};

map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}

$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});

</script>

<div style="height:400px;width:650px;" id="map_canvas"></div>

Here's another example of a different way to setup a callback for dynamically loading the Google Maps Javascript API: http://www.vijayjoshi/2010/01/19/how-to-dynamically-load-the-google-maps-javascript-api-on-demand-loading/ This is what I am hoping to acplish by modifying the script I'm currently using (as opposed to back-engineering a new script).

Thanks.

Edit: Solved the issue, solution posted in response below

• javascript
• jquery
• ajax
• google-maps
• google-maps-api-3

Share Improve this question Follow edited May 23, 2017 at 12:16 CommunityBot 111 silver badge asked Nov 14, 2013 at 18:50 GSimonGSimon 34711 gold badge44 silver badges1414 bronze badges 4

• 1 why not just call the function instead of adding a superfluous event and event listener? – Jason Nichols Commented Nov 14, 2013 at 18:53
• I'm not quite sure what event is superfluous and what's not. ATM I'm stretching my current understanding of Javascript as it is by having to setup a callback and asynchronously load content using AJAX, so really AFAIK each event has a purpose in setting up the callback. – GSimon Commented Nov 14, 2013 at 18:59
• 1 I understand your ment now. I guess the additional scripts were superfluous for my purpose. – GSimon Commented Nov 14, 2013 at 21:02
• 1 You can post it as an answer, and accept your own answer. It's generally considered better form than to edit the question and put the answer in there. – Jason Nichols Commented Nov 14, 2013 at 21:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Figured out a solution, essentially my callback wasn't necessary. Here's what I used:

$('.button').click(function() {
        $('#mapcontainer').load('/map.html', function () {
       initialize();
   });
}); 

and

<script>
function initialize(){
   var mapOptions = {
           ///Map options go here
     }
   };

   map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
</script>

<div style="height:400px;width:650px;" id="map_canvas"></div>

本文标签：