ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
33 lines • 12.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JSDoc: ng-map</title>
<link href="css/prettify-tomorrow.css" type="text/css" rel="stylesheet">
<link href="css/site.css" type="text/css" rel="stylesheet">
</head>
<body ng-app="">
<nav id="toc">
<input placeholder="Filter" id="filter-input" class="col12 block field" type="text">
<div class="nav-wrapper">
<h2><a href="index.html">Index</a></h2>
<ul class="module">
<!-- undefined -->
<h2 class="module">
<a chref="" ng-click="moduleundefined = !moduleundefined">
module: undefined
</a>
<i ng-cloak="" ng-show="moduleundefined">+</i>
</h2>
<li id="undefined" ng-hide="moduleundefined">
<ul class="group">
<h2>
<a href="" ng-click="undefinedservice = !undefinedservice">
service
</a>
<i ng-cloak="" ng-show="undefinedservice">+</i>
</h2>
<ul ng-hide="undefinedservice">
<li>
<a href="Attr2MapOptions.html">Attr2MapOptions</a>
</li><li>
<a href="GeoCoder.html">GeoCoder</a>
</li><li>
<a href="GoogleMapsApi.html">GoogleMapsApi</a>
</li><li>
<a href="NavigatorGeolocation.html">NavigatorGeolocation</a>
</li><li>
<a href="StreetView.html">StreetView</a>
</li>
</ul>
</ul><ul class="group">
<h2>
<a href="" ng-click="undefineddirective = !undefineddirective">
directive
</a>
<i ng-cloak="" ng-show="undefineddirective">+</i>
</h2>
<ul ng-hide="undefineddirective">
<li>
<a href="bicycling-layer.html">bicycling-layer</a>
</li><li>
<a href="custom-control.html">custom-control</a>
</li><li>
<a href="directions.html">directions</a>
</li><li>
<a href="drawing-manager.html">drawing-manager</a>
</li><li>
<a href="dynamic-maps-engine-layer.html">dynamic-maps-engine-layer</a>
</li><li>
<a href="fusion-tables-layer.html">fusion-tables-layer</a>
</li><li>
<a href="heatmap-layer.html">heatmap-layer</a>
</li><li>
<a href="info-window.html">info-window</a>
</li><li>
<a href="kml-layer.html">kml-layer</a>
</li><li>
<a href="map-data.html">map-data</a>
</li><li>
<a href="map-lazy-load.html">map-lazy-load</a>
</li><li>
<a href="map-type.html">map-type</a>
</li><li>
<a href="maps-engine-layer.html">maps-engine-layer</a>
</li><li>
<a href="marker.html">marker</a>
</li><li>
<a href="overlay-map-type.html">overlay-map-type</a>
</li><li>
<a href="places-auto-complete.html">places-auto-complete</a>
</li><li>
<a href="shape.html">shape</a>
</li><li>
<a href="streetview-panorama.html">streetview-panorama</a>
</li><li>
<a href="traffic-layer.html">traffic-layer</a>
</li><li>
<a href="transit-layer.html">transit-layer</a>
</li>
</ul>
</ul><ul class="group">
<h2>
<a href="" ng-click="undefinedprovider = !undefinedprovider">
provider
</a>
<i ng-cloak="" ng-show="undefinedprovider">+</i>
</h2>
<ul ng-hide="undefinedprovider">
<li>
<a href="NgMap.html">NgMap</a>
</li>
</ul>
</ul><ul class="group">
<h2>
<a href="" ng-click="undefinedfactory = !undefinedfactory">
factory
</a>
<i ng-cloak="" ng-show="undefinedfactory">+</i>
</h2>
<ul ng-hide="undefinedfactory">
<li>
<a href="NgMapPool.html">NgMapPool</a>
</li>
</ul>
</ul>
</li>
</ul><ul class="module">
<!-- ngmap -->
<h2 class="module">
<a chref="" ng-click="modulengmap = !modulengmap">
module: ngmap
</a>
<i ng-cloak="" ng-show="modulengmap">+</i>
</h2>
<li id="ngmap" ng-hide="modulengmap">
<ul class="group">
<h2>
<a href="" ng-click="ngmapdirective = !ngmapdirective">
directive
</a>
<i ng-cloak="" ng-show="ngmapdirective">+</i>
</h2>
<ul ng-hide="ngmapdirective">
<li>
<a href="ngmap.custom-marker.html">custom-marker</a>
</li>
</ul>
</ul>
</li>
</ul><ul class="module">
<!-- ng_ap -->
<h2 class="module">
<a chref="" ng-click="moduleng_ap = !moduleng_ap">
module: ngMap
</a>
<i ng-cloak="" ng-show="moduleng_ap">+</i>
</h2>
<li id="ngMap" ng-hide="moduleng_ap">
<ul class="group">
<h2>
<a href="" ng-click="ng_apdirective = !ng_apdirective">
directive
</a>
<i ng-cloak="" ng-show="ng_apdirective">+</i>
</h2>
<ul ng-hide="ng_apdirective">
<li>
<a href="ngMap.ng-map.html">ng-map</a>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</nav>
<div id="content" class="page-wrap">
<h3 style="float:right; color:#ccc">
Angular directive
</h3>
<h1 class="title">
ng-map
<a class="name-link signature-attributes" href="source/ngMap.ng-map.html#line1">source</a>
</h1>
<div id="main" class="big-container">
<!-- source code html -->
<!-- index.html -->
<!-- class files -->
<div>
<div><div class="container-overview">
<ul class="chips">
</ul>
<div class="clearfix"></div>
<div class="description">
<h4>Description</h4>
<p>Implementation of <a href="__MapController.html">__MapController</a>
Initialize a Google map within a <code><div></code> tag
with given options and register events</p>
</div>
<div class="details"></div>
<div>
<h4>Parameters</h4>
<table class="params">
<thead>
<tr><th>Name</th><th>Type</th><th class="last">Description</th></tr>
</thead>
<tbody>
<tr>
<td class="name" nowrap="">
<a id="Attr2Options"></a>
Attr2Options
</td>
<td class="type"><span class="param-type">
<a href="service.html">service</a>
</span></td>
<td class="description last">
<span>
<p>convert html attribute to Google map api options</p>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h4>Attributes</h4>
<table class="params">
<thead>
<tr><th>Name</th><th>Type</th><th class="last">Description</th></tr>
</thead>
<tbody>
<tr>
<td class="name" nowrap="">map-initialized</td>
<td class="type"><span class="param-type">
Expression
</span></td>
<td class="description last">
<span>
<p>callback function when map is initialized
e.g., map-initialized="mycallback(map)"</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">geo-callback</td>
<td class="type"><span class="param-type">
Expression
</span></td>
<td class="description last">
<span>
<p>if center is an address or current location,
the expression is will be executed when geo-lookup is successful.
e.g., geo-callback="showMyStoreInfo()"</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">geo-fallback-center</td>
<td class="type"><span class="param-type">
Array
</span></td>
<td class="description last">
<span>
<p>The center of map incase geolocation failed. i.e. [0,0]</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">geo-location-options</td>
<td class="type"><span class="param-type">
Object
</span></td>
<td class="description last">
<span>
<p>The navigator geolocation options.
e.g., { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }.
If none specified, { timeout: 5000 }.
If timeout not specified, timeout: 5000 added</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">zoom-to-include-markers</td>
<td class="type"><span class="param-type">
Boolean
</span></td>
<td class="description last">
<span>
<p>When true, map boundary will be changed automatially
to include all markers when initialized</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">default-style</td>
<td class="type"><span class="param-type">
Boolean
</span></td>
<td class="description last">
<span>
<p>When false, the default styling,
<code>display:block;height:300px</code>, will be ignored.</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap=""><MapOption></td>
<td class="type"><span class="param-type">
String
</span></td>
<td class="description last">
<span>
<p>Any Google map options,
<a href="https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions">https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions</a></p>
</span>
</td>
</tr><tr>
<td class="name" nowrap=""><MapEvent></td>
<td class="type"><span class="param-type">
String
</span></td>
<td class="description last">
<span>
<p>Any Google map events,
<a href="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/map_events.html">https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/map_events.html</a></p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">single-info-window</td>
<td class="type"><span class="param-type">
Boolean
</span></td>
<td class="description last">
<span>
<p>When true the map will only display one info window at the time,
if not set or false,
everytime an info window is open it will be displayed with the othe one.</p>
</span>
</td>
</tr><tr>
<td class="name" nowrap="">trigger-resize</td>
<td class="type"><span class="param-type">
Boolean
</span></td>
<td class="description last">
<span>
<p>Default to false. Set to true to trigger resize of the map. Needs to be done anytime you resize the map</p>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h4>Example</h4>
<pre class="prettyprint"><code><span class="str">Usage:
<map MAP_OPTIONS_OR_MAP_EVENTS ..>
... Any children directives
</map>
Example:
<map center="[40.74, -74.18]" on-click="doThat()">
</map>
<map geo-fallback-center="[40.74, -74.18]" zoom-to-inlude-markers="true">
</map></span></code></pre>
</div>
</div></div>
</div>
</div>
<footer style="clear:both">
Documentation generated by
<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a>
using
<a href="https://github.com/allenhwkim/angular-jsdoc">Angular-JSDoc template</a>
</footer>
</div>
<script src="js/prettify.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/site.js"></script>
<!--%= prettyJson %-->
<script>
prettyPrint();
var lineNo = window.location.hash.match(/#line([0-9]+)$/);
lineNo && document.querySelector("ol li:nth-child("+(lineNo[1])+")").scrollIntoView();
</script>
</body>
</html>