1

After wasting a bunch of time on this, I came here for help.

I'm using Angular Google Maps from here:

https://angular-ui.github.io/angular-google-maps

Installed all packages with bower and it seems there are no errors of incorrect sources paths or missing packages.

more than then I don't get any errors or warnings when trying to run the page. It defiantly loads but the map does not

index.html dependency declaring:

<!-- Google maps -->
<script src='//maps.googleapis.com/maps/api/js'></script>

<script src='bower_components/lodash/lodash.js'></script>
<script src='bower_components/angular-simple-logger/dist/angular-simple-logger.min.js'></script>
<script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script>

main app.js

var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'uiGmapgoogle-maps']);

    weatherApp.config(function(uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
            key: 'my-key',
            v: '3.20', //defaults to latest 3.X anyhow
            libraries: 'weather,geometry,visualization'
        });
    })

map controller

weatherApp.controller('forecastMap', ['$scope', 'uiGmapGoogleMapApi', function($scope, uiGmapGoogleMapApi){

    uiGmapGoogleMapApi.then(function(maps) {
        $scope.map = { 
            center: { 
                latitude: 45, 
                longitude: -73
            }, 
            zoom: 8 };
    });

}]);

map css

.angular-google-map-container { 
    height: 400px; 
    width: 400px;
}

map html

<h1>This is Weather Map Page</h1>
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

(the h1 tag is loading and visible)

the router file

weatherApp.config(function($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'homeController'
    })

    .when('/forecast', {
        templateUrl: 'views/forecast.html',
        controller: 'forcastController'
    })

    .when('/forecast/:days', {
        templateUrl: 'views/forecast.html',
        controller: 'forcastController'
    })

    .when('/map', {
        templateUrl: 'views/map.html',
        controller: 'forecastMap'
    })

});

I'm following the simple demo from here: https://angular-ui.github.io/angular-google-maps/#!/use

Working on Windows 8 (wish I hadn't but it is what it is..)

What am I doing wrong? it looks so simple and yet cant get it to work.. very frustrated..

Thanks

Blue Bot
  • 2,278
  • 5
  • 23
  • 33
  • Did you configure the API as it says in this link? http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi – luk492 Dec 26 '15 at 13:35
  • No, but did it now still the same outcome (edited the answer with the new configurations in the controller and the main app.js file) – Blue Bot Dec 26 '15 at 13:48
  • have you provided an api key? I think v.3 requires an api key – koox00 Dec 26 '15 at 14:58
  • just added it with the key i got from google (inside app.js) still nothing – Blue Bot Dec 26 '15 at 15:16
  • I was just going to comment to ignore my comment. it works without an api key but for limited number of requests a day I think – koox00 Dec 26 '15 at 15:17

0 Answers0