CODEWITHSUNDEEP
angularjsangular-google-maps
Stuart
Stuart

Reputation: 1574

angular google maps renders two maps

I'm using ui-gmap-google-map and i'm trying to set the bounds of the map to fit with the markers that I have. This usually works when the distance between them in short. But when i do it with a longer distance between markers, the map renders as pictured here, see it looks like it's rendered two maps. It also looks as though the markers are repeated and starting again off to the right of the "corner" map.

google map rendered incorrectly

I know for a fact that the markers and coordinates are correct.

I am setting the bounds like so in my controller...

uiGmapIsReady.promise(2).then(function(instances) {
                instances.forEach(function(inst) {
                    var map = inst.map;

                    var bounds = new google.maps.LatLngBounds();
                    for (var i in $scope.markers) {
                        bounds.extend(new google.maps.LatLng($scope.markers[i].coords.latitude, $scope.markers[i].coords.longitude));
                    }

                    var fitBounds = new google.maps.LatLngBounds();
                    fitBounds.extend(new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
                    fitBounds.extend(new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));

                    map.fitBounds(fitBounds);

                });
            });

and the html...

<div class="map-container">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" class="google-map">
                <ui-gmap-polyline path="map.path" stroke="map.stroke" fit="true"></ui-gmap-polyline>
                <ui-gmap-marker ng-repeat="m in markers track by $index" idKey="m.id" options="m.options" coords="m.coords" events="m.events"></ui-gmap-marker>
            </ui-gmap-google-map>
        </div>

If i don't set the bounds, it renders fine, just zoomed right in on a seemingly random marker. but i can zoom out and it looks fine, with one map.

I can't find anything on the net about this specific issue. Any help appreciated.

Upvotes: 0

Views: 308

Answers (1)

Stuart
Stuart

Reputation: 1574

So i figured it out eventually...

I had been setting the initial zoom level to 5 when setting up the map. then running a fitBounds() function, which i believe updates the zoom as well.

I set the initial zoom level to 0 instead and this issue went away.

var map = {
                        //zoom: 5,
                        zoom: 0,
                        center: [{
                            latitude: $scope.journey.startCoordinate.lat,
                            longitude: $scope.journey.startCoordinate.lng
                        }, {
                            latitude: $scope.journey.endCoordinate.lat,
                            longitude: $scope.journey.endCoordinate.lng
                        }]};

Upvotes: 1

Related Questions