Aaron Blakeley Aaron Blakeley - 6 months ago 12
Javascript Question

Angular google Map will not render and throws no errors

I am new to angular but I think I have everything right. It is a pretty simple setup.

Here is the app

var appLocations = angular.module('locations', ['uiGmapgoogle-maps']).config(function(uiGmapGoogleMapApiProvider) {

uiGmapGoogleMapApiProvider.configure({
// key: 'I am not providing a key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});

appLocations.controller('LocationsController', function($scope, $http) {
$http.get('/json/locations/')
.then(function(res){
$scope.locations = res.data;
});
});

appLocations.controller('MapController', function($scope, $http) {
$http.get('/json/locations/')
.then(function(res){
$scope.locations = res.data;
});
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
});


Here is the markup

<div class="main1-in" ng-app="locations">
<div ng-controller="MapController">
<ui-gmap-google-map></ui-gmap-google-map>
</div>
<div class="health-care large-12 medium-11 small-12">
<h1>Welcome</h1>
<?php dynamic_sidebar('Welcome')?>
</div>
<div class="location large-12 medium-12 small-12" ng-controller="LocationsController">
<h2>LOCATIONS</h2>
<div class="search">
<input type="text" class="text-field" value="Find a location" ng-model="search" placeholder="Search...">
<span><i class="fa fa-search"></i></span>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="location-carousel large-12 medium-12 small-12">
<ul>
<li ng-repeat="location in locations | filter:search">
<div class="location-in" itemscope itemtype="http://schema.org/MedicalClinic">
<img src="{{location.thumbnail[0]}}" alt="img" width="273" height="157">
<h6><span itemprop="name">{{location.Name}}</span></h6>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">{{location.address1}} {{location.address2}}</span><br>
<span itemprop="addressLocality">{{location.city}}</span>,
<span itemprop="addressRegion">{{location.state}}</span>
<span itemprop="postalCode">{{location.zip}}</span>
</p>
<small itemprop="telephone">{{location.phoneNumber}}</small>
<a href="{{location.permalink}}" itemprop="url">Visit location page</a>
</div>
</li>
</ul>
</div>

</div>
</div>


I get no errors in the console. The rest of the application renders but the map itself does not. Any help would be appreciated.

Answer

All your operations are correct according to documentation, except for one thing, you need to mention a map center and the zoom level for the map to start with, see Quickstart documentation

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

map.center and map.zoom gets picked up from the MapController you have provided, a local-copy works for me. Check if you hold any problems with other parts of code.

and definitely,

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

into your CSS, or dynamically set height accessing the DOM.

Comments