2

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

allenhwkim
  • 27,270
  • 18
  • 89
  • 122
yu.pitomets
  • 1,660
  • 2
  • 17
  • 44
  • I suspect that your {{location}} is not updating correctly. However, I am not sure though. Please provide me plnkr example to reproduce your error. If your map is in part of show/hide, there was discussion about that. – allenhwkim Dec 08 '14 at 16:17

1 Answers1

3

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.

Philippe Green
  • 894
  • 7
  • 10