CODEWITHSUNDEEP
javascriptangularjshtmlgoogle-mapsgoogle-maps-api-3
Alessandro
Alessandro

Reputation: 925

AngularJs with Google Maps

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!

Upvotes: 0

Views: 255

Answers (2)

wholevinski
wholevinski

Reputation: 3828

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

  5. You need to define this css rule:

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

Inline style on your directive is not good enough.

  1. 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/

Upvotes: 1

Mindeater
Mindeater

Reputation: 322

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)

Upvotes: 0

Related Questions