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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -