javascript - Google マップ InfoBox の非同期統合が機能しない

Question

私のウェブサイトで Google の InfoBox プラグインを使用して非同期 Google マップを実装する方法を見つけることに行き詰まりました。これは私のコードです：

<script type="text/javascript">
    jQuery(document).ready(function() {
        loadScript();
    });

    function initialize() {
        mapCenter = new google.maps.LatLng(-34.770215, 149.706806);
        var mapProp = {
            center: mapCenter,
            zoom:18,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            draggable: false
        };
        var map = new google.maps.Map(document.getElementById("map"),mapProp);
        var marker=new google.maps.Marker({
          position:mapCenter,
        });
        marker.setMap(map);
        google.maps.event.addListener(map, 'click', function(event){
            this.setOptions({scrollwheel:true});
             this.setOptions({draggable:true});
        });
        google.maps.event.addListener(map, 'mouseout', function(event){
            this.setOptions({scrollwheel:false});  
            this.setOptions({draggable:false});  
        });
    }


    function loadScript() {
        var script = document.createElement("script");
        script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
        document.body.appendChild(script);
        script.onload = function() {
            var scriptInfoBox = document.createElement("script");
            scriptInfoBox.type = "text/javascript";
            scriptInfoBox.src = "{{ 'assets/javascript/googlemap-infobox.js?callback=initialize2'|theme }}";
            document.body.appendChild(scriptInfoBox);
            scriptInfoBox.onload = function() {
                infobox = new InfoBox({
                     content: document.getElementById("infobox"),
                     disableAutoPan: false,
                     maxWidth: 150,
                     pixelOffset: new google.maps.Size(-140, 0),
                     zIndex: null,
                     boxStyle: {
                        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                        opacity: 0.75,
                        width: "280px"
                    },
                    closeBoxMargin: "12px 4px 2px 2px",
                    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                    infoBoxClearance: new google.maps.Size(1, 1)
                });
                 google.maps.event.addListener(marker, 'click', function() {
                    infobox.open(map, this);
                    map.panTo(loc);
                });
            }
        };
    }
</script>

これはマップの私のdivです

<div id="map"></div>

これは、InfoBox の My Div です

<div class="infobox-wrapper">
    <div id="infobox">
        The contents of your info box. It's very easy to create and customize.
    </div>
</div>

エラー: Uncaught ReferenceError: マーカーが定義されていません ヘルプ!