Skip to content
This repository has been archived by the owner on May 25, 2019. It is now read-only.

angular ui-map, set map to fit markers bounds #55

Closed
jaitor1 opened this issue Jun 30, 2016 · 0 comments
Closed

angular ui-map, set map to fit markers bounds #55

jaitor1 opened this issue Jun 30, 2016 · 0 comments

Comments

@jaitor1
Copy link

jaitor1 commented Jun 30, 2016

I am using ui-map to create a map. I have several points now and I want the map to automatically set the center and the zoom to display all the markers at the beginning.

I found a possible solution here so I added to my project.

The problem is that every time I move around the map, the map goes to the initial zoom and extent.

Is it because angular is continually evaluating the $scope.mapOptions and centering the map?

Controller

$scope.myMarkers = [new google.maps.LatLng (52.537,-2.061), 
                     new google.maps.LatLng (52.564,-2.017)]; 

var latlngbounds = new google.maps.LatLngBounds();


$scope.myMarkers.forEach(function(marker){
               latlngbounds.extend(marker.position);
            });

   $scope.mapOptions = {
        zoom: 17,
        center: latlngbounds.getCenter(),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

HTML

             <div id="map_canvas" ui-map="myMap" ui-options="mapOptions" style="height:800px"></div>


            <!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
            <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]">
            </div>

How can I solve this?

@jaitor1 jaitor1 closed this as completed Jun 30, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant