CODEWITHSUNDEEP
angularjsgoogle-mapsangularjs-google-maps
yu.pitomets
yu.pitomets

Reputation: 1840

Google maps in angular doesn't update the map correctly

I am using ng-map google maps angular library and faced a problem when maps doesn't update, when I reload the page in my browser. Also I noticed that browser ask to share my current location and it does not matter if I will agree or not to share location, if I will access the same page next time, maps get updated correctly (without full reload the page)

 <div class="col-xs-10" ng-show="hasMap == true">
     <map zoom="13" center="{{ location }}"> 
       <marker position="{{ location }}" animation="DROP" icon="blue_marker.png">
       </marker>
    </map>
 </div>

enter image description here

Upvotes: 2

Views: 1932

Answers (1)

Philippe Green
Philippe Green

Reputation: 952

I just ran into this problem as well. I believe it's due to the map tiles loading before the div is rendered in its final size.

In my particular case adding an ng-if to the map based on the value of a variable set in the controller fixed the problem. For example, try adding ng-if="readyForMap":

  <div class="col-xs-10" ng-show="hasMap == true">
     <map ng-if="readyForMap" zoom="13" center="{{ location }}"> 
       <marker position="{{ location }}" animation="DROP" icon="blue_marker.png">
       </marker>
    </map>
  </div>

Then in the controller just set the value of readyForMap to true:

$scope.readyForMap = true;

At first I set it to true with a timeout but that seems to be unnecessary.

I'm not an expert on the order in which Angular and Google Maps renders things so I'm not 100% sure why this works. However, this seems to delay rendering the map long enough for everything to be in the correct position and size.

Upvotes: 3

Related Questions