javascript - Javascript/JQuery を使用して Ajax で Google Maps API をロードすると、コールバックが正しく設定されない

Question

このスクリプトを機能させるためのガイダンスをいただければ幸いです。マップは正常に読み込まれますが、Callback が正しく設定されていないため、ボタンがクリックされるたびにページが Google マップ API スクリプトをドキュメントに追加し続けます。

JQuery の $.load を使用して、HTML ページ (map.html) を DOM 要素 (div コンテナー) に追加しています。

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

これが map.html がマップをロードするために使用しているものです。私が使用しているスクリプトはここからのものです:

<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.com/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>

Google Maps Javascript API を動的にロードするためのコールバックを設定する別の方法の例を次に示します: http://www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps- javascript-api-on-demand-loading/これは、(新しいスクリプトをバックエンジニアリングするのではなく) 現在使用しているスクリプトを変更することで達成したいと考えていることです。

ありがとう。

編集：問題を解決し、以下の回答に投稿された解決策