Stuart Stuart - 1 year ago 103
AngularJS Question

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 =;

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



and the html...

<div class="map-container">
<ui-gmap-google-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="" options="m.options" coords="m.coords" events=""></ui-gmap-marker>

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.

Answer Source

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: $,
                            longitude: $scope.journey.startCoordinate.lng
                        }, {
                            latitude: $,
                            longitude: $scope.journey.endCoordinate.lng