| Current File : /home/tradevaly/www/node_modules/gmaps/docs/GMaps.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GMaps - Documentation</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="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="GMaps.html">GMaps</a><ul class='methods'><li data-type='method'><a href="GMaps.html#addControl">addControl</a></li><li data-type='method'><a href="GMaps.html#fitLatLngBounds">fitLatLngBounds</a></li><li data-type='method'><a href="GMaps.html#fitZoom">fitZoom</a></li><li data-type='method'><a href="GMaps.html#getElement">getElement</a></li><li data-type='method'><a href="GMaps.html#hideContextMenu">hideContextMenu</a></li><li data-type='method'><a href="GMaps.html#refresh">refresh</a></li><li data-type='method'><a href="GMaps.html#removeControl">removeControl</a></li><li data-type='method'><a href="GMaps.html#setCenter">setCenter</a></li><li data-type='method'><a href="GMaps.html#setContextMenu">setContextMenu</a></li><li data-type='method'><a href="GMaps.html#zoomIn">zoomIn</a></li><li data-type='method'><a href="GMaps.html#zoomOut">zoomOut</a></li></ul></li></ul>
</nav>
<div id="main">
<h1 class="page-title">GMaps</h1>
<section>
<header>
<h2>
GMaps
</h2>
<div class="class-description"><p>GMaps</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="GMaps"><span class="type-signature"></span>new GMaps<span class="signature">(options)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line152">line 152</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Creates a new GMaps instance, including a Google Maps map.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p><code>options</code> accepts all the <a href="https://developers.google.com/maps/documentation/javascript/reference#MapOptions">MapOptions</a> and <a href="https://developers.google.com/maps/documentation/javascript/reference#Map">events</a> listed in the Google Maps API. Also accepts:</p>
<ul>
<li><code>lat</code> (number): Latitude of the map's center</li>
<li><code>lng</code> (number): Longitude of the map's center</li>
<li><code>el</code> (string or HTMLElement): container where the map will be rendered</li>
<li><code>markerClusterer</code> (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus.</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="controls"><span class="type-signature"></span>controls<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line242">line 242</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of custom controls in the map UI</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="el"><span class="type-signature"></span>el<span class="type-signature"> :HTMLElement</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line222">line 222</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Container element</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">HTMLElement</span>
</li>
</ul>
<h4 class="name" id="layers"><span class="type-signature"></span>layers<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line254">line 254</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of KML/GeoRSS and FusionTable layers</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="map"><span class="type-signature"></span>map<span class="type-signature"> :google.maps.Map</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line323">line 323</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Google Maps map instance</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">google.maps.Map</span>
</li>
</ul>
<h4 class="name" id="markerClusterer"><span class="type-signature"></span>markerClusterer<span class="type-signature"> :object</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line331">line 331</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Marker Clusterer instance</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">object</span>
</li>
</ul>
<h4 class="name" id="markers"><span class="type-signature"></span>markers<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line266">line 266</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of map's markers</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="overlays"><span class="type-signature"></span>overlays<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line248">line 248</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of map's overlays</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="polygons"><span class="type-signature"></span>polygons<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line284">line 284</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of map's polygons</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="polylines"><span class="type-signature"></span>polylines<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line272">line 272</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of map's lines</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="routes"><span class="type-signature"></span>routes<span class="type-signature"> :array</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line278">line 278</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of map's routes requested by GMaps#getRoutes, GMaps#renderRoute, GMaps#drawRoute, GMaps#travelRoute or GMaps#drawSteppedRoute</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">array</span>
</li>
</ul>
<h4 class="name" id="singleLayers"><span class="type-signature"></span>singleLayers<span class="type-signature"> :object</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line260">line 260</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Collection of data layers (See GMaps#addLayer)</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">object</span>
</li>
</ul>
<h4 class="name" id="zoom"><span class="type-signature"></span>zoom<span class="type-signature"> :number</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line292">line 292</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Current map's zoom</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addControl"><span class="type-signature"></span>addControl<span class="signature">(options)</span><span class="type-signature"> → {HTMLElement}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.controls.js.html">gmaps.controls.js</a>, <a href="gmaps.controls.js.html#line67">line 67</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Add a custom control to the map UI.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>The <code>options</code> object should contain:</p>
<ul>
<li><code>style</code> (object): The keys and values of this object should be valid CSS properties and values.</li>
<li><code>id</code> (string): The HTML id for the custom control.</li>
<li><code>classes</code> (string): A string containing all the HTML classes for the custom control.</li>
<li><code>content</code> (string or HTML element): The content of the custom control.</li>
<li><code>position</code> (string): Any valid <a href="https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning"><code>google.maps.ControlPosition</code></a> value, in lower or upper case.</li>
<li><code>events</code> (object): The keys of this object should be valid DOM events. The values should be functions.</li>
<li><code>disableDefaultStyles</code> (boolean): If false, removes the default styles for the controls like font (family and size), and box shadow.</li>
</ul></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
<h4 class="name" id="fitLatLngBounds"><span class="type-signature"></span>fitLatLngBounds<span class="signature">(latLngs)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line539">line 539</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Adjust the map zoom to include all the coordinates in the <code>latLngs</code> array.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>latLngs</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last"><p>Collection of <code>google.maps.LatLng</code> objects.</p></td>
</tr>
</tbody>
</table>
<h4 class="name" id="fitZoom"><span class="type-signature"></span>fitZoom<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line520">line 520</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Adjust the map zoom to include all the markers added in the map.</p>
</div>
<h4 class="name" id="getElement"><span class="type-signature"></span>getElement<span class="signature">()</span><span class="type-signature"> → {HTMLElement}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line571">line 571</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Return the HTML element container of the map.</p>
</div>
<h5>Returns:</h5>
<div class="param-desc">
<p>the element container.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
<h4 class="name" id="hideContextMenu"><span class="type-signature"></span>hideContextMenu<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line461">line 461</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Hide the current context menu</p>
</div>
<h4 class="name" id="refresh"><span class="type-signature"></span>refresh<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line513">line 513</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Trigger a <code>resize</code> event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions).</p>
</div>
<h4 class="name" id="removeControl"><span class="type-signature"></span>removeControl<span class="signature">(control)</span><span class="type-signature"> → {HTMLElement}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.controls.js.html">gmaps.controls.js</a>, <a href="gmaps.controls.js.html#line82">line 82</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Remove a control from the map. <code>control</code> should be a control returned by <code>addControl()</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>control</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last"><p>One of the controls returned by <code>addControl()</code>.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
<p>the removed control.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
<h4 class="name" id="setCenter"><span class="type-signature"></span>setCenter<span class="signature">(lat, lng, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line558">line 558</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Center the map using the <code>lat</code> and <code>lng</code> coordinates.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>lat</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Latitude of the coordinate.</p></td>
</tr>
<tr>
<td class="name"><code>lng</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Longitude of the coordinate.</p></td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>Callback that will be executed after the map is centered.</p></td>
</tr>
</tbody>
</table>
<h4 class="name" id="setContextMenu"><span class="type-signature"></span>setContextMenu<span class="signature">(options)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line417">line 417</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Add a context menu for a map or a marker.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>The <code>options</code> object should contain:</p>
<ul>
<li><code>control</code> (string): Kind of control the context menu will be attached. Can be "map" or "marker".</li>
<li><code>options</code> (array): A collection of context menu items:<ul>
<li><code>title</code> (string): Item's title shown in the context menu.</li>
<li><code>name</code> (string): Item's identifier.</li>
<li><code>action</code> (function): Function triggered after selecting the context menu item.</li>
</ul>
</li>
</ul></td>
</tr>
</tbody>
</table>
<h4 class="name" id="zoomIn"><span class="type-signature"></span>zoomIn<span class="signature">(magnitude<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line580">line 580</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Increase the map's zoom.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>magnitude</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>The number of times the map will be zoomed in.</p></td>
</tr>
</tbody>
</table>
<h4 class="name" id="zoomOut"><span class="type-signature"></span>zoomOut<span class="signature">(magnitude<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="gmaps.core.js.html">gmaps.core.js</a>, <a href="gmaps.core.js.html#line592">line 592</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Decrease the map's zoom.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>magnitude</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>The number of times the map will be zoomed out.</p></td>
</tr>
</tbody>
</table>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Sun Apr 03 2016 18:36:23 GMT-0400 (EDT) using the Minami theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>