Why doesn't google maps initialize after reloading the page with ajax?

Question

PHP

Hello, I am integrating one-step ordering and it is necessary to generate a map based on the self-delivery warehouses. When the page is loaded for the first time, the card is loaded, but after choosing another payment method (ajax reload occurs), the card is not loaded (it is not initialized). How to initialize the card after reloading the ajax page?

function initialize() {
    console.log('1');
    var centered     = {lat: 60.937008, lng: 60.640778};
    var markers = [];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: centered,
      disableDefaultUI: true,
      disableDoubleClickZoom: true,
      scrollwheel: true,
      mapTypeIds: [google.maps.MapTypeId.ROADMAP ]
    });

    $('.js-radio').each(function(){
      var lat = parseFloat($(this).attr('data-lat'));
      var lng = parseFloat($(this).attr('data-lng'));
      var id = $(this).attr('data-id');
      var marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        map: map,
        id: id
      });
      markers.push(marker);
    });

    for(var key in markers){
      var item = markers[key];
      item.addListener('click', function() {
        var num = this.id;
        $('input[data-id='+num+']').closest('label').click();
        $('#js-list').click();
      });
    }

  }
  google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Surely, after the Ajax request, you update the data on the page, and if you look at the code, the container for the map will be empty (#map), so you need to initialize the map again, this is usually done in the complete Ajax request event handler, in your case it is enough to add a function call initialize in the given handler