Using Pjax Map is not displaying

[kodebees]

on using Pjax map is not displaying. On page load map is displaying but not pjax

        <?= \yii\bootstrap\Html::a("Refresh", ['dashboard/trip-info?trip_id='.$tripInfo->ietms_trip_id], ['class' => 'btn btn-lg btn-success', 'id' => 'refreshButton']) ?>
        <?= $map->display();?>


    <?php
    \yii\widgets\Pjax::end();
    ?>

[tonydspaniard]

why would you use Pjax with Google Maps?

[aenima700]

I have the same problem. Any solutions??

[rihtak]

@tonydspaniard I want to use Pjax with google maps because i have to update the marker dynamically. so i'm using pjax to get the latest lat and lng from database. Thanks Kathiresan S

[tonydspaniard]

@rihtak a better solution would be to bind a js function and use ajax to update the marker dynamically if you have to. pjax is too much magic IMHO and I doubt will work smoothly with google maps js core library and its layers.

Edit: In fact, by looking at your code is a very simple method attached to a button. I would avoid the use of pjax here.

[rihtak]

Thanks for your suggestion @tonydspaniard

[JfrA]

@tonydspaniard Running a big project where we are using pjax, we are adding Google MAPs to some off our features. You mean we need to stop using pax then?

[tonydspaniard]

@JfrA I am not suggesting not to use pJax. Maybe is good in some areas of your app, maybe in all of them. The problem with google maps is that you will need to hack its display on each reload where google maps is displayed (if its part of a Pjax'ed content, happens the same when you work with hidden layers (you need to force resize of the map to display it) or you use a modal window (it simply doesn't show, you need to reinitialize the map after modal is shown)). If you simply need to update the google maps, why bother over-complicating stuff, let it run and make your operations using ajax calls your self instead of the magic of Pjax.

If you are concerned about keeping history you can do it also your self without the need of pjax, by injecting the steps on the history and parse the url to display the correct step on the map.

[JfrA]

@tonydspaniard forcing resize does not do the trick.. Maybe explain the problem we are having.. when loading the page witch contains a Google MAP it works flawless throughout alla page loads to or from that page using pjax. however if we start with loading for example index which does not include a map and navigating to the page witch includes the map, the google api is loaded but map never shows.. you have an idea how to fix that?

[tonydspaniard]

you will have to work with the events of pjax and re-initiate the map. Try that with pjax:completeevent (i would check whether the content has the map and fire up the instantiation again - ie map_init() whatever. )

[JfrA]

@tonydspaniard Yes that i know, are re-initing it for all page views.. but the the thing is if the dom and the api is on the initial page load it works fine browsing to or from with pjax: end/complete... but if the map canvas and the api is not on the initial load e.g. index and from then load in google maps it will not render. tried resizing it, tried to load through another xhr, nothing works..

[tonydspaniard]

@JfrA can you share some of the code?

[JfrA]

@tonydspaniard :

$(document).on('ready pjax:end', function() {
  WhenGoogleLoadedDo(mapMyReadyFN);
}

// Just to be sure..
function WhenGoogleLoadedDo(fnt) {
    if(typeof google != 'undefined') {
        mapMyMap=null;
        fnt();
        google.maps.event.trigger(mapMyMap,'resize');
    } else {
        setTimeout(function(){(function(fnt) {
            WhenGoogleLoadedDo(fnt)
        })(fnt)}, 500);
    }
}

function mapMyReadyFN() {
    if(mapMyMap===null) mapMyInitMap();
    // Adding some infoWindows n markers....
}

function mapMyInitMap() {
    mapMyMap = new google.maps.Map(document.getElementById('mapMyMap'), {
        center: {lat: 59.918570, lng: 10.772751},
        zoom: 15,
        mapTypeId: 'hybrid'
    });

}

[tonydspaniard]

There is something strange on your code. Why you checking for google only? shouldn't you check whether the element where the map should be rendered exists too? What happens if your mapMyMap doesn't exist? That could be the issue.

On another note, i would place some console.log stuff in your code. But, apart from that, the code seems fine. Only that small check.

[JfrA]

@tonydspaniard the mapMyMap exist that i know. Se if i can explain better: when refreshing browser on e.g. map.html it loads fine and i can go to index.html and back to map.html still works fine.

But when i refresh browser at index.html and then go to map.html it will not render, the canvas is there and the api is loaded but nothing displays..

[JfrA]

@tonydspaniard I actually got it working now. Found that pjax didn't load inline style ref.. should have found that without having to write here.. but thanks for you're effort to help!

[tonydspaniard]

Glad you finally got it working. I feel I couldn't do much anyway. It always a pleasure. Good luck with your project.

[shankar2993]

this is view page in yii2 i want to display map(my location) in Location.thanks advance :)

[jhonatasfender]

to be able to help a next person I need to leave my code that I implemented

var initFollowProcessByStateMap = function () {
  $("#follow-process-by-state-map").change(function () {
    $("#country-form").submit();
  })
}

var initClickPeriodo = function () {
  $("#acompanhar-processos-por-gestao,#acompanhar-processos-por-estado").change(function () {
    $("#periodo").submit();
  })
}

function loadProcessMapsStates(fnt) {
  if (typeof google != 'undefined') {
    drawRegionsMap = null;
    fnt();
    if (google.maps)
      google.maps.event.trigger(drawRegionsMap, 'resize');
  } else {
    setTimeout(function () {
      (function (fnt) {
        loadProcessMapsStates(fnt)
      })(fnt)
    }, 500);
  }
}

function mapProcessReadyFN() {
  if (drawRegionsMap === null) mapProcessInitMap();
  // Adding some infoWindows n markers....
}

function mapProcessInitMap() {
  google.load('visualization', '1', {
    'packages': ['geochart', 'table']
  });

  var drawRegionsMap = function () {
    var data = google.visualization.arrayToDataTable(teste1);

    var view = new google.visualization.DataView(data)
    view.setColumns([0, 1])

    var options = {
      region: 'BR',
      resolution: 'provinces'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    var options = {
      region: 'BR',
      resolution: 'provinces',
      legend: {
        position: 'top',
        alignment: 'center',
        maxLines: 1
      },
      keepAspectRatio: false,
      colorAxis: {
        colors: ['blue', 'green', 'red'],
        minValue: 0,
        maxValue: 2
      } // orange to blue 
    };
    google.visualization.events.addListener(geochart, 'regionClick', function (eventData) {
      // maybe you want to change the data table here...
      options['region'] = eventData.region;
      options['resolution'] = 'provinces';
      options['displayMode'] = 'markers';

      var data = google.visualization.arrayToDataTable(teste2);

      geochart.draw(data, options);
      var table = new google.visualization.Table(document.getElementById('table'));
      table.draw(data, null);
    });
    geochart.draw(data, options);
  };

  google.setOnLoadCallback(drawRegionsMap);
}

initClickPeriodo();
initFollowProcessByStateMap();

$(document).on('ready pjax:end', function (event) {
  console.log(event.target.id);
  if (event.target.id == 'type-person') {
    initClickPeriodo();
  }

  if (event.target.id == 'country') {
    initFollowProcessByStateMap();
    loadProcessMapsStates(mapProcessReadyFN);
  }
})

$(document).ready(function () {
  $.pjax.reload({
    container: "#type-person"
  })
  $.pjax.reload({
    container: "#country"
  })
  loadProcessMapsStates(mapProcessReadyFN);
})