Загрузка Google Maps через вызов Ajax

Question

Я видел несколько вопросов, связанных с моим, но ни один из них не работает для меня. У меня есть одна страница, и по вызову ajax я заменяю содержимое некоторого div для создания эффекта vieawing page без стандартной загрузки страницы.

в индексном файле у меня есть некоторые DIV:

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

все другие страницы HTML выглядит следующим образом:

<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); 
      } 
     }); 
    }) 

И это это страница контакта, на которой карты google отлично работают при стандартной загрузке страницы (когда я печатаю URL-адрес страницы контакта и нажмите Enter), но карты не работают динамический вызов Ajax, когда я нажимаю .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> 

Я попытался запустить init_map функцию внутри Ajax кода, но это не делает ничего. Спасибо за любой совет.

Answer 1

Основная идея заключается в том, что вам нужно будет заботиться о объектах google.maps (скриптах, стилях, шрифтах), чтобы заставить их работать и избежать утечек памяти.

Вы можете посмотреть мой сценарий here. Когда вы нажимаете «Загрузить карту», ​​отображается карта google, определенная в map.html.