javascript - fit="true" + single marker => zoom too big , Angular-google-maps,Angular js -
i struggling setting zoom level when have single marker on page. page loads market zoomed in point gets difficult see surrounding area.
angular.module('appmaps', ['uigmapgoogle-maps']) .controller('mainctrl', function($scope,$http) { $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 , bounds: {} }; $scope.options = { scrollwheel: false }; var createrandommarker = function(i, bounds, idkey) { var lat_min = bounds.southwest.latitude, lat_range = bounds.northeast.latitude - lat_min, lng_min = bounds.southwest.longitude, lng_range = bounds.northeast.longitude - lng_min; if (idkey == null) { idkey = "id"; } var latitude = lat_min + (math.random() * lat_range); var longitude = lng_min + (math.random() * lng_range); var ret = { latitude: latitude, longitude: longitude, title: 'm' + }; ret[idkey] = i; return ret; }; $scope.randommarkers = []; // bounds map once it's loaded $scope.$watch(function() { return $scope.map.bounds; }, function(nv, ov) { // need regenerate once if (!ov.southwest && nv.southwest) { var markers = []; (var = 0; < 1; i++) { markers.push(createrandommarker(i, $scope.map.bounds)) } //$scope.randommarkers = markers; } }, true); disicon = function(){ var markers = []; var ret = { latitude: 32.7689285, longitude: -89.1079636, title: 'm' }; ret['id'] = 1; markers.push(ret); $scope.randommarkers = markers; } disicon(); });
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; margin-top:20px; } #map_canvas { position: relative; } .angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
<!doctype html> <html xmlns:ng="http://angularjs.org/" ng-app="appmaps"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script src="https://code.angularjs.org/1.3.14/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.x/dist/angular-google-maps.js"></script> <!--script--> <style type="text/css"> html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; margin-top:20px; } #map_canvas { position: relative; } .angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } </style> </head> <body> <div id="map_canvas" ng-controller="mainctrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds"> <ui-gmap-markers models="randommarkers" coords="'self'" icon="'icon'" fit="true"> </ui-gmap-markers> </ui-gmap-google-map> </div> <!--example--> </body> </html>
what did use ng-if inside ui-gmap-markers. if 1 marker use fit=false, if more 1 use fit=true.
Comments
Post a Comment