admin管理员组文章数量:1315110
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
Share Improve this question edited May 23, 2017 at 12:16 CommunityBot 11 silver badge asked Nov 14, 2013 at 18:50 GSimonGSimon 3471 gold badge4 silver badges14 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
1 Answer
Reset to default 6Figured 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>
本文标签:
版权声明:本文标题:Loading Google Maps API with Ajax using JavascriptJQuery, Callback not setup correctly - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741971239a2407850.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论