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>