angular-google-maps not showing Map!

[Prashantko]

When I load the page and check chrome console I find this errors:

here is code

<div class="col-md-8 col-sm-7">
            <div class="relative mrg-20">
                <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control" options="mapOptions">
                    <!-- Map Pins -->
                    <ui-gmap-markers models="map.markers" idkey="'id'" fit="false" icon="'icon'" coords="'self'" events="map.markersEvents">
                    </ui-gmap-markers>
                    <!-- InfoWindows -->
                    <!-- this works, but infowindow is not attached to marker -->
                    <ui-gmap-window show="map.window.show"
                                    coords="map.window.model"
                                    templateurl="'/app/views/templates/mapInfoWindow.html'"
                                    templateparameter="map.window.model"
                                    options="map.window.options"
                                    ng-cloak>
                    </ui-gmap-window>`
`                    <!-- try this instead of the above and the template does not load -->
                    <!-- <ui-gmap-window show="map.window.show" coords="map.window.model" templateUrl="'infowindow.tpl'" ng-cloak></ui-gmap-window>-->
                </ui-gmap-google-map>
            </div>
        </div>

In controller

    $http({
        method: "GET",
        url: "/api/Store/GetStoresOnMainCommodityId",
        params: {
            MainCommId: parseInt(mainCommId)
        }
    }).then(function (response) {
        // Do stuff with your $scope.
        // Note: Some of the directives require at least something to be defined originally!
        // e.g. $scope.markers = []

        // uiGmapGoogleMapApi is a promise.
        // The "then" callback function provides the google.maps object.
        uiGmapGoogleMapApi.then(function (maps) {
         maps.visualRefresh = true;
            $scope.map = {
                center: {
                    latitude: 15.913952,
                    longitude: 78.4679171
                },
                control: {

                },
                zoom: 6,
                window: {
                    model: {},
                    show: false,
                    options: {
                        draggable: false,
                        pixelOffset: {
                            width: -1,
                            height: -20
                        }
                    }
                },
                markers: response.data,
                markersEvents: {
                    click: function (marker, eventName, model, args) {
                        $scope.map.window.model = model;
                        $scope.map.window.show = true;

                    }
                }
            };

            // http://stackoverflow.com/questions/27481184/angular-google-maps-automatically-set-center-and-zoom-to-fit-in-all-marker
        });

    }, function (response) {
        console.log(response.statusText);
    });
    // map options 
    $scope.mapOptions = {
        scrollwheel: false
    }

    // filter
    $scope.smallLetters = function (text) {
        if (text !== null)
            return text.trim().replace(/[^A-Z0-9]+/ig, "-").toLowerCase();
    };
}

])

In app.js, I have included everything like map key and references and all. what is the exact problem ?

[Hywan]

Hello,

How is it related to this project?