I'm trying to load a map into an HTML file that is mapped to a route using ui.router.
Head of index
<head>
<title>Página Inicial</title>
<base href="/">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmmEch_9VmTUy7RMikSa0mGk9mqZGwh2M"></script><scriptsrc="assets/lib/angular/angular.min.js"></script>
<script src="assets/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- Main App -->
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/registerController.js"></script>
<script src="controllers/caronaController.js"></script>
<script src="routes/app-route.js"></script>
<script src="config/apiConfig.js"></script>
<script src="services/userServiceAPI.js"></script>
<script src="services/rideServiceAPI.js"></script>
<!-- Routes
-->
<link rel="stylesheet" href="assets/lib/bootstrap/dist/css/bootstrap.min.css">
<script src="assets/lib/jquery/dist/jquery.min.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!--
<script src="services/myInterceptor.js"></script>
-->
<style type="text/css">
.nav{
background: #2d2d30;
opacity : 0.9;
font-family: Montserrat;
}
.navbar-nav li a{
color: red;
}
#map{
height: 100%;
}
</style>
</head>
Route file.js
$stateProvider.state("/home", {
cache : false,
url : "/home",
views : {
"header" : {
templateUrl : "dashboard2.html",
controller : "caronaController"
},
"content" : {
templateUrl : "home.html",
controller : "caronaController"
}
}
})
Controller da página Home.html
var app = angular.module("app");
app.controller("caronaController", function ($scope, rideServiceAPI, $http) {
$scope.salvar = function (ride) {
$http.post(apiConfig.api + "/ride/" + id, ride).then(function (response) {
console.log("Entrou");
}), function (response) {
console.log("Não Entrou");
};
};
var initialize = function() {
var mapOptions = {
center: new google.maps.LatLng(41.894465, -88.460500),
zoom: 12,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
};
google.maps.event.addListenerOnce(window, "load", initialize);
});