seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Index</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Index</h1>

    
    <h3> </h3>


    <section>
        <article><h1>GoogleMap AngularJS Directive</h1><p><a href="https://travis-ci.org/allenhwkim/angularjs-google-maps"><img src="https://travis-ci.org/allenhwkim/angularjs-google-maps.png?branch=master" alt="Build Status"></a></p>
<p><strong>NOTE: 1.4.0 is released.</strong></p>
<ul>
<li>support lazy loading of maps js, which does not require to <code>http://maps.google.com/maps/api/js</code></li>
</ul>
<p><strong>NOTE: 1.2.0 is released.</strong></p>
<ul>
<li>events with <code>controller as</code> syntax, thanks to Simon</li>
</ul>
<p><strong>NOTE: 1.1.0 is released.</strong></p>
<ul>
<li>marker directive can have icon attribute as JSON</li>
<li>map with init-event attribute for initialization by an event</li>
</ul>
<p><strong>NOTE: 1.0.0 is released.</strong><br>  Now, it covers all official google examples using new directives. The new directives are;</p>
<ul>
<li>Layer Directives<br>traffic-layer, transit-layer, weather-layer, bicycling-layer, cloud-layer, dynamic-maps-engine-layer, fusion-tables-layer, heatmap-layer, kml-layer, maps-engine-layer
custom-control</li>
<li>info-window</li>
<li>map-data</li>
<li>map-type</li>
<li>overlay-map-type</li>
</ul>
<p><a href="http://ngmap.github.io">Demo</a><br><a href="https://rawgithub.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html">Documentation</a></p>
<p>There is already <a href="https://github.com/nlaplante/angular-google-maps">one</a> for this. However, I found myself doing totally different approach for this purpose than the existing one, such as;</p>
<ol>
<li><strong>Everything in tag and attributes.</strong><br>Thus, basic users don't even have to know what Javascript is. </li>
<li><strong>Expose all original Google Maps V3 api to the user.</strong><br>No hiding, no wraping, or whatsoever. 
By doing so, programmers don't need to learn how to use this module.
You only need to know Google Maps V3 API.</li>
</ol>
<p>There is a blog that introduces this module. The title of it is '<a href="http://allenhwkim.tumblr.com/post/70986888283/google-map-as-the-simplest-way">Google Map As The Simplest Way</a>'</p>
<h2>To Get Started</h2><p>For Bower users, </p>
<p>  <code>$ bower install ngmap</code></p>
<ol>
<li><p>Include <code>ng-map.min.js</code> as well as google maps.<br> <code>&lt;script src=&quot;http://maps.google.com/maps/api/js&quot;&gt;&lt;/script&gt;</code><br> <code>&lt;script src=&quot;http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js&quot;&gt;&lt;/script&gt;</code></p>
</li>
<li><p>name angular app as ngMap, or add it as a dependency</p>
<p><code>var myApp = angular.module('myApp', ['ngMap']);</code></p>
</li>
</ol>
<p>After map is initialized, you will have one event and map instances</p>
<p>Event:</p>
<ul>
<li><p><code>mapInitialized</code> with parameter with map</p>
<p>In case your map directive scope is different from your controller scope,
use this event to get the map instance.</p>
<pre>
  app.controller('parentParentController', function($scope) {
    $scope.$on('mapInitialized', function(event, map) {
      map.setCenter( .... )
      ..
    });
  });
</pre>

</li>
</ul>
<p>Instances:</p>
<ul>
<li><code>$scope.map</code></li>
<li><code>$scope.map.markers</code></li>
<li><code>$scope.map.shapes</code></li>
<li>etc</li>
</ul>
<h2>Lazy Loading</h2><p>  Simply wrap the map tag with <code>map-lazy-load=&quot;http://maps.google.com/maps/api/js&quot;</code>.</p>
<pre class="prettyprint source"><code>&lt;div map-lazy-load=&quot;http://maps.google.com/maps/api/js&quot;>
  &lt;map center=&quot;41,-87&quot; zoom=&quot;3&quot;>&lt;/map>
&lt;/div></code></pre><h2>Directives</h2><h4>&lt;map .. &gt;</h4><p>  As defined on <a href="https://developers.google.com/maps/documentation/javascript/reference#MapOptions">MapOptions</a>, you can add any attributes, and events starting witn <code>on-</code>. Please note that event value must be a function.</p>
<p>  Example: </p>
<pre class="prettyprint source"><code>&lt;map zoom=&quot;11&quot; 
  center=&quot;[40.74, -74.18]&quot; 
  disable-default-u-i=&quot;true&quot;
  disable-double-click-zoom=&quot;true&quot;
  draggable=&quot;false&quot;
  draggable-cursor=&quot;help&quot;
  dragging-cursor=&quot;move&quot;
  keyboard-shortcuts=&quot;false&quot;
  max-zoom=&quot;12&quot;
  min-zoom=&quot;8&quot;
  tilt=&quot;45&quot;
  map-type-id=&quot;TERRAIN&quot;>
&lt;/map></code></pre><p>  i.e. &lt; zoom=&quot;11&quot; center=&quot;[40.74, -74.18]&quot;</p>
<h4>&lt;marker .. &gt;</h4><p>  As defined on <a href="https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions">MarkerOptions</a>, you can add any attributes, and events starting witn <code>on-</code>.</p>
<pre class="prettyprint source"><code>&lt;map center=&quot;[40.74, -74.18]&quot;>
  &lt;marker
      position=&quot;[40.76, -74.16]&quot;
      title=&quot;Hello Marker&quot;
      animation=&quot;Animation.BOUNCE&quot;
      draggable=&quot;true&quot;
      visible=&quot;true&quot;
      icon=&quot;beachflag.png&quot;>&lt;/marker>
&lt;/map></code></pre><h4>&lt;shape .. &gt;</h4><p>  Polyline, Circle, Polygon, Rectangle, and Images</p>
<pre class="prettyprint source"><code> &lt;map zoom=&quot;11&quot; center=&quot;[40.74, -74.18]&quot;>
    &lt;shape id=&quot;polyline&quot; name=&quot;polyline&quot; 
      geodesic=&quot;true&quot; stroke-color=&quot;#FF0000&quot; stroke-opacity=&quot;1.0&quot; stroke-weight=&quot;2&quot;
      path=&quot;[[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]&quot; >&lt;/shape>
    &lt;shape id=&quot;polygon&quot; name=&quot;polygon&quot; 
      stroke-color=&quot;#FF0000&quot; stroke-opacity=&quot;1.0&quot; stroke-weight=&quot;2&quot;
      paths=&quot;[[40.74,-74.18],[40.64,-74.18],[40.84,-74.08],[40.74,-74.18]]&quot; >&lt;/shape>
    &lt;shape id=&quot;rectangle&quot; name=&quot;rectangle&quot; stroke-color='#FF0000' 
      stroke-opacity=&quot;0.8&quot; stroke-weight=&quot;2&quot;
      bounds=&quot;[[40.74,-74.18], [40.78,-74.14]]&quot; editable=&quot;true&quot; >&lt;/shape>
    &lt;shape id=&quot;circle&quot; name=&quot;circle&quot; stroke-color='#FF0000'
      stroke-opacity=&quot;0.8&quot;stroke-weight=&quot;2&quot; 
      center=&quot;[40.70,-74.14]&quot; radius=&quot;4000&quot; editable=&quot;true&quot; >&lt;/shape>
    &lt;shape id=&quot;image&quot; name=&quot;image&quot; 
      url=&quot;https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg&quot;
      bounds=&quot;[[40.71,-74.22],[40.77,-74.12]]&quot; opacity=&quot;0.7&quot; clickable=&quot;true&quot; >&lt;/shape>
 &lt;/map></code></pre><h4>&lt;info-window .. &gt;</h4><p>Example:</p>
<pre class="prettyprint source"><code>&lt;map center=&quot;-25.363882,131.044922&quot; zoom=&quot;4&quot;>
  &lt;info-window id=&quot;bar&quot; position=&quot;-25.363882,131.044922&quot; visible=&quot;true&quot;>
    &lt;div ng-non-bindable>
      &lt;div id=&quot;siteNotice&quot;>&lt;/div>
    &lt;/div>
  &lt;/info-window>
&lt;/map></code></pre><h4>&lt;custom-control .. &gt;</h4><p>Example:</p>
<pre class="prettyprint source"><code>  &lt;map center=&quot;41.850033, -87.6500523&quot; zoom=&quot;6&quot;>
    &lt;custom-control id=&quot;home&quot; position=&quot;TOP_RIGHT&quot; index=&quot;1&quot; on-click=&quot;click()&quot;>
      &lt;div style=&quot;background-color: black; color:#fff;cursor:pointer&quot;>Home1&lt;/div>
    &lt;/custom-control>
  &lt;/map></code></pre><h4>&lt;map-data .. &gt;</h4><p>Example:</p>
<pre class="prettyprint source"><code>  &lt;map zoom=&quot;4&quot; center=&quot;-28, 137.883&quot;>
    &lt;map-data 
      load-geo-json=&quot;https://storage.googleapis.com/maps-devrel/google.json&quot;>&lt;/map-data>
  &lt;/map></code></pre><h3>Layer Directives</h3><h4>&lt;bicycling-layer .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;14&quot; center=&quot;42.3726399, -71.1096528&quot;>
    &lt;bicycling-layer>&lt;/bicycling-layer>
  &lt;/map></code></pre><h4>&lt;weather-layer .. &gt; (deprecated) and &lt;cloud-layer .. &gt; (deprecated)</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;6&quot; center=&quot;49.265984,-123.127491&quot;>
    &lt;weather-layer temperature-units=&quot;FAHRENHEIT&quot;>&lt;/weather-layer>
    &lt;cloud-layer>&lt;/cloud-layer>
  &lt;/map></code></pre><h4>&lt;fusion-tables-layer .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;11&quot; center=&quot;41.850033, -87.6500523&quot;>
    &lt;fusion-tables-layer query=&quot;{
      select: 'Geocodable address',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'}&quot;>
    &lt;/fusion-tables-layer>
  &lt;/map></code></pre><h4>&lt;heatmap-layer .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;13&quot; center=&quot;37.774546, -122.433523&quot; map-type-id=&quot;SATELLITE&quot;>
    &lt;heatmap-layer id=&quot;foo&quot; data=&quot;taxiData&quot;>&lt;/heatmap>
  &lt;/map></code></pre><h4>&lt;maps-engine-layer .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map center=&quot;59.322506, 18.010025&quot; zoom=&quot;14&quot;>
    &lt;maps-engine-layer
      layer-id=&quot;06673056454046135537-08896501997766553811&quot;>
    &lt;/maps-engine-layer>
  &lt;/map></code></pre><h4>&lt;traffic-layer&gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;13&quot; center=&quot;34.04924594193164, -118.24104309082031&quot;>
    &lt;traffic-layer>&lt;/traffic-layer>
  &lt;/map></code></pre><h4>&lt;transit-layer&gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;13&quot; center=&quot;51.501904,-0.115871&quot;>
    &lt;transit-layer>&lt;/transit-layer>
  &lt;/map></code></pre><h4>&lt;dynamic-maps-engine-layer .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map center=&quot;59.322506, 18.010025&quot; zoom=&quot;14&quot;>
    &lt;dynamic-maps-engine-layer
      suppress-info-windows=&quot;true&quot;
      clickable=&quot;true&quot;
      on-mouseover=&quot;onMouseover()&quot;
      on-mouseout=&quot;onMouseout()&quot;
      layer-id=&quot;06673056454046135537-08896501997766553811&quot;>
    &lt;/dynamic-maps-engine-layer>
  &lt;/map></code></pre><h4>&lt;kml-layer .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;11&quot; center=&quot;41.875696,-87.624207&quot;>
    &lt;kml-layer url=&quot;http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml&quot;>&lt;/kml-layer>
  &lt;/map></code></pre><h3>MapType Directives</h3><h4>&lt;map-type .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;10&quot; center=&quot;41.850033,-87.6500523&quot;
    &lt;map-type name=&quot;coordinate&quot; object=&quot;CoordMapType&quot;>
    &lt;/map-type>
  &lt;/map></code></pre><h4>&lt;overlay-map-type .. &gt;</h4><pre class="prettyprint source"><code>  &lt;map zoom=&quot;10&quot; center=&quot;41.850033,-87.6500523&quot;>
    &lt;overlay-map-type object=&quot;CoordMapType&quot; index=&quot;0&quot;>
    &lt;/overlay-map-type>
  &lt;/map></code></pre><h2>Advanced Examples</h2><ul>
<li><a href="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/marker-clusterer.html">Marker Clusterer</a></li>
<li><a href="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/map_app.html">Starbucks World Wide</a></li>
</ul>
<h1>Contributors</h1><p>[Fangmingdu] (https://github.com/Fangmingdu) - Drawing Manager</p>
<h1>license</h1><p><a href="https://github.com/allenhwkim/angularjs-google-maps/blob/master/LICENSE">MIT License</a></p></article>
    </section>


</div>

<nav>
    <h2><a href="index.html">Index</a></h2><h3>service</h3><ul><li><a href="Attr2Options.html">Attr2Options</a></li><li><a href="GeoCoder.html">GeoCoder</a></li><li><a href="NavigatorGeolocation.html">NavigatorGeolocation</a></li><li><a href="StreetView.html">StreetView</a></li></ul><h3>directive</h3><ul><li><a href="bicycling-layer.html">bicycling-layer</a></li><li><a href="cloud-layer.html">cloud-layer</a></li><li><a href="custom-control.html">custom-control</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="lazy-load.html">lazy-load</a></li><li><a href="map.html">map</a></li><li><a href="map-data.html">map-data</a></li><li><a href="map-type.html">map-type</a></li><li><a href="MapController.html">MapController</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="shape.html">shape</a></li><li><a href="traffic-layer.html">traffic-layer</a></li><li><a href="transit-layer.html">transit-layer</a></li><li><a href="weather-layer.html">weather-layer</a></li></ul>
</nav>

<br clear="both">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> 
    and <a href="https://github.com/allenhwkim/angular-jsdoc">angular-jsdoc</a>
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
<script>
  var href=window.location.href.match(/\/([^\/]+$)/)[1];
  document.querySelector("nav a[href='"+href+"']").scrollIntoView(true);
  if (window.location.hash == "")
    document.querySelector("body").scrollIntoView(true);
</script>
</body>
</html>