google maps gray color not working it only works if I resize the browser, I'm using AngularJS 1.6.4
html
<ng-map zoom="8" center="{{h.latitude}},{{h.longitude}}" class="col s12 m12" scale-control="true" map-type-control="true" map-type-control-options='{position:"top_right", style:"dropdown_menu", mapTypeIds:["HYBRID","ROADMAP","SATELLITE","TERRAIN"]}' id="map"
style="height:auto;">
<marker position="{{h.latitude}},{{h.longitude}}" icon="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png">
</marker>
</ng-map>
ini.js
//home feed
var app = angular.module('homephotos', ['ngMap']);
app.controller('home', function($scope, $http, $timeout, NgMap) {
$http.get("http://xxx")
.then(function(response) {
$scope.home_feed = response.data.results;
});
//Init maps
$scope.iniMap = function() {
NgMap.getMap().then(function(map) {
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
console.log(map);
});
}
});
just needed to call the one by one on clik , example in each off post when click the see more opition inigeocode
$scope.init_geocode = function() {
console.log('init_geocode');
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(attrs.lat, attrs.lng);
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var city = results[1].formatted_address;
element.text(city);
}
else {
element.text('Location not found');
}
}
else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function () {
$scope.init_geocode();
element.text('Geocoder failed due to: ' + status);
}, 1000);
}
else {
element.text('Geocoder failed due to: ' + status);
}
});
}