Angular Google Maps Not Displaying

ionic-v1
1

Hey everyone,

I’m trying to implement Angular Google Maps but the actual map is not showing up.

I have this in my HTML when viewing the page through Ionic Serve.

<div id="map_canvas" ng-controller="loadMapController">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"><div class="angular-google-map"><div class="angular-google-map-container">
</div><div ng-transclude="" style="display: none"></div></div>

So I know that its coming through to the front end, but the map just isn’t loading.

I’m also following the directions according to the quickstart for Angular Maps
Angular Maps Quickst

So I’m not entirely sure what is going on, any help would be greatly appreciated!

2

Hi,
try to replace your html part with this simplier html

<div ng-controller="MapController">
        <ui-gmap-google-map center="map.center"
                            zoom="map.zoom">
        </ui-gmap-google-map>
</div>

map.center and map.zoom are taken from controllers $scope.map.center, rest. $scope.map.zoom

and in css file define this

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

And inside MapController

$scope.map = {
center: {
            latitude:50,
            longitude:15

},
zoom :6
}

It should work, if all required javascript files are loaded correctly.

Denis

1 Like
3

Hey,

That worked, thank!

4

glad to help,You welcome…
Denis