Is it possible to display a map within a $ mdDialog.show?

0

I'm having trouble doing this. If someone can help me, I'm grateful.

This is Index.html

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular- 
material.min.css">
</head>
<body ng-app="BlankApp" id="corpo">

<div style="position:absolute;bottom:0;right:0px;" ng-controller="DemoCtrl as demo" layout="column" ng-cloak >
  <md-content class="md-padding" layout="column">
    <div class="lock-size" layout="row" layout-align="center center">
      <md-fab-speed-dial md-open="demo.isOpen" md-direction="{{demo.selectedDirection}}"
                         ng-class="demo.selectedMode">
        <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn" style="background-color: red;">
            <ng-md-icon icon="menu" style="fill: white; position:absolute;top:20%;left: 24%; " size="30"></ng-md-icon> 
          </md-button>
        </md-fab-trigger>

          <div ng-controller="localizacao" ng-cloak>
            <md-button aria-label="Localizacao" class="md-fab md-raised md-mini" ng-click="showAdvanced($event)">
              <ng-md-icon icon="location_on" style="fill: red; position: absolute;top:19%;left: 19%; " size="25"></ng-md-icon>
            </md-button>
          </div>


        </md-fab-actions>
      </md-fab-speed-dial>
    </div>
  </md-content>  
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script><scriptsrc='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><scripttype="text/javascript">
  (function() {
    'use strict';

    angular.module('BlankApp',['ngMaterial','ngMdIcons','ngSanitize']) 

      .controller('localizacao', function($scope,$mdDialog){
      $scope.status = '  ';
      $scope.customFullscreen = false;
      $scope.showAdvanced = function(ev) {
        $mdDialog.show({
          controller: DialogController,
          templateUrl:'dialog1.html',
          parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose:true,
          fullscreen: $scope.customFullscreen 
        })
          .then(function(answer) {
          $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.status = 'You cancelled the dialog.';
        });
      };
      function DialogController($scope, $mdDialog) {
        $scope.hide = function() {
          $mdDialog.hide();
        };

        $scope.cancel = function() {
          $mdDialog.cancel();
        };

        $scope.answer = function(answer) {
          $mdDialog.hide(answer);
        };
      }    
    })

      .controller('DemoCtrl', function() {
      this.topDirections = ['left', 'up'];
      this.bottomDirections = ['down', 'right'];

      this.isOpen = false;

      this.availableModes = ['md-fling', 'md-scale'];
      this.selectedMode = 'md-fling';

      this.selectedDirection = 'up';
    });

  })();
</script>
</body>
</html>

This is dialog1.html

<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script><scriptsrc="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script></head><body><md-dialogaria-label="Localização">
  <form ng-cloak>
    <ng-map 
            center="[-28.7080188,-49.28825410000002]" zoom="18"></ng-map>
  </form>
</md-dialog>
</body>
</html>
    
asked by anonymous 06.09.2018 / 15:23

0 answers