Icontem

File: examples/circle.html

Recommend this page to a friend!
  Classes of Jean-Baptiste DEMONTE  >  Angular Google Maps Native  >  examples/circle.html  >  Download  
File: examples/circle.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: Angular Google Maps Native
Add AngularJS directives to render GoogleMaps
Author: By
Last change: "options" become a dynamic expression
Date: 3 years ago
Size: 1,417 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="assets/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="../dist/angular-google-maps-native.min.js"></script>
  <script src="assets/tools.js"></script>
  <script>
    angular.module('MyApp', ['GoogleMapsNative', 'ExampleTools'])

        .controller('MyCtrl', function ($scope, console) {
          $scope.console = console;
        })
    ;

  </script>
</head>
<body ng-controller="MyCtrl" ng-init="showCircle=true">
  <div class="panel">
    <div class="item">
      <label>
        <input type="checkbox" ng-model="showCircle"> Show the circle
      </label>
    </div>
    <div class="item">
      <label>
        Radius: <input type="text" ng-model="radius" ng-init="radius=250000">
      </label>
    </div>
    <div class="item">
      <label>
        fillColor: <input type="text" ng-model="fillColor" ng-init="fillColor='#008BB2'">
      </label>
    </div>
  </div>

  <gm-map options="{center: [37.772323, -122.214897], zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP}">
    <gm-circle
        ng-show="showCircle"
        center="map.getCenter()"
        options="{radius: radius, fillColor: fillColor, strokeColor: '#005BB7'}"
    >
    </gm-circle>
  </gm-map>

  <console></console>

</body>
</html>