javascriptangularjsgoogle-mapsng-map

google maps gray color not working


google maps gray color not working it only works if I resize the browser, I'm using AngularJS 1.6.4

enter image description here

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);
    });
  }
});

Solution

  • 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);
                   }
    
               });
            }