In this Angular getting started guide, you'll learn how to use the wijmaps in an HTML project using HTML markup, jQuery script, and AngularJS directives.
For more complex samples that have the controller and model in separate files, see the AngularJS Directive Gallery on our web site.
Drop down and copy references to paste inside the head tags
References |
Copy Code |
---|---|
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20183.140.min.js"></script> |
Drop down and copy references to paste inside the head tags
Script |
Copy Code |
---|---|
<script> function myCtrl($scope) { $scope.zoom = 3; $scope.center = { x: 121.4, y: 31.2 }; $scope.source = "bingMapsAerialSource"; } </script> |
Drop down and copy references to paste inside the head tags
Markup |
Copy Code |
---|---|
center.x:<span>{{center.x}}</span><br/> center.y:<span>{{center.y}}</span><br/> zoom:<span>{{zoom}}</span> <wij-maps zoom="zoom" center="center" source="source" style="width:680px; height: 400px;"> </wij-maps> |
MISSING WIDGET TYPE: The "Live Widget" Widget Type could not be found. The "Live Widget" Widget Type may have been deleted since this Widget was created. |