240 lines
14 KiB
HTML
Executable File
240 lines
14 KiB
HTML
Executable File
<!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><script src="http://maps.google.com/maps/api/js"></script></code><br> <code><script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script></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="http://maps.google.com/maps/api/js"</code>.</p>
|
|
<pre class="prettyprint source"><code><div map-lazy-load="http://maps.google.com/maps/api/js">
|
|
<map center="41,-87" zoom="3"></map>
|
|
</div></code></pre><h2>Directives</h2><h4><map .. ></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><map zoom="11"
|
|
center="[40.74, -74.18]"
|
|
disable-default-u-i="true"
|
|
disable-double-click-zoom="true"
|
|
draggable="false"
|
|
draggable-cursor="help"
|
|
dragging-cursor="move"
|
|
keyboard-shortcuts="false"
|
|
max-zoom="12"
|
|
min-zoom="8"
|
|
tilt="45"
|
|
map-type-id="TERRAIN">
|
|
</map></code></pre><p> i.e. < zoom="11" center="[40.74, -74.18]"</p>
|
|
<h4><marker .. ></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><map center="[40.74, -74.18]">
|
|
<marker
|
|
position="[40.76, -74.16]"
|
|
title="Hello Marker"
|
|
animation="Animation.BOUNCE"
|
|
draggable="true"
|
|
visible="true"
|
|
icon="beachflag.png"></marker>
|
|
</map></code></pre><h4><shape .. ></h4><p> Polyline, Circle, Polygon, Rectangle, and Images</p>
|
|
<pre class="prettyprint source"><code> <map zoom="11" center="[40.74, -74.18]">
|
|
<shape id="polyline" name="polyline"
|
|
geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"
|
|
path="[[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]" ></shape>
|
|
<shape id="polygon" name="polygon"
|
|
stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"
|
|
paths="[[40.74,-74.18],[40.64,-74.18],[40.84,-74.08],[40.74,-74.18]]" ></shape>
|
|
<shape id="rectangle" name="rectangle" stroke-color='#FF0000'
|
|
stroke-opacity="0.8" stroke-weight="2"
|
|
bounds="[[40.74,-74.18], [40.78,-74.14]]" editable="true" ></shape>
|
|
<shape id="circle" name="circle" stroke-color='#FF0000'
|
|
stroke-opacity="0.8"stroke-weight="2"
|
|
center="[40.70,-74.14]" radius="4000" editable="true" ></shape>
|
|
<shape id="image" name="image"
|
|
url="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
|
|
bounds="[[40.71,-74.22],[40.77,-74.12]]" opacity="0.7" clickable="true" ></shape>
|
|
</map></code></pre><h4><info-window .. ></h4><p>Example:</p>
|
|
<pre class="prettyprint source"><code><map center="-25.363882,131.044922" zoom="4">
|
|
<info-window id="bar" position="-25.363882,131.044922" visible="true">
|
|
<div ng-non-bindable>
|
|
<div id="siteNotice"></div>
|
|
</div>
|
|
</info-window>
|
|
</map></code></pre><h4><custom-control .. ></h4><p>Example:</p>
|
|
<pre class="prettyprint source"><code> <map center="41.850033, -87.6500523" zoom="6">
|
|
<custom-control id="home" position="TOP_RIGHT" index="1" on-click="click()">
|
|
<div style="background-color: black; color:#fff;cursor:pointer">Home1</div>
|
|
</custom-control>
|
|
</map></code></pre><h4><map-data .. ></h4><p>Example:</p>
|
|
<pre class="prettyprint source"><code> <map zoom="4" center="-28, 137.883">
|
|
<map-data
|
|
load-geo-json="https://storage.googleapis.com/maps-devrel/google.json"></map-data>
|
|
</map></code></pre><h3>Layer Directives</h3><h4><bicycling-layer .. ></h4><pre class="prettyprint source"><code> <map zoom="14" center="42.3726399, -71.1096528">
|
|
<bicycling-layer></bicycling-layer>
|
|
</map></code></pre><h4><weather-layer .. > (deprecated) and <cloud-layer .. > (deprecated)</h4><pre class="prettyprint source"><code> <map zoom="6" center="49.265984,-123.127491">
|
|
<weather-layer temperature-units="FAHRENHEIT"></weather-layer>
|
|
<cloud-layer></cloud-layer>
|
|
</map></code></pre><h4><fusion-tables-layer .. ></h4><pre class="prettyprint source"><code> <map zoom="11" center="41.850033, -87.6500523">
|
|
<fusion-tables-layer query="{
|
|
select: 'Geocodable address',
|
|
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'}">
|
|
</fusion-tables-layer>
|
|
</map></code></pre><h4><heatmap-layer .. ></h4><pre class="prettyprint source"><code> <map zoom="13" center="37.774546, -122.433523" map-type-id="SATELLITE">
|
|
<heatmap-layer id="foo" data="taxiData"></heatmap>
|
|
</map></code></pre><h4><maps-engine-layer .. ></h4><pre class="prettyprint source"><code> <map center="59.322506, 18.010025" zoom="14">
|
|
<maps-engine-layer
|
|
layer-id="06673056454046135537-08896501997766553811">
|
|
</maps-engine-layer>
|
|
</map></code></pre><h4><traffic-layer></h4><pre class="prettyprint source"><code> <map zoom="13" center="34.04924594193164, -118.24104309082031">
|
|
<traffic-layer></traffic-layer>
|
|
</map></code></pre><h4><transit-layer></h4><pre class="prettyprint source"><code> <map zoom="13" center="51.501904,-0.115871">
|
|
<transit-layer></transit-layer>
|
|
</map></code></pre><h4><dynamic-maps-engine-layer .. ></h4><pre class="prettyprint source"><code> <map center="59.322506, 18.010025" zoom="14">
|
|
<dynamic-maps-engine-layer
|
|
suppress-info-windows="true"
|
|
clickable="true"
|
|
on-mouseover="onMouseover()"
|
|
on-mouseout="onMouseout()"
|
|
layer-id="06673056454046135537-08896501997766553811">
|
|
</dynamic-maps-engine-layer>
|
|
</map></code></pre><h4><kml-layer .. ></h4><pre class="prettyprint source"><code> <map zoom="11" center="41.875696,-87.624207">
|
|
<kml-layer url="http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml"></kml-layer>
|
|
</map></code></pre><h3>MapType Directives</h3><h4><map-type .. ></h4><pre class="prettyprint source"><code> <map zoom="10" center="41.850033,-87.6500523"
|
|
<map-type name="coordinate" object="CoordMapType">
|
|
</map-type>
|
|
</map></code></pre><h4><overlay-map-type .. ></h4><pre class="prettyprint source"><code> <map zoom="10" center="41.850033,-87.6500523">
|
|
<overlay-map-type object="CoordMapType" index="0">
|
|
</overlay-map-type>
|
|
</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> |