Ajax経由でGoogleマップを読み込んでいます

私に関連する質問がいくつかありましたが、どれも私にとってはうまくいきません。私は単一のページを持っており、ajaxの呼び出しでは、標準のページの読み込みを行わずにページの閲覧を行うためにdivのコンテンツを置き換えています。Ajax経由でGoogleマップを読み込んでいます

<div id="dynamic" class="content"> 
<!-- custom content, will be loaded in index file via ajax, etc --> 
</div>

そして、JSコードの今作品：

$('.menu a').on('click',function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 

     $.ajax({ 
      url: url, 
      dataType: 'html', 
      success: function(html) { 
       var div = $(html); 
       var delay = 100; 
       setTimeout(function() { 
        $('#dynamic').html('').append(div.filter('.content').html()); 
       }, delay); 
      } 
     }); 
    })

そしてこの

<div id="dynamic"></div>

他のすべてのページのHTMLのようになります。いくつかのdivは私が持っているインデックスファイルに

私は連絡先のページのURLを入力し、入力をヒットする）標準のページの負荷でGoogleマップが正常に動作する連絡先ページですが、マップは動作しません私は.menu a

<div id="dynamic" class="content"> 
    <div id="map1"></div> 
    <script> 
     function init_map() { 
      var styles = [ 
      ]; 

      var myOptions = { 
       mapTypeControlOptions: { 
        mapTypeIds: ['Styled'] 
       }, 
       center: new google.maps.LatLng(46.4325, 44.5676723), 
       mapTypeId: 'Styled', 

      }; 

      var div = document.getElementById('map1'); 
      var map = new google.maps.Map(div, myOptions); 
      var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 
      map.mapTypes.set('Styled', styledMapType); 

      marker = new google.maps.Marker({ 
       map: map, 
       position: new google.maps.LatLng(51.4981374, -0.1520723), 
       icon: "images/marker.png" 
      }); 
     } 

     if (document.getElementById("map1")) { 
      google.maps.event.addDomListener(window, 'load', init_map); 
     } 
    </script> 
</div>

をクリックしたときに、動的AJAX呼び出しは、私は、Ajaxコード内の機能をinit_map実行しようとしたが、これは何もしません。アドバイスありがとうございます。

出典

2016-09-08 user3573535