AngularJs with Google Maps

Question

I have this code because I want inlude the Google maps in my webApp but don't work. This is the page html:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/libs/angular.js/angular.js"></script>
        <script src="js/libs/angular.js/angular-route.js"></script>

        <script src="http://maps.google.cn/maps/api/js?sensor=false"></script>
        <script src="js/libs/mappa/lodash.js"></script>
        <script src="js/libs/mappa/angular-google-maps.min.js"></script>

    </head>
    <body>

         <div>
              <ui-gmap-google-map center=map.center zoom=map.zoom style="width: 400px; height: 400px;"></ui-gmap-google-map>                    
        </div>

    </body>
</html>

This is my controller in AngularJs:

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

modulo.controller('descriptionController', function ($scope, $routeParams, $http) {
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

    }).
        error(function (data, status) {
            $scope.listaEventi = "Request failed";
        });

Where is the error? I think that i import exact library!

Also, if that's all of your JS code...your call to .error is on the controller itself... — wholevinski
– wholevinski, Commented Apr 13, 2015 at 12:25

wholevinski · Accepted Answer · 2015-04-13 14:00:43Z

1

You're missing quotes around your html attributes...
You're missing ng-app
You're missing ng-controller
You're calling .error on your controller (?)

You need to define this css rule:

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

Inline style on your directive is not good enough.

Please check your js error console next time. Your statement of "there are no errors" is most likely not true.

Here's a working fiddle... http://jsfiddle.net/ybtn4kn2/

answered Apr 13, 2015 at 14:00

wholevinski

3,85821 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alessandro Over a year ago

I find the solution...first of the all this is a piece of the code anyway i didn't define the css rule...otherwise all ok!

wholevinski Over a year ago

OK...you should post your code verbatim next time if you want us to effectively help you then. Please mark this answer correct if it's helped you.

Mindeater · Accepted Answer · 2015-04-13 12:41:05Z

0

You seem to have forgotten your

<div ng-controller="descriptionController">

And you will need to pass in the library to the controller

.controller("descriptionController", function($scope, uiGmapGoogleMapApi)

edited Apr 13, 2015 at 12:41

answered Apr 13, 2015 at 12:26

Mindeater

3223 silver badges9 bronze badges

1 Comment

Alessandro Over a year ago

I use ng-controller="descriptionController" but i omitted it in copy XD

Collectives™ on Stack Overflow

AngularJs with Google Maps

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related