Map doesn't display when creating a second time

Maps don’t seem to display a second time. Here’s an Angular directive I’m using to test it:

.directive('map', function () {
    return {
        restrict: 'E',
        link: function (scope, el, attrs) {
            var map;

            el.on('$destroy', function () {
                console.log('destroy called');
                map.setDiv(null);
            });

            document.addEventListener('deviceready', function () {
                console.log('device ready, build map');
                map = plugin.google.maps.Map.getMap(el[0]);
            }, false);
        }
    }
});

The first time, everything runs great and a map shows up. When the <map> element disappears, I call map.setDiv() and the map disappears.

Now, when the <map> element gets added again, the logs show the map should be built, and no errors are thrown, but no map shows up.

Any ideas?

[wf9a5m75]

use map.remove() / map.getMap() in v1.2.0

[axelosorio]

I’m using Jquery to remove div code. In my case I was using the jquery dialog, then when I close the dialog I’m replacing the html from the div (where google maps is showing the map) with the original div code.

My original div code was

<div id="mapaLocalsub" style="width:500px; height:450px; " ></div>

I notice that after google maps was working it fills the div with a lot of things and style, then in the close function from my Jquery.dialog I’m replacing the html with my original div code:

$( "#mapaLocal" ).dialog({
      height: 450,
      width: 500,
      modal: true,
      close: function() {
      $( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px;     height:450px; \" ></div>");
      }
});

But of course, you can use the Jquery html method in a function that you call when close the function or before creating your map, hope it helps.

$( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px;     height:450px; \" ></div>");