Map does not load en route

Asked

Viewed 60 times

0

I am trying to upload a map into an HTML file that is mapped on a route using ui.router.

Head of the 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>

    <script src="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>

File of routes.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);


});
  • What’s the mistake?????

  • Console shows no error. Only map is not rendered.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.