Map not fully loading

[RomainGoncalves]

Hey guys,

I'm using the map in a very simple way. I have the following HTML:

<ui-gmap-google-map center="map.center" zoom="map.zoom" pan="'true'">
        <ui-gmap-marker
          idKey="marker.idKey"
          coords="marker.coords"
          options="marker.options"
          icon="marker.icon">
        </ui-gmap-marker>
</ui-gmap-google-map>

and js:

$scope.map = {
    center: {
      latitude: -8.19,
      longitude: 115.5
    },
    zoom: 9
  };

  $scope.marker = {
    idKey: 1,
    coords: {
      latitude: -8.5831156,
      longitude: 116.2729975
    },
    icon: 'http://localhost:9000/images/icons/rsz_map-marker.png',
    options:{
      draggable: true
    }
  };

So my issue is that the map is only loading/showing one tile. The one on the top left. The others load only if I resize the window. I can zoom and drag the map, but the tiles don't load.

Thanks for any help.

[gitnik]

check the FAQ

[RomainGoncalves]

Good one mate.

Thank's for your 'help'.

For those not interested in checking the FAQ, I was using ng-show to show/hide the form that had the map. But ng-show doesn't render before the expression is true. Instead use ng-if.

[mcverter]

I am having the render problem as well, but there is not an explicit ng-show involved. What I do have in this case is a tabbed view, in which one tab shows a list, one tab shows a map, and one tab shows a calendar.

I have remedied the situation by wrapping the map in a 'div ng-if="showMap"' and a 'button ng-click="showMap=true' Show Map 'button'

But this is a bit of a hack.

Any ideas? Is there an implicit show/hide in the tab control that I can explicitly add to my controller instead of doing the button workaround?

[nmccready]

Please read and check around but the problem is google. If the map is hidden in anyway it needs to be notified to resize. ng-if is one workaround and or hack. The other is to explicitly tell the map to resize (search google).

There is an existing issue, where I tried to make it cleaner by using ng-init but in the end I gave up. However, using ng-init on your end (controller) probably is the cleanest way. By all means try to find a better way.

[nmccready]

639

[nmccready]

603

[nmccready]

503

[nmccready]

1056

[nmccready]

Here is the main one I wanted everyone to see #1114

[mcverter]

Thanks for your reply. I figured out a better workaround right after posting -- namely, attach an ng-model to the tab controls. I've had the same problem, of the map only partially rendering, in other contexts. Thanks for looking into it!

On Wed, Apr 1, 2015 at 2:23 PM, nmccready notifications@github.com wrote:

Please read and check around but the problem is google. If the map is hidden in anyway it needs to be notified to resize. ng-if is one workaround and or hack. The other is to explicitly tell the map to resize (search google).

There is an existing issue, where I tried to make it cleaner by using ng-init but the end I gave up. However, using ng-init on your end (controller) probably is the cleanest way. By all means try to find a better way.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/angular-google-maps/issues/863#issuecomment-88584446 .

[AnthonyCorrado]

Thanks everybody for the simple explanation and solution in ng-if. Big time thanks to RomainGoncalves for making it even easier!

[denich]

Thanks @RomainGoncalves, ng-if workaround solution has helped me.

[panconjugo]

how did you guys solve it using ng-if? any sample?

[mcverter]

Hi all,

I am wondering whether there is an IETF standards document with standards for how to encode geolocation information.

I know googlemaps has an API but I am looking for an RFC, like this one for calendars:

https://tools.ietf.org/html/rfc5545

---

How can I ......explain ............to you my state of mind? The earth has a whole skyful of lights... The blue sky, ......a hell of a lot ............of stars.

Vladimir Mayakovsky

[sg28]

I was introducing the map into a modal ,SO it loaded the first time i open the modal but then it was not doing it the next time. It seemed to work with the ng-init for now,Is ng-init a hack? am curious!

[nicosampler]

I found a cleaner solution here: https://github.com/angular-ui/angular-google-maps/issues/1114#issuecomment-72940314