Angular Google Maps - automatically set 'cente

问题:

I have a dynamically generated list of markers within my Google Map. I want the map's center to be the center of all the markers and zoomed out just enough so that all markers are in view.

In terms of calculating the map center, perhaps this could be possible by iterating through all the latitudes and longitudes and finding the central point. However, I cannot figure out the best way to calculate what the zoom should be.

Is this possible to achieve?

My map is being used in the template like this:

<ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-marker ng-repeat="home in filteredHomes = (resCtrl.filteredHomes | orderBy : $storage.params.orderby : $storage.params.reverseOrder)" coords="{latitude: home.location.latitude, longitude: home.location.longitude}" idkey="home.homeId">
    </ui-gmap-marker>
</ui-gmap-google-map>

UPDATE

Attempted Angular implementation from advice from @Tiborg:

uiGmapGoogleMapApi.then(function(maps) {
    $scope.map = {
        center: $scope.$storage.params.views.map.location,
        zoom: $scope.$storage.params.views.map.zoom,
        events: {
            click: function() {
                var bounds = new google.maps.LatLngBounds();
                for (var i in $scope.filteredHomes) {
                    bounds.extend($scope.filteredHomes[i].location);
                }
                $scope.map.fitBounds(bounds);
            }
        }
    };
});

This produces the console error: TypeError: undefined is not a function (evaluating 'a.lat()')

回答1:

Use the LatLngBounds class in Google Maps API, like this:

var bounds = new google.maps.LatLngBounds();
for (var i in markers) // your marker list here
    bounds.extend(markers[i].position) // your marker position, must be a LatLng instance

map.fitBounds(bounds); // map should be your map class

It will nicely zoom and center the map to fit all your markers.

Of course, this is the pure javascript, not the angular version, so if you have problems implementing it in angular (or you don't have access to the map instance from where you get the markers), let me know.

回答2:

angular-google-maps has taken care of this feature. All you need to do is add fit="true" attribute in your markers directive (ui-gmap-markers). Example : <ui-gmap-markers models="map.markers" fit="true" icon="'icon'"> Please refer the document http://angular-ui.github.io/angular-google-maps/#!/api

回答3:

The answer has been posted for another problem: https://stackoverflow.com/a/23690559/5095063 After that you have just to add this line:

$scope.map.control.getGMap().fitBounds(bounds);

回答4:

Thanks to all the replies, I got this code which is working perfectly for me:

var bounds = new google.maps.LatLngBounds();
for (var i = 0, length = $scope.map.markers.length; i < length; i++) {
  var marker = $scope.map.markers[i];
  bounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude));
}
$scope.map.control.getGMap().fitBounds(bounds);

I hope it will help to someone.

回答5:

Also use timeout to make sure it is digested properly

 uiGmapIsReady.promise()
          .then(function (map_instances) {
            var bounds = new google.maps.LatLngBounds();
            for (var i in $scope.map.markers) {
              var marker = $scope.map.markers[i];
  bounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude));
            }

            $timeout(function() {
              map_instances[0].map.fitBounds(bounds);
            }, 100);
          });