Add frontend assets and plugin bundles

Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
Power BI Dev
2026-05-02 10:09:32 +07:00
parent efdb11db3f
commit a52c2a8462
2061 changed files with 513282 additions and 0 deletions

1
assets/plugins/gmaps/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/node_modules

View File

@@ -0,0 +1,31 @@
Since gmaps.js has been created to accomplish some goals about simplicity and cleanliness, the contributions must be guided by some rules, in order to keep gmaps.js simple to use and brief in code.
## About requirements
gmaps.js only requires JavaScript, so new features must be written in plain JavaScript and shouldnt depend of external libraries like jQuery, Prototype, etc.
## About examples and documentation
Big changes, like support for new libraries or services, or custom features, need an example file (or files, depending of the magnitude of the contribution) and an entry in the documentation page.
The example file must be included in the branch `gh-pages`, and be linked in the examples page. Example file in the `master` branch is optional.
The documentation must explain in an simple way any argument passed in the method, and tell if its argument is optional or not. No examples are required here.
## About new features
The main goal of gmaps.js is to have full support to all features of native Google Maps API, so the primary goal of the contributions to cover the missing features. But other contributions are welcome.
If the new feature has a functionality different from strictly work with maps (like animations, custom infoWindows or support for external services), it would be ideal to create an extension with this feature.
## About coding standards
* Default values must be defined.
* Functions must end with semi-colon.
* Function names in camel case.
* Two space for indentation.
* Use strict mode syntax.
* Dont use prototype object to extend gmaps.js (except with extensions).
* Use apply for calling functions.
_**Thanks for contributing with gmaps.js**_

View File

@@ -0,0 +1,74 @@
/*global module:false*/
module.exports = function(grunt) {
'use strict';
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
meta : {
banner : '/*!\n' +
' * GMaps.js v<%= pkg.version %>\n' +
' * <%= pkg.homepage %>\n' +
' *\n' +
' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' +
' * Released under the <%= pkg.license %> License.\n' +
' */\n\n'
},
concat: {
options: {
banner: '<%= meta.banner %>'
},
dist: {
src: [
'lib/gmaps.core.js',
'lib/gmaps.controls.js',
'lib/gmaps.markers.js',
'lib/gmaps.overlays.js',
'lib/gmaps.geometry.js',
'lib/gmaps.layers.js',
'lib/gmaps.routes.js',
'lib/gmaps.geofences.js',
'lib/gmaps.static.js',
'lib/gmaps.map_types.js',
'lib/gmaps.styles.js',
'lib/gmaps.streetview.js',
'lib/gmaps.events.js',
'lib/gmaps.utils.js',
'lib/gmaps.native_extensions.js'
],
dest: 'gmaps.js'
}
},
jasmine: {
options: {
template: 'test/template/jasmine-gmaps.html',
specs: 'test/spec/*.js',
vendor: 'http://maps.google.com/maps/api/js?sensor=true',
styles: 'test/style.css'
},
src : '<%= concat.dist.src %>'
},
watch : {
files : '<%= concat.dist.src %>',
tasks : 'default'
},
jshint : {
all : ['Gruntfile.js']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.registerTask('test', ['jshint', 'jasmine']);
grunt.registerTask('default', ['test', 'concat']);
};

View File

@@ -0,0 +1,380 @@
GMaps.js - A Javascript library that simplifies your life
=========================================================
GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.
Visit the examples in [hpneo.github.com/gmaps](http://hpneo.github.com/gmaps/)
Build
------
If you would like to build gmaps from source run the following at the terminal:
```sh
git clone https://github.com/HPNeo/gmaps.git
cd gmaps
npm install
grunt
```
Changelog
---------
0.4.5
-----------------------
* Fix IE8 bug using array_map
* Add Grunt and Bower support
0.4.4
-----------------------
* Fix buildContextMenu reference in addMarker
0.4.3
-----------------------
* Fix removePolylines and removePolygons
0.4.2
-----------------------
* Fix drawSteppedRoute
0.4.1
-----------------------
* Fix fitZoom
0.4.0
-----------------------
* Split gmaps.js in modules
0.3.5
-----------------------
* Enable new Google Maps style
0.3.4
-----------------------
* Add support for context menu in multiple maps
0.3.3
-----------------------
* Fix destination as address in getRoutes
0.3.2
-----------------------
* Support for removing Fusion Tables and GeoRSS/KML layers with removeLayer
0.3.1
-----------------------
* Improve event binding at adding markers, polylines or polygons
0.3
-----------------------
* Add native events to google.maps objects and custom events to GMaps maps
* Check for Google Maps library and defined element when initialize
* Allow route origins to be a string or array
0.2.31
-----------------------
* Fix context menu position bug
0.2.30
-----------------------
* New feature: StreetView Panoramas
0.2.29
-----------------------
* New methods: removePolyline and removePolygon
* Tests for Styled MapTypes
0.2.28
-----------------------
* Test suite
* Fix double event firing bug
0.2.27
-----------------------
* Allow create context menus for markers
0.2.26
-----------------------
* Fix bug in getElevations
* Rename fitBounds to fitLatLngBounds
0.2.25
-----------------------
* Support for GeoJSON in drawPolygon
* Use 'complete' instead of 'always' in GMaps.geolocate
0.2.24
-----------------------
* New feature: **Overlay Map Types**
0.2.23
-----------------------
* Add full support to google.maps.PolylineOptions
* New method: removeMarker
0.2.22
-----------------------
* New feature: **Map Types**
0.2.21
-----------------------
* Support to add google.maps.Marker objects in addMarker and addMarkers methods.
0.2.20
-----------------------
* Add support for other HTML block elements instead "div" (like "section").
0.2.19
-----------------------
* Use MarkerClusterer to group markers
0.2.18
-----------------------
* Check if GMaps is defined before load extensions
0.2.17
-----------------------
* Fix bug with disableDefaultUI option in constructor
0.2.16
-----------------------
* Fix another bug in createMarker
0.2.15
-----------------------
* Fix bug in createMarker
0.2.14
-----------------------
* Adding IDs, classes and innerHTML to createControl. (**Note**: Use 'content' instead 'text' in createControl)
0.2.13
-----------------------
* Add support for Places library in addLayer
0.2.12
-----------------------
* Fix map events without MouseEvent object
* Fix bug in drawCircle and drawRectangle
* Fix bug in zoomIn and zoomOut
* New methods: removePolygon and removePolygons
0.2.11
-----------------------
* Add support to Panoramio in addLayer
0.2.10
-----------------------
* New method: toImage
0.2.9
-----------------------
* Extend the drawSteppedRoute and travelRoute functions
0.2.8
-----------------------
* New feature: **Layers**
0.2.7
-----------------------
* New method: removeRoutes
* Access all native methods of google.maps.Map class
0.2.6
-----------------------
* Support for multiple overlays
0.2.5
-----------------------
* Add support to all marker events
* Add suport for animations at show and remove overlays
0.2.4.1
-----------------------
* Create GMaps class only when Google Maps API is loaded
0.2.4
-----------------------
* New feature: **Elevation service**
0.2.3
-----------------------
* New method: getZoom
0.2.2
-----------------------
* Minor improvements to support Backbone.js
* Fix controls position
0.2.1
-----------------------
* More default values in GMaps constructor.
0.2
-----------------------
* Remove jQuery dependency.
0.1.12.5
-----------------------
* New method "removePolylines" and alias "cleanRoute"
0.1.12.4
-----------------------
* New methods: fitZoom and fitBounds
0.1.12.3
-----------------------
* New method: refresh
0.1.12.2
-----------------------
* New options in GMaps constructor: width and height
0.1.12.1
-----------------------
* New methods: loadFromFusionTables and loadFromKML
0.1.12
-----------------------
* New feature: **KML and GeoRSS**
* Fix bug in getFromFusionTables
0.1.11
-----------------------
* New feature: **Fusion Tables**
0.1.10
-----------------------
* New feature: **Custom controls**
0.1.9
-----------------------
* New feature: **Static maps**
0.1.8.10
-----------------------
* Better GMaps.Route methods
0.1.8.9
-----------------------
* Fix typo in Polyline events
* Add InfoWindow events
0.1.8.8
-----------------------
* Add Polyline events
0.1.8.7
-----------------------
* Add drag and dragstart events to Marker
0.1.8.6
-----------------------
* Add avoidHighways, avoidTolls, optimizeWaypoints, unitSystem and waypoints options in getRoutes
* New method: createMarker
0.1.8.5
-----------------------
* geolocation and geocode methods are static now (using them with GMaps.geolocation and GMaps.geocode)
0.1.8.4
-----------------------
* Fix typo in geocode method
* Allow all MapOptions in constructor (see 'MapOptions' section in Google Maps API Reference)
0.1.8.3
-----------------------
* Add pane option ('floatPane', 'floatShadow', 'mapPane', 'overlayImage', 'overlayLayer', 'overlayMouseTarget', 'overlayShadow') in drawOverlay
* New methods: removeOverlay and removeOverlays
0.1.8.2
-----------------------
* Change pane ('floatPane' to 'overlayLayer') in drawOverlay
0.1.8.1
-----------------------
* Fix bug in drawCircle
0.1.8
-----------------------
* New feature: **Overlays**
* New method: drawCircle
0.1.7.1
-----------------------
* Bug fix: zoomIn/zoomOut can change zoom by argument
* New method: setZoom
0.1.7
-----------------------
* New class: **GMaps.Route**
0.1.6
-----------------------
* New feature: **Geofence** (with markers)
* New method: **drawPolygon**
* Bug fix: Change reserved word in Context menu
0.1.5
-----------------------
* New feature: **Geocoding**
* New method: **drawSteppedRoute** (similar to travelRoute)
0.1.4
-----------------------
* New events in **addMarker**
* Add step_number property in **travelRoute** method
0.1.3
-----------------------
* New feature: **Context menu** (for map and marker only)
* New method: **travelRoute**
* Change setCenter to panTo in GMaps **setCenter** method
* Save entire route data in routes array (instead saving only route path)
* Context menu and Route example (using **travelRoute**)
0.1.2
-----------------------
* **drawPolyline** can accept both an array of LatLng objets or an array of coordinates
* New methods: **getRoutes** and **drawRoute**
* Route example
0.1.1
-----------------------
* Rename **drawRoute** method to **drawPolyline** (more accurate)
* Marker example
0.1 - Initial release
-----------------------
* Map events
* Geolocation
* Add Markers
* Marker infoWindows
* Draw routes and circles
* Initial examples
License
---------
MIT License. Copyright 2012 Gustavo Leon. http://github.com/hpneo
Permission is hereby granted, free of charge, to any
person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the
Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the
Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice
shall be included in all copies or substantial portions of
the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,5 @@
{
"name": "gmaps",
"version": "0.4.5",
"main": "gmaps.js"
}

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Basic</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Basic</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>Using GMaps.js is as easy as:</p>
<pre>new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});</pre>
<p>You must define <strong>container ID</strong>, <strong>latitude</strong> and <strong>longitude</strong> of the map's center.</p>
<p><span class="label notice">Note: </span>You also can define <strong>zoom</strong>, <strong>width</strong> and <strong>height</strong>. By default, zoom is 15. Width and height in a CSS class will replace these values.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Context menu</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.setContextMenu({
control: 'map',
options: [{
title: 'Add marker',
name: 'add_marker',
action: function(e){
console.log(e.latLng.lat());
console.log(e.latLng.lng());
this.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng(),
title: 'New marker'
});
this.hideContextMenu();
}
}, {
title: 'Center here',
name: 'center_here',
action: function(e){
this.setCenter(e.latLng.lat(), e.latLng.lng());
}
}]
});
map.setContextMenu({
control: 'marker',
options: [{
title: 'Center here',
name: 'center_here',
action: function(e){
this.setCenter(e.latLng.lat(), e.latLng.lng());
}
}]
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Context menu</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can define a context menu (which will show on right click) with:</p>
<pre>map.setContextMenu({
control: 'map',
options: [{
title: 'Add marker',
name: 'add_marker',
action: function(e){
this.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng(),
title: 'New marker'
});
}
}, {
title: 'Center here',
name: 'center_here',
action: function(e){
this.setCenter(e.latLng.lat(), e.latLng.lng());
}
}]
});</pre>
<p>You must define the <strong>control</strong> that the context menu is attached (<strong>map</strong> or <strong>marker</strong>) and an array of <strong>options</strong> with <code>title</code>, <code>name</code> and <code>action</code> Inside <code>action</code> you can use <code>this</code> for the GMaps.js object (<code>map</code> in this case) and MouseEvent object <code>e</code>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Custom controls</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
zoom: 16,
lat: -12.043333,
lng: -77.028333
});
map.addControl({
position: 'top_right',
content: 'Geolocate',
style: {
margin: '5px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#fff'
},
events: {
click: function(){
GMaps.geolocate({
success: function(position){
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function(error){
alert('Geolocation failed: ' + error.message);
},
not_supported: function(){
alert("Your browser does not support geolocation");
}
});
}
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Custom controls</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>GMaps.js allows to add custom controls:</p>
<pre>map.addControl({
position: 'top_right',
text: 'Geolocate',
style: {
margin: '5px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#fff'
},
events: {
click: function(){
console.log(this);
}
}
});</pre>
<p>
<span class="label notice">Note: </span> You can use the following positions:
<ul>
<li>top_center</li>
<li>top_left</li>
<li>top_right</li>
<li>left_top</li>
<li>right_top</li>
<li>left_center</li>
<li>right_center</li>
<li>left_bottom</li>
<li>right_bottom</li>
<li>bottom_center</li>
<li>bottom_left</li>
<li>bottom_right</li>
</ul>
You can learn more of custom controls <a href="https://developers.google.com/maps/documentation/javascript/controls">here</a>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Elevation locations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
//locations request
map.getElevations({
locations : [[-12.040397656836609,-77.03373871559225], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042]],
callback : function (result, status){
if (status == google.maps.ElevationStatus.OK) {
for (var i in result){
map.addMarker({
lat: result[i].location.lat(),
lng: result[i].location.lng(),
title: 'Marker with InfoWindow',
infoWindow: {
content: '<p>The elevation is '+result[i].elevation+' in meters</p>'
}
});
}
}
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Elevation locations</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>With GMaps.js you can add elevation this way:</p>
<pre>map.getElevations({
locations : [[-12.040397656836609,-77.03373871559225], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042]],
callback : function (result, status){
if (status == google.maps.ElevationStatus.OK) {
console.log(result, status);
}
}
});</pre>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Elevation Routes</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
var mousemarker = null;
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {packages: ["columnchart"]});
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoom: 12
});
//load google visualization chart
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var polygone = map.drawRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'walking',
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6,
callback : function(polygones){
//elevation for the path
map.getElevations({
locations : polygones.overview_path,
path: true,
callback : function (result, status){
if (status == google.maps.ElevationStatus.OK) {
var elevations = result;
//set the google visualization
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < result.length; i++) {
data.addRow(['', elevations[i].elevation]);
}
//add to the dom
document.getElementById('chart_div').style.display = 'block';
chart.draw(data, {
width: 340,
height: 200,
legend: 'none',
titleY: 'Elevation (m)',
focusBorderColor: '#00ff00'
});
//add mouseover
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
if (mousemarker == null) {
mousemarker = map.addMarker({
lat: elevations[e.row].location.lat(),
lng: elevations[e.row].location.lng()
});
} else {
mousemarker.setPosition(elevations[e.row].location);
}
});
}
}
});
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Elevation Routes</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>With GMaps.js you can calculate the elevation for a route like this:</p>
<pre>map.getElevations({
locations : [[-12.040397656836609,-77.03373871559225], [-12.040248585302038,-77.03993927003302], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042]],
path: true,
callback : function (result, status){
if (status == google.maps.ElevationStatus.OK) {
console.log(result, status);
}
}
});</pre>
<div id="chart_div"></div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,51 @@
body{
font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif;
margin:5px;
}
#map{
display: block;
width: 95%;
height: 350px;
margin: 0 auto;
-moz-box-shadow: 0px 5px 20px #ccc;
-webkit-box-shadow: 0px 5px 20px #ccc;
box-shadow: 0px 5px 20px #ccc;
}
#map.large{
height:500px;
}
.overlay{
display:block;
text-align:center;
color:#fff;
font-size:60px;
line-height:80px;
opacity:0.8;
background:#4477aa;
border:solid 3px #336699;
border-radius:4px;
box-shadow:2px 2px 10px #333;
text-shadow:1px 1px 1px #666;
padding:0 4px;
}
.overlay_arrow{
left:50%;
margin-left:-16px;
width:0;
height:0;
position:absolute;
}
.overlay_arrow.above{
bottom:-15px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-top:16px solid #336699;
}
.overlay_arrow.below{
top:-15px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-bottom:16px solid #336699;
}

View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Fusion Tables layers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map, infoWindow;
$(document).ready(function(){
infoWindow = new google.maps.InfoWindow({});
map = new GMaps({
el: '#map',
zoom: 11,
lat: 41.850033,
lng: -87.6500523
});
map.loadFromFusionTables({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
},
suppressInfoWindows: true,
events: {
click: function(point){
infoWindow.setContent('You clicked here!');
infoWindow.setPosition(point.latLng);
infoWindow.open(map.map);
}
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Fusion Tables layers</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>GMaps.js allows to add Fusion Table layers:</p>
<pre>infoWindow = new google.maps.InfoWindow({});
map.loadFromFusionTables({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
},
suppressInfoWindows: true,
events: {
click: function(point){
infoWindow.setContent('You clicked here!');
infoWindow.setPosition(point.latLng);
infoWindow.open(map.map);
}
}
});</pre>
<p>
<span class="label notice">Note: </span> You can learn more about Fusion Table layers <a href="https://developers.google.com/maps/documentation/javascript/layers#FusionTables">here</a>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Geocoding</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
$('#geocoding_form').submit(function(e){
e.preventDefault();
GMaps.geocode({
address: $('#address').val().trim(),
callback: function(results, status){
if(status=='OK'){
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
}
}
});
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Geocoding</h1>
<div class="row">
<div class="span11">
<form method="post" id="geocoding_form">
<label for="address">Address:</label>
<div class="input">
<input type="text" id="address" name="address" />
<input type="submit" class="btn" value="Search" />
</div>
</form>
<div id="map"></div>
</div>
<div class="span6">
<p>You can geocoding this way:</p>
<pre>GMaps.geocode({
address: $('#address').val(),
callback: function(results, status){
if(status=='OK'){
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
}
}
});</pre>
<p>You can define either <code>address</code> or <code>lat</code> and <code>lng</code>. Also, you must define <code>callback</code>, which will use <code>results</code> of geocoding and <code>status</code>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Geofences</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
var path = [
[-12.040397656836609,-77.03373871559225],
[-12.040248585302038,-77.03993927003302],
[-12.050047116528843,-77.02448169303511],
[-12.044804866577001,-77.02154422636042]
];
polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function(m, f){
alert('This marker has been moved outside of its fence');
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Geofences</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can attach a geofence (which can be a polygon or a bounds) to a marker with:</p>
<pre>polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function(marker, fence){
alert('This marker has been moved outside of its fence');
}
});</pre>
<p>You must define an <strong>outside</strong> callback, which will use this <code>marker</code> and its <code>fence</code>.</p>
<p><span class="label notice">Note: </span>You also can use <code>checkMarkerGeofence</code> or <code>checkGeofence</code> methods.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Geolocation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
GMaps.geolocate({
success: function(position){
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function(error){
alert('Geolocation failed: '+error.message);
},
not_supported: function(){
alert("Your browser does not support geolocation");
},
always: function(){
alert("Done!");
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Geolocation</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>GMaps.js supports HTML5 Geolocation:</p>
<pre>GMaps.geolocate({
success: function(position){
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function(error){
alert('Geolocation failed: '+error.message);
},
not_supported: function(){
alert("Your browser does not support geolocation");
},
always: function(){
alert("Done!");
}
});</pre>
<p><code>GMaps.geolocate</code> supports 4 functions:
<ul>
<li><code>success</code> (required): fires when geolocation has been successful</li>
<li><code>error</code> (required): fires when geolocation has not been done</li>
<li><code>not_supported</code> (required): fires when geolocation is not supported by the browser</li>
<li><code>always</code> (optional): fires always after every scenario described above.</li>
</ul></p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Geometry overlays</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
var bounds = [[-12.030397656836609,-77.02373871559225],[-12.034804866577001,-77.01154422636042]];
rectangle = map.drawRectangle({
bounds: bounds,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
var paths = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]];
polygon = map.drawPolygon({
paths: paths,
strokeColor: '#25D359',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#25D359',
fillOpacity: 0.6
});
lat = -12.040504866577001;
lng = -77.02024422636042;
circle = map.drawCircle({
lat: lat,
lng: lng,
radius: 350,
strokeColor: '#432070',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#432070',
fillOpacity: 0.6
});
for(i in paths){
bounds.push(paths[i]);
}
b = [];
for(i in bounds){
latlng = new google.maps.LatLng(bounds[i][0], bounds[i][1]);
b.push(latlng);
}
for(i in paths){
latlng = new google.maps.LatLng(paths[i][0], paths[i][1]);
b.push(latlng);
}
map.fitLatLngBounds(b);
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Geometry overlays</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can draw geometry overlays (which can be a polygon or a rectangle or a circle):</p>
<pre>polygon = map.drawRectangle({
bounds: bounds,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
polygon = map.drawPolygon({
paths: paths,
strokeColor: '#25D359',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#25D359',
fillOpacity: 0.6
});
circle = map.drawCircle({
lat: lat,
lng: lng,
radius: 350, //350 meters
strokeColor: '#432070',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#432070',
fillOpacity: 0.6
});</pre>
<p>Be careful with the settings as they are not the same for each overlay.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; KML layers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map, infoWindow;
$(document).ready(function(){
infoWindow = new google.maps.InfoWindow({});
map = new GMaps({
el: '#map',
zoom: 12,
lat: 40.65,
lng: -73.95
});
map.loadFromKML({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss',
suppressInfoWindows: true,
events: {
click: function(point){
infoWindow.setContent(point.featureData.infoWindowHtml);
infoWindow.setPosition(point.latLng);
infoWindow.open(map.map);
}
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; KML layers</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>GMaps.js allows to add KML and GeoRSS layers:</p>
<pre>infoWindow = new google.maps.InfoWindow({});
map.loadFromKML({
url: 'http://www.searcharoo.net/SearchKml/newyork.kml',
suppressInfoWindows: true,
events: {
click: function(point){
infoWindow.setContent(point.featureData.infoWindowHtml);
infoWindow.setPosition(point.latLng);
infoWindow.open(map.map);
}
}
});</pre>
<p>
<span class="label notice">Note: </span> You can learn more about KML and GeoRSS layers <a href="https://developers.google.com/maps/documentation/javascript/layers#KMLLayers">here</a>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layers Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=weather"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(function () {
map = new GMaps({
el: "#map",
lat: -12.043333,
lng: -77.028333,
zoom: 3
});
map.addLayer('weather', {
clickable: false
});
map.addLayer('clouds');
});
</script>
</head>
<body>
<h1>GMaps.js add and remove layers - Layers</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can easily add or remove a layer using GMaps.js:</p>
<pre>var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.addLayer('weather', {
clickable: false
});
map.addLayer('clouds');
</pre>
<p><span class="label notice">Note: </span> You can choose <strong>different layers</strong>. Possible values are <strong>weather</strong>, <strong>clouds</strong>, <strong>traffic</strong>, <strong>transit</strong> and/or <strong>bicycling</strong></p>
<p><span class="label notice">Note: </span> Be aware that you have to add the library 'weather' in the url for the weather/clouds layer: <pre>http://maps.google.com/maps/api/js?sensor=true&libraries=weather</pre></p>
<p><span class="label notice">Note: </span> In the second param you can add your options for the layer as object.</p>
<p><span class="label notice">Note: </span> To remove a layer you can use <pre>map.removeLayer('clouds');</pre></p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layers Maps: Places</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script>
$(function () {
var map = new GMaps({
el: "#map",
lat: -33.8665433,
lng: 151.1956316,
zoom: 15
});
map.addLayer('places', {
location : new google.maps.LatLng(-33.8665433,151.1956316),
radius : 500,
types : ['store'],
search: function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
map.addMarker({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
title : place.name,
infoWindow : {
content : '<h2>'+place.name+'</h2><p>'+(place.vicinity ? place.vicinity : place.formatted_address)+'</p><img src="'+place.icon+'"" width="100"/>'
}
});
}
}
}
});
});
</script>
</head>
<body>
<h1>GMaps.js Places layer</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can easily add or remove a layer using GMaps.js:</p>
<pre>map.addLayer('places', {
location : new google.maps.LatLng(-33.8665433,151.1956316),
radius : 500,
types : ['store'],
search: function (results, status) {
//do something with the result
}
});
</pre>
<p><span class="label notice">Note: </span> There are 3 types of function to use: <strong>search()</strong>, <strong>textSearch()</strong> and <strong>nearbySearch()</strong>. On the <a href="https://developers.google.com/maps/documentation/javascript/places" target="_blank">Google Places</a> page you can see the options to use per search function.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Map events</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
zoom: 16,
lat: -12.043333,
lng: -77.028333,
click: function(e){
alert('click');
},
dragend: function(e){
alert('dragend');
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Map events</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>GMaps.js allows to define map events very easily:</p>
<pre>map = new GMaps({
el: '#map',
zoom: 16,
lat: -12.043333,
lng: -77.028333,
click: function(e){
alert('click');
},
dragend: function(e){
alert('dragend');
}
});</pre>
<p><span class="label notice">Note: </span>You can check the list of map events <a href="http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html#Map">here</a>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Map Types</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
mapTypeControlOptions: {
mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm", "cloudmade"]
}
});
map.addMapType("osm", {
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
});
map.addMapType("cloudmade", {
getTileUrl: function(coord, zoom) {
return "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "CloudMade",
maxZoom: 18
});
map.setMapTypeId("osm");
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Map Types</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can define many map types from external map services, like OpenStreetMap:</p>
<pre>map.addMapType("osm", {
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
});</pre>
<p>You must define a function called <code>getTileUrl</code>, which returns a tile URL according the coordenates in the map.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Marker Clusterer</title>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333,
markerClusterer: function(map) {
return new MarkerClusterer(map);
}
});
var lat_span = -12.035988012939503 - -12.050677786181573;
var lng_span = -77.01528673535154 - -77.04137926464841;
for(var i = 0; i < 100; i++) {
var latitude = Math.random()*(lat_span) + -12.050677786181573;
var longitude = Math.random()*(lng_span) + -77.04137926464841;
map.addMarker({
lat: latitude,
lng: longitude,
title: 'Marker #' + i
});
}
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Marker Clusterer</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>With GMaps.js you can use a marker clusterer to group large amount of markers:</p>
<pre>map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333,
markerClusterer: function(map) {
return new MarkerClusterer(map);
}
});</pre>
<p>You can use MarkerClusterer or MarkerClustererPlus. If you want to use a custom marker clustering library, you have to define a <code>addMarker</code> method.</p>
<p><span class="label notice">Note:</span> Read more about MarkerClusterer and MarkerClustererPlus <a href="http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries">here</a>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Markers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.addMarker({
lat: -12.043333,
lng: -77.03,
title: 'Lima',
details: {
database_id: 42,
author: 'HPNeo'
},
click: function(e){
if(console.log)
console.log(e);
alert('You clicked in this marker');
},
mouseover: function(e){
if(console.log)
console.log(e);
}
});
map.addMarker({
lat: -12.042,
lng: -77.028333,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<p>HTML Content</p>'
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Markers</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>With GMaps.js you can add markers this way:</p>
<pre>map.addMarker({
lat: -12.043333,
lng: -77.028333,
title: 'Lima',
click: function(e){
alert('You clicked in this marker');
}
});</pre>
<p><strong>latitude</strong> and <strong>longitude</strong> are required. You can also attach additional information with <code>details</code>, which will be passed to Event object (<code>e</code>) in the events previously defined.</p>
<p><span class="label notice">Note </span>If you want to show an Info Window, you must add:</p>
<pre>infoWindow: {
content: '&lt;p&gt;HTML Content&lt;/p&gt;'
}</pre>
<p><span class="label notice">Note</span>The Info Windows also can bind these events: <code>closeclick</code>, <code>content_changed</code>, <code>domready</code>, <code>position_changed</code> and <code>zindex_changed</code></p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Overlay Map Types</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
var getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.background = 'rgba(250, 250, 250, 0.55)';
div.style.fontFamily = 'Monaco, Andale Mono, Courier New, monospace';
div.style.fontSize = '10';
div.style.fontWeight = 'bolder';
div.style.border = 'dotted 1px #aaa';
div.style.textAlign = 'center';
div.style.lineHeight = this.tileSize.height + 'px';
return div;
};
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.addOverlayMapType({
index: 0,
tileSize: new google.maps.Size(256, 256),
getTile: getTile
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Overlay Map Types</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can define many overlay map types this way:</p>
<pre>var getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.background = 'rgba(250, 250, 250, 0.55)';
div.style.fontFamily = 'Monaco, Andale Mono, Courier New, monospace';
div.style.fontSize = '10';
div.style.fontWeight = 'bolder';
div.style.border = 'dotted 1px #aaa';
div.style.textAlign = 'center';
div.style.lineHeight = this.tileSize.height + 'px';
return div;
};
map.addOverlayMapType({
index: 0,
tileSize: new google.maps.Size(256, 256),
getTile: getTile
});</pre>
<p>You must define a function called <code>getTile</code>, which returns a HTML element used to fill the map overlay. Also, you have to set an overlay <code>index</code>, which place the overlay on top of the base map, according this index.</p>
<p><span class="label notice">NOTE:</span> You can remove an overlay map type using <code>removeOverlayMapType(overlay_index)</code>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Overlays</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.drawOverlay({
lat: map.getCenter().lat(),
lng: map.getCenter().lng(),
layer: 'overlayLayer',
content: '<div class="overlay">Lima<div class="overlay_arrow above"></div></div>',
verticalAlign: 'top',
horizontalAlign: 'center'
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Overlays</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can add overlays using:</p>
<pre>map.drawOverlay({
lat: -12.043333,
lng: -77.028333,
content: '&lt;div class="overlay"&gt;Lima&lt;/div&gt;'
});</pre>
<p>You must define <strong>latitude</strong>, <strong>longitude</strong> and the <strong>content</strong> of the map overlay.</p>
<p><span class="label notice">Note: </span>Also, you must define a <strong>height</strong> to the <strong>content</strong>.</p>
<p><span class="label notice">Note: </span>Also, you can define a <code>verticalAlign</code>, which can be <code>top</code>, <code>middle</code> or <code>bottom</code>, and <code>horizontalAlign</code>, which can be <code>left</code>, <code>center</code> or <code>right</code>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Polygons</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map, path, paths;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.040397656836609,
lng: -77.03373871559225,
click: function(e){
console.log(e);
}
});
paths = [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.74620006835170],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
];
path = [[-12.040397656836609,-77.03373871559225], [-12.040248585302038,-77.03993927003302], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042]];
map.drawPolygon({
paths: paths,
useGeoJSON: true,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
map.drawPolygon({
paths: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Polygons</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can add polygons in GMaps.js this way:</p>
<pre>path = [[-12.040397656836609,-77.03373871559225], [-12.040248585302038,-77.03993927003302], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042]];
map.drawPolygon({
paths: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});</pre>
<p>The path of the polygon is defined by an array of array of two (latitude and longitude).</p>
<p><span class="label notice">NOTE:</span> Also, you can add a GeoJSON Polygon or MultiPolygon path using <code>useGeoJSON: true</code>.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Polylines</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
click: function(e){
console.log(e);
}
});
path = [[-12.044012922866312, -77.02470665341184], [-12.05449279282314, -77.03024273281858], [-12.055122327623378, -77.03039293652341], [-12.075917129727586, -77.02764635449216], [-12.07635776902266, -77.02792530422971], [-12.076819390363665, -77.02893381481931], [-12.088527520066453, -77.0241058385925], [-12.090814532191756, -77.02271108990476]];
map.drawPolyline({
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Polylines</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can add polylines in GMaps.js this way:</p>
<pre>path = [[-12.044012922866312, -77.02470665341184], [-12.05449279282314, -77.03024273281858], [-12.055122327623378, -77.03039293652341], [-12.075917129727586, -77.02764635449216], [-12.07635776902266, -77.02792530422971], [-12.076819390363665, -77.02893381481931], [-12.088527520066453, -77.0241058385925], [-12.090814532191756, -77.02271108990476]];
map.drawPolyline({
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});</pre>
<p>The path of the polyline is defined by an array of array of two (latitude and longitude).</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Routes</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.drawRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Routes</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>With GMaps.js you can draw a route between two points this way:</p>
<pre>map.drawRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});</pre>
<p>You must define two points (<strong>origin</strong> and <strong>destination</strong>) and color, opacity and weight of the route in the map.</p>
<p>Also, you can define a <code>travelMode</code>: <code>driving</code>, <code>bicycling</code> or <code>walking</code>. Default is <code>walking</code></p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Routes</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
map.travelRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
step: function(e){
$('#instructions').append('<li>'+e.instructions+'</li>');
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Routes</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
<ul id="instructions">
</ul>
</div>
<div class="span6">
<p>You can travel a route, step by step, this way:</p>
<pre>map.travelRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
step: function(e){
$('#instructions').append('&lt;li&gt;'+e.instructions+'&lt;/li&gt;');
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});</pre>
<p>Same as <code>drawRoute</code>, you must define an <strong>origin</strong>, <strong>destination</strong> and <code>travelMode</code>. Also, you must define the function that GMaps will call every step in the route.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Static map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script>
$(document).ready(function(){
var url = GMaps.staticMapURL({
size: [610, 350],
lat: -12.043333,
lng: -77.028333
});
$('<img/>').attr('src', url).appendTo('#map');
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Static map</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can easily make a static map using GMaps.js:</p>
<pre>url = GMaps.staticMapURL({
size: [610, 350],
lat: -12.043333,
lng: -77.028333
});
$('&lt;img/&gt;').attr('src', url)
.appendTo('#map');</pre>
<p>You must define a <strong>size</strong> and the <strong>latitude</strong> and <strong>longitude</strong> of the map's center.</p>
<p><span class="label notice">Note: </span> You also can define <strong>zoom</strong> (by default is 15).</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Static map with markers</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script>
$(document).ready(function(){
var url = GMaps.staticMapURL({
size: [610, 350],
lat: -12.043333,
lng: -77.028333,
markers: [
{lat: -12.043333, lng: -77.028333},
{lat: -12.045333, lng: -77.034, size: 'small'},
{lat: -12.045633, lng: -77.022, color: 'blue'}
]
});
$('<img/>').attr('src', url).appendTo('#map');
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Static map with markers</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>With GMaps.js, a static map with markers is made this way:</p>
<pre>url = GMaps.staticMapURL({
size: [610, 350],
lat: -12.043333,
lng: -77.028333,
markers: [
{lat: -12.043333, lng: -77.028333},
{lat: -12.045333, lng: -77.034, size: 'small'},
{lat: -12.045633, lng: -77.022, color: 'blue'}
]
});
$('&lt;img/&gt;').attr('src', url)
.appendTo('#map');</pre>
<p>If no style attribute (like <strong>color</strong>, <strong>size</strong> or <strong>icon</strong>) is defined for a marker, the last one (or the default) will be used.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Static map with polyline</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script>
$(document).ready(function(){
var path = [
[-12.040397656836609,-77.03373871559225],
[-12.040248585302038,-77.03993927003302],
[-12.050047116528843,-77.02448169303511],
[-12.044804866577001,-77.02154422636042],
[-12.040397656836609,-77.03373871559225]
];
var url = GMaps.staticMapURL({
size: [610, 350],
lat: -12.043333,
lng: -77.028333,
polyline: {
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
}
});
$('<img/>').attr('src', url).appendTo('#map');
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Static map with polyline</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>A single polyline can be also drawed in a static map:</p>
<pre>url = GMaps.staticMapURL({
size: [610, 350],
lat: -12.043333,
lng: -77.028333,
polyline: {
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
}
});
$('&lt;img/&gt;').attr('src', url)
.appendTo('#map');</pre>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styled Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script>
$(function () {
var map = new GMaps({
el: "#map",
lat: 41.895465,
lng: 12.482324,
zoom: 5,
zoomControl : true,
zoomControlOpt: {
style : "SMALL",
position: "TOP_LEFT"
},
panControl : true,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
});
</script>
</head>
<body>
<h1>GMaps.js style extension - Styled Maps</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can easily manage a map style using GMaps.js:</p>
<pre> var styles = [
{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
...
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");</pre>
<p><span class="label notice">Note: </span>You can choose <strong>different styles</strong> and associate the styled map with the <strong>MapTypeId</strong> and set it to display.</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js &mdash; Travel Route</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map;
var route;
$(document).ready(function(){
$('#forward').attr('disabled', 'disabled');
$('#back').attr('disabled', 'disabled');
$('#get_route').click(function(e){
e.preventDefault();
map.getRoutes({
origin: [map.markers[0].getPosition().lat(), map.markers[0].getPosition().lng()],
destination: [map.markers[map.markers.length-1].getPosition().lat(), map.markers[map.markers.length-1].getPosition().lng()],
callback: function(e){
route = new GMaps.Route({
map: map,
route: e[0],
strokeColor: '#336699',
strokeOpacity: 0.5,
strokeWeight: 10
});
$('#forward').removeAttr('disabled');
$('#back').removeAttr('disabled');
}
});
$('#forward').click(function(e){
e.preventDefault();
route.forward();
if(route.step_count < route.steps_length)
$('#steps').append('<li>'+route.steps[route.step_count].instructions+'</li>');
});
$('#back').click(function(e){
e.preventDefault();
route.back();
if(route.step_count >= 0)
$('#steps').find('li').last().remove();
});
});
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoom: 16,
height: '500px',
click: function(e){
map.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng()
});
}
});
});
</script>
</head>
<body>
<h1>GMaps.js &mdash; Travel route</h1>
<div class="row">
<div class="span16">
<div id="map" class="large"></div>
</div>
<div class="span5">
<div class="row">
<a href="#" class="btn" id="get_route">Get route</a>
<a href="#" class="btn" id="back">&laquo; Back</a>
<a href="#" class="btn" id="forward">Forward &raquo;</a>
</div>
<div class="row">
<ul id="steps">
</ul>
</div>
</div>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,49 @@
GMaps.prototype.createControl = function(options) {
var control = document.createElement('div');
control.style.cursor = 'pointer';
control.style.fontFamily = 'Arial, sans-serif';
control.style.fontSize = '13px';
control.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
for (var option in options.style) {
control.style[option] = options.style[option];
}
if (options.id) {
control.id = options.id;
}
if (options.classes) {
control.className = options.classes;
}
if (options.content) {
control.innerHTML = options.content;
}
for (var ev in options.events) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(){
options.events[name].apply(this, [this]);
});
})(control, ev);
}
control.index = 1;
return control;
};
GMaps.prototype.addControl = function(options) {
var position = google.maps.ControlPosition[options.position.toUpperCase()];
delete options.position;
var control = this.createControl(options);
this.controls.push(control);
this.map.controls[position].push(control);
return control;
};

View File

@@ -0,0 +1,453 @@
if (!(typeof window.google === 'object' && window.google.maps)) {
throw 'Google Maps API is required. Please register the following JavaScript library http://maps.google.com/maps/api/js?sensor=true.'
}
var extend_object = function(obj, new_obj) {
var name;
if (obj === new_obj) {
return obj;
}
for (name in new_obj) {
obj[name] = new_obj[name];
}
return obj;
};
var replace_object = function(obj, replace) {
var name;
if (obj === replace) {
return obj;
}
for (name in replace) {
if (obj[name] != undefined) {
obj[name] = replace[name];
}
}
return obj;
};
var array_map = function(array, callback) {
var original_callback_params = Array.prototype.slice.call(arguments, 2),
array_return = [],
array_length = array.length,
i;
if (Array.prototype.map && array.map === Array.prototype.map) {
array_return = Array.prototype.map.call(array, function(item) {
callback_params = original_callback_params;
callback_params.splice(0, 0, item);
return callback.apply(this, callback_params);
});
}
else {
for (i = 0; i < array_length; i++) {
callback_params = original_callback_params;
callback_params.splice(0, 0, array[i]);
array_return.push(callback.apply(this, callback_params));
}
}
return array_return;
};
var array_flat = function(array) {
var new_array = [],
i;
for (i = 0; i < array.length; i++) {
new_array = new_array.concat(array[i]);
}
return new_array;
};
var coordsToLatLngs = function(coords, useGeoJSON) {
var first_coord = coords[0],
second_coord = coords[1];
if (useGeoJSON) {
first_coord = coords[1];
second_coord = coords[0];
}
return new google.maps.LatLng(first_coord, second_coord);
};
var arrayToLatLng = function(coords, useGeoJSON) {
var i;
for (i = 0; i < coords.length; i++) {
if (coords[i].length > 0 && typeof(coords[i][0]) != "number") {
coords[i] = arrayToLatLng(coords[i], useGeoJSON);
}
else {
coords[i] = coordsToLatLngs(coords[i], useGeoJSON);
}
}
return coords;
};
var getElementById = function(id, context) {
var element,
id = id.replace('#', '');
if ('jQuery' in this && context) {
element = $("#" + id, context)[0];
} else {
element = document.getElementById(id);
};
return element;
};
var findAbsolutePosition = function(obj) {
var curleft = 0,
curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft, curtop];
};
var GMaps = (function(global) {
"use strict";
var doc = document;
var GMaps = function(options) {
options.zoom = options.zoom || 15;
options.mapType = options.mapType || 'roadmap';
var self = this,
i,
events_that_hide_context_menu = ['bounds_changed', 'center_changed', 'click', 'dblclick', 'drag', 'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed', 'resize', 'tilesloaded', 'zoom_changed'],
events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'],
options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'],
container_id = options.el || options.div,
markerClustererFunction = options.markerClusterer,
mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
map_center = new google.maps.LatLng(options.lat, options.lng),
zoomControl = options.zoomControl || true,
zoomControlOpt = options.zoomControlOpt || {
style: 'DEFAULT',
position: 'TOP_LEFT'
},
zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
panControl = options.panControl || true,
mapTypeControl = options.mapTypeControl || true,
scaleControl = options.scaleControl || true,
streetViewControl = options.streetViewControl || true,
overviewMapControl = overviewMapControl || true,
map_options = {},
map_base_options = {
zoom: this.zoom,
center: map_center,
mapTypeId: mapType
},
map_controls_options = {
panControl: panControl,
zoomControl: zoomControl,
zoomControlOptions: {
style: google.maps.ZoomControlStyle[zoomControlStyle],
position: google.maps.ControlPosition[zoomControlPosition]
},
mapTypeControl: mapTypeControl,
scaleControl: scaleControl,
streetViewControl: streetViewControl,
overviewMapControl: overviewMapControl
};
if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
this.el = getElementById(container_id, options.context);
} else {
this.el = container_id;
}
if (typeof(this.el) === 'undefined' || this.el === null) {
throw 'No element defined.';
}
window.context_menu = window.context_menu || {};
window.context_menu[self.el.id] = {};
this.controls = [];
this.overlays = [];
this.layers = []; // array with kml/georss and fusiontables layers, can be as many
this.singleLayers = {}; // object with the other layers, only one per layer
this.markers = [];
this.polylines = [];
this.routes = [];
this.polygons = [];
this.infoWindow = null;
this.overlay_el = null;
this.zoom = options.zoom;
this.registered_events = {};
this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;
google.maps.visualRefresh = options.enableNewStyle;
for (i = 0; i < options_to_be_deleted.length; i++) {
delete options[options_to_be_deleted[i]];
}
if(options.disableDefaultUI != true) {
map_base_options = extend_object(map_base_options, map_controls_options);
}
map_options = extend_object(map_base_options, options);
for (i = 0; i < events_that_hide_context_menu.length; i++) {
delete map_options[events_that_hide_context_menu[i]];
}
for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
delete map_options[events_that_doesnt_hide_context_menu[i]];
}
this.map = new google.maps.Map(this.el, map_options);
if (markerClustererFunction) {
this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
}
var buildContextMenuHTML = function(control, e) {
var html = '',
options = window.context_menu[self.el.id][control];
for (var i in options){
if (options.hasOwnProperty(i)) {
var option = options[i];
html += '<li><a id="' + control + '_' + i + '" href="#">' + option.title + '</a></li>';
}
}
if (!getElementById('gmaps_context_menu')) return;
var context_menu_element = getElementById('gmaps_context_menu');
context_menu_element.innerHTML = html;
var context_menu_items = context_menu_element.getElementsByTagName('a'),
context_menu_items_count = context_menu_items.length
i;
for (i = 0; i < context_menu_items_count; i++) {
var context_menu_item = context_menu_items[i];
var assign_menu_item_action = function(ev){
ev.preventDefault();
options[this.id.replace(control + '_', '')].action.apply(self, [e]);
self.hideContextMenu();
};
google.maps.event.clearListeners(context_menu_item, 'click');
google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false);
}
var position = findAbsolutePosition.apply(this, [self.el]),
left = position[0] + e.pixel.x - 15,
top = position[1] + e.pixel.y- 15;
context_menu_element.style.left = left + "px";
context_menu_element.style.top = top + "px";
context_menu_element.style.display = 'block';
};
this.buildContextMenu = function(control, e) {
if (control === 'marker') {
e.pixel = {};
var overlay = new google.maps.OverlayView();
overlay.setMap(self.map);
overlay.draw = function() {
var projection = overlay.getProjection(),
position = e.marker.getPosition();
e.pixel = projection.fromLatLngToContainerPixel(position);
buildContextMenuHTML(control, e);
};
}
else {
buildContextMenuHTML(control, e);
}
};
this.setContextMenu = function(options) {
window.context_menu[self.el.id][options.control] = {};
var i,
ul = doc.createElement('ul');
for (i in options.options) {
if (options.options.hasOwnProperty(i)) {
var option = options.options[i];
window.context_menu[self.el.id][options.control][option.name] = {
title: option.title,
action: option.action
};
}
}
ul.id = 'gmaps_context_menu';
ul.style.display = 'none';
ul.style.position = 'absolute';
ul.style.minWidth = '100px';
ul.style.background = 'white';
ul.style.listStyle = 'none';
ul.style.padding = '8px';
ul.style.boxShadow = '2px 2px 6px #ccc';
doc.body.appendChild(ul);
var context_menu_element = getElementById('gmaps_context_menu')
google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
window.setTimeout(function(){
context_menu_element.style.display = 'none';
}, 400);
}
}, false);
};
this.hideContextMenu = function() {
var context_menu_element = getElementById('gmaps_context_menu');
if (context_menu_element) {
context_menu_element.style.display = 'none';
}
};
var setupListener = function(object, name) {
google.maps.event.addListener(object, name, function(e){
if (e == undefined) {
e = this;
}
options[name].apply(this, [e]);
self.hideContextMenu();
});
};
for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) {
var name = events_that_hide_context_menu[ev];
if (name in options) {
setupListener(this.map, name);
}
}
for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) {
var name = events_that_doesnt_hide_context_menu[ev];
if (name in options) {
setupListener(this.map, name);
}
}
google.maps.event.addListener(this.map, 'rightclick', function(e) {
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}
if(window.context_menu[self.el.id]['map'] != undefined) {
self.buildContextMenu('map', e);
}
});
this.refresh = function() {
google.maps.event.trigger(this.map, 'resize');
};
this.fitZoom = function() {
var latLngs = [],
markers_length = this.markers.length,
i;
for (i = 0; i < markers_length; i++) {
latLngs.push(this.markers[i].getPosition());
}
this.fitLatLngBounds(latLngs);
};
this.fitLatLngBounds = function(latLngs) {
var total = latLngs.length;
var bounds = new google.maps.LatLngBounds();
for(var i=0; i < total; i++) {
bounds.extend(latLngs[i]);
}
this.map.fitBounds(bounds);
};
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));
if (callback) {
callback();
}
};
this.getElement = function() {
return this.el;
};
this.zoomIn = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() + value;
this.map.setZoom(this.zoom);
};
this.zoomOut = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() - value;
this.map.setZoom(this.zoom);
};
var native_methods = [],
method;
for (method in this.map) {
if (typeof(this.map[method]) == 'function' && !this[method]) {
native_methods.push(method);
}
}
for (i=0; i < native_methods.length; i++) {
(function(gmaps, scope, method_name) {
gmaps[method_name] = function(){
return scope[method_name].apply(scope, arguments);
};
})(this, this.map, native_methods[i]);
}
};
return GMaps;
})(this);

View File

@@ -0,0 +1,52 @@
GMaps.prototype.on = function(event_name, handler) {
return GMaps.on(event_name, this, handler);
};
GMaps.prototype.off = function(event_name) {
GMaps.off(event_name, this);
};
GMaps.custom_events = ['marker_added', 'marker_removed', 'polyline_added', 'polyline_removed', 'polygon_added', 'polygon_removed', 'geolocated', 'geolocation_failed'];
GMaps.on = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
return google.maps.event.addListener(object, event_name, handler);
}
else {
var registered_event = {
handler : handler,
eventName : event_name
};
object.registered_events[event_name] = object.registered_events[event_name] || [];
object.registered_events[event_name].push(registered_event);
return registered_event;
}
};
GMaps.off = function(event_name, object) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
google.maps.event.clearListeners(object, event_name);
}
else {
object.registered_events[event_name] = [];
}
};
GMaps.fire = function(event_name, object, scope) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
google.maps.event.trigger(object, event_name, Array.prototype.slice.apply(arguments).slice(2));
}
else {
if(event_name in scope.registered_events) {
var firing_events = scope.registered_events[event_name];
for(var i = 0; i < firing_events.length; i++) {
(function(handler, scope, object) {
handler.apply(scope, [object]);
})(firing_events[i]['handler'], scope, object);
}
}
}
};

View File

@@ -0,0 +1,14 @@
GMaps.prototype.checkGeofence = function(lat, lng, fence) {
return fence.containsLatLng(new google.maps.LatLng(lat, lng));
};
GMaps.prototype.checkMarkerGeofence = function(marker, outside_callback) {
if (marker.fences) {
for (var i = 0, fence; fence = marker.fences[i]; i++) {
var pos = marker.getPosition();
if (!this.checkGeofence(pos.lat(), pos.lng(), fence)) {
outside_callback(marker, fence);
}
}
}
};

View File

@@ -0,0 +1,205 @@
GMaps.prototype.drawPolyline = function(options) {
var path = [],
points = options.path;
if (points.length) {
if (points[0][0] === undefined) {
path = points;
}
else {
for (var i=0, latlng; latlng=points[i]; i++) {
path.push(new google.maps.LatLng(latlng[0], latlng[1]));
}
}
}
var polyline_options = {
map: this.map,
path: path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight,
geodesic: options.geodesic,
clickable: true,
editable: false,
visible: true
};
if (options.hasOwnProperty("clickable")) {
polyline_options.clickable = options.clickable;
}
if (options.hasOwnProperty("editable")) {
polyline_options.editable = options.editable;
}
if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}
if (options.hasOwnProperty("zIndex")) {
polyline_options.zIndex = options.zIndex;
}
var polyline = new google.maps.Polyline(polyline_options);
var polyline_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polyline_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polyline, polyline_events[ev]);
}
this.polylines.push(polyline);
GMaps.fire('polyline_added', polyline, this);
return polyline;
};
GMaps.prototype.removePolyline = function(polyline) {
for (var i = 0; i < this.polylines.length; i++) {
if (this.polylines[i] === polyline) {
this.polylines[i].setMap(null);
this.polylines.splice(i, 1);
GMaps.fire('polyline_removed', polyline, this);
break;
}
}
};
GMaps.prototype.removePolylines = function() {
for (var i = 0, item; item = this.polylines[i]; i++) {
item.setMap(null);
}
this.polylines = [];
};
GMaps.prototype.drawCircle = function(options) {
options = extend_object({
map: this.map,
center: new google.maps.LatLng(options.lat, options.lng)
}, options);
delete options.lat;
delete options.lng;
var polygon = new google.maps.Circle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}
this.polygons.push(polygon);
return polygon;
};
GMaps.prototype.drawRectangle = function(options) {
options = extend_object({
map: this.map
}, options);
var latLngBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(options.bounds[0][0], options.bounds[0][1]),
new google.maps.LatLng(options.bounds[1][0], options.bounds[1][1])
);
options.bounds = latLngBounds;
var polygon = new google.maps.Rectangle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}
this.polygons.push(polygon);
return polygon;
};
GMaps.prototype.drawPolygon = function(options) {
var useGeoJSON = false;
if(options.hasOwnProperty("useGeoJSON")) {
useGeoJSON = options.useGeoJSON;
}
delete options.useGeoJSON;
options = extend_object({
map: this.map
}, options);
if (useGeoJSON == false) {
options.paths = [options.paths.slice(0)];
}
if (options.paths.length > 0) {
if (options.paths[0].length > 0) {
options.paths = array_flat(array_map(options.paths, arrayToLatLng, useGeoJSON));
}
}
var polygon = new google.maps.Polygon(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}
this.polygons.push(polygon);
GMaps.fire('polygon_added', polygon, this);
return polygon;
};
GMaps.prototype.removePolygon = function(polygon) {
for (var i = 0; i < this.polygons.length; i++) {
if (this.polygons[i] === polygon) {
this.polygons[i].setMap(null);
this.polygons.splice(i, 1);
GMaps.fire('polygon_removed', polygon, this);
break;
}
}
};
GMaps.prototype.removePolygons = function() {
for (var i = 0, item; item = this.polygons[i]; i++) {
item.setMap(null);
}
this.polygons = [];
};

View File

@@ -0,0 +1,154 @@
GMaps.prototype.getFromFusionTables = function(options) {
var events = options.events;
delete options.events;
var fusion_tables_options = options,
layer = new google.maps.FusionTablesLayer(fusion_tables_options);
for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}
this.layers.push(layer);
return layer;
};
GMaps.prototype.loadFromFusionTables = function(options) {
var layer = this.getFromFusionTables(options);
layer.setMap(this.map);
return layer;
};
GMaps.prototype.getFromKML = function(options) {
var url = options.url,
events = options.events;
delete options.url;
delete options.events;
var kml_options = options,
layer = new google.maps.KmlLayer(url, kml_options);
for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}
this.layers.push(layer);
return layer;
};
GMaps.prototype.loadFromKML = function(options) {
var layer = this.getFromKML(options);
layer.setMap(this.map);
return layer;
};
GMaps.prototype.addLayer = function(layerName, options) {
//var default_layers = ['weather', 'clouds', 'traffic', 'transit', 'bicycling', 'panoramio', 'places'];
options = options || {};
var layer;
switch(layerName) {
case 'weather': this.singleLayers.weather = layer = new google.maps.weather.WeatherLayer();
break;
case 'clouds': this.singleLayers.clouds = layer = new google.maps.weather.CloudLayer();
break;
case 'traffic': this.singleLayers.traffic = layer = new google.maps.TrafficLayer();
break;
case 'transit': this.singleLayers.transit = layer = new google.maps.TransitLayer();
break;
case 'bicycling': this.singleLayers.bicycling = layer = new google.maps.BicyclingLayer();
break;
case 'panoramio':
this.singleLayers.panoramio = layer = new google.maps.panoramio.PanoramioLayer();
layer.setTag(options.filter);
delete options.filter;
//click event
if (options.click) {
google.maps.event.addListener(layer, 'click', function(event) {
options.click(event);
delete options.click;
});
}
break;
case 'places':
this.singleLayers.places = layer = new google.maps.places.PlacesService(this.map);
//search and nearbySearch callback, Both are the same
if (options.search || options.nearbySearch) {
var placeSearchRequest = {
bounds : options.bounds || null,
keyword : options.keyword || null,
location : options.location || null,
name : options.name || null,
radius : options.radius || null,
rankBy : options.rankBy || null,
types : options.types || null
};
if (options.search) {
layer.search(placeSearchRequest, options.search);
}
if (options.nearbySearch) {
layer.nearbySearch(placeSearchRequest, options.nearbySearch);
}
}
//textSearch callback
if (options.textSearch) {
var textSearchRequest = {
bounds : options.bounds || null,
location : options.location || null,
query : options.query || null,
radius : options.radius || null
};
layer.textSearch(textSearchRequest, options.textSearch);
}
break;
}
if (layer !== undefined) {
if (typeof layer.setOptions == 'function') {
layer.setOptions(options);
}
if (typeof layer.setMap == 'function') {
layer.setMap(this.map);
}
return layer;
}
};
GMaps.prototype.removeLayer = function(layer) {
if (typeof(layer) == "string" && this.singleLayers[layer] !== undefined) {
this.singleLayers[layer].setMap(null);
delete this.singleLayers[layer];
}
else {
for (var i = 0; i < this.layers.length; i++) {
if (this.layers[i] === layer) {
this.layers[i].setMap(null);
this.layers.splice(i, 1);
break;
}
}
}
};

View File

@@ -0,0 +1,29 @@
GMaps.prototype.addMapType = function(mapTypeId, options) {
if (options.hasOwnProperty("getTileUrl") && typeof(options["getTileUrl"]) == "function") {
options.tileSize = options.tileSize || new google.maps.Size(256, 256);
var mapType = new google.maps.ImageMapType(options);
this.map.mapTypes.set(mapTypeId, mapType);
}
else {
throw "'getTileUrl' function required.";
}
};
GMaps.prototype.addOverlayMapType = function(options) {
if (options.hasOwnProperty("getTile") && typeof(options["getTile"]) == "function") {
var overlayMapTypeIndex = options.index;
delete options.index;
this.map.overlayMapTypes.insertAt(overlayMapTypeIndex, options);
}
else {
throw "'getTile' function required.";
}
};
GMaps.prototype.removeOverlayMapType = function(overlayMapTypeIndex) {
this.map.overlayMapTypes.removeAt(overlayMapTypeIndex);
};

View File

@@ -0,0 +1,182 @@
GMaps.prototype.createMarker = function(options) {
if (options.lat == undefined && options.lng == undefined && options.position == undefined) {
throw 'No latitude or longitude defined.';
}
var self = this,
details = options.details,
fences = options.fences,
outside = options.outside,
base_options = {
position: new google.maps.LatLng(options.lat, options.lng),
map: null
};
delete options.lat;
delete options.lng;
delete options.fences;
delete options.outside;
var marker_options = extend_object(base_options, options),
marker = new google.maps.Marker(marker_options);
marker.fences = fences;
if (options.infoWindow) {
marker.infoWindow = new google.maps.InfoWindow(options.infoWindow);
var info_window_events = ['closeclick', 'content_changed', 'domready', 'position_changed', 'zindex_changed'];
for (var ev = 0; ev < info_window_events.length; ev++) {
(function(object, name) {
if (options.infoWindow[name]) {
google.maps.event.addListener(object, name, function(e){
options.infoWindow[name].apply(this, [e]);
});
}
})(marker.infoWindow, info_window_events[ev]);
}
}
var marker_events = ['animation_changed', 'clickable_changed', 'cursor_changed', 'draggable_changed', 'flat_changed', 'icon_changed', 'position_changed', 'shadow_changed', 'shape_changed', 'title_changed', 'visible_changed', 'zindex_changed'];
var marker_events_with_mouse = ['dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mouseout', 'mouseover', 'mouseup'];
for (var ev = 0; ev < marker_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this, [this]);
});
}
})(marker, marker_events[ev]);
}
for (var ev = 0; ev < marker_events_with_mouse.length; ev++) {
(function(map, object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(me){
if(!me.pixel){
me.pixel = map.getProjection().fromLatLngToPoint(me.latLng)
}
options[name].apply(this, [me]);
});
}
})(this.map, marker, marker_events_with_mouse[ev]);
}
google.maps.event.addListener(marker, 'click', function() {
this.details = details;
if (options.click) {
options.click.apply(this, [this]);
}
if (marker.infoWindow) {
self.hideInfoWindows();
marker.infoWindow.open(self.map, marker);
}
});
google.maps.event.addListener(marker, 'rightclick', function(e) {
e.marker = this;
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}
if (window.context_menu[self.el.id]['marker'] != undefined) {
self.buildContextMenu('marker', e);
}
});
if (marker.fences) {
google.maps.event.addListener(marker, 'dragend', function() {
self.checkMarkerGeofence(marker, function(m, f) {
outside(m, f);
});
});
}
return marker;
};
GMaps.prototype.addMarker = function(options) {
var marker;
if(options.hasOwnProperty('gm_accessors_')) {
// Native google.maps.Marker object
marker = options;
}
else {
if ((options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) || options.position) {
marker = this.createMarker(options);
}
else {
throw 'No latitude or longitude defined.';
}
}
marker.setMap(this.map);
if(this.markerClusterer) {
this.markerClusterer.addMarker(marker);
}
this.markers.push(marker);
GMaps.fire('marker_added', marker, this);
return marker;
};
GMaps.prototype.addMarkers = function(array) {
for (var i = 0, marker; marker=array[i]; i++) {
this.addMarker(marker);
}
return this.markers;
};
GMaps.prototype.hideInfoWindows = function() {
for (var i = 0, marker; marker = this.markers[i]; i++){
if (marker.infoWindow){
marker.infoWindow.close();
}
}
};
GMaps.prototype.removeMarker = function(marker) {
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i] === marker) {
this.markers[i].setMap(null);
this.markers.splice(i, 1);
GMaps.fire('marker_removed', marker, this);
break;
}
}
return marker;
};
GMaps.prototype.removeMarkers = function(collection) {
var collection = (collection || this.markers);
for (var i = 0;i < this.markers.length; i++) {
if(this.markers[i] === collection[i]) {
this.markers[i].setMap(null);
}
}
var new_markers = [];
for (var i = 0;i < this.markers.length; i++) {
if(this.markers[i].getMap() != null) {
new_markers.push(this.markers[i]);
}
}
this.markers = new_markers;
};

View File

@@ -0,0 +1,110 @@
//==========================
// Polygon containsLatLng
// https://github.com/tparkin/Google-Maps-Point-in-Polygon
// Poygon getBounds extension - google-maps-extensions
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
google.maps.Polygon.prototype.getBounds = function(latLng) {
var bounds = new google.maps.LatLngBounds();
var paths = this.getPaths();
var path;
for (var p = 0; p < paths.getLength(); p++) {
path = paths.getAt(p);
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
}
return bounds;
};
}
if (!google.maps.Polygon.prototype.containsLatLng) {
// Polygon containsLatLng - method to determine if a latLng is within a polygon
google.maps.Polygon.prototype.containsLatLng = function(latLng) {
// Exclude points outside of bounds as there is no way they are in the poly
var bounds = this.getBounds();
if (bounds !== null && !bounds.contains(latLng)) {
return false;
}
// Raycast point in polygon method
var inPoly = false;
var numPaths = this.getPaths().getLength();
for (var p = 0; p < numPaths; p++) {
var path = this.getPaths().getAt(p);
var numPoints = path.getLength();
var j = numPoints - 1;
for (var i = 0; i < numPoints; i++) {
var vertex1 = path.getAt(i);
var vertex2 = path.getAt(j);
if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}
j = i;
}
}
return inPoly;
};
}
google.maps.LatLngBounds.prototype.containsLatLng = function(latLng) {
return this.contains(latLng);
};
google.maps.Marker.prototype.setFences = function(fences) {
this.fences = fences;
};
google.maps.Marker.prototype.addFence = function(fence) {
this.fences.push(fence);
};
google.maps.Marker.prototype.getId = function() {
return this['__gm_id'];
};
//==========================
// Array indexOf
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
"use strict";
if (this == null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n != n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n != 0 && n != Infinity && n != -Infinity) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
}
}

View File

@@ -0,0 +1,127 @@
GMaps.prototype.drawOverlay = function(options) {
var overlay = new google.maps.OverlayView(),
auto_show = true;
overlay.setMap(this.map);
if (options.auto_show != null) {
auto_show = options.auto_show;
}
overlay.onAdd = function() {
var el = document.createElement('div');
el.style.borderStyle = "none";
el.style.borderWidth = "0px";
el.style.position = "absolute";
el.style.zIndex = 100;
el.innerHTML = options.content;
overlay.el = el;
if (!options.layer) {
options.layer = 'overlayLayer';
}
var panes = this.getPanes(),
overlayLayer = panes[options.layer],
stop_overlay_events = ['contextmenu', 'DOMMouseScroll', 'dblclick', 'mousedown'];
overlayLayer.appendChild(el);
for (var ev = 0; ev < stop_overlay_events.length; ev++) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(e){
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
e.cancelBubble = true;
e.returnValue = false;
}
else {
e.stopPropagation();
}
});
})(el, stop_overlay_events[ev]);
}
google.maps.event.trigger(this, 'ready');
};
overlay.draw = function() {
var projection = this.getProjection(),
pixel = projection.fromLatLngToDivPixel(new google.maps.LatLng(options.lat, options.lng));
options.horizontalOffset = options.horizontalOffset || 0;
options.verticalOffset = options.verticalOffset || 0;
var el = overlay.el,
content = el.children[0],
content_height = content.clientHeight,
content_width = content.clientWidth;
switch (options.verticalAlign) {
case 'top':
el.style.top = (pixel.y - content_height + options.verticalOffset) + 'px';
break;
default:
case 'middle':
el.style.top = (pixel.y - (content_height / 2) + options.verticalOffset) + 'px';
break;
case 'bottom':
el.style.top = (pixel.y + options.verticalOffset) + 'px';
break;
}
switch (options.horizontalAlign) {
case 'left':
el.style.left = (pixel.x - content_width + options.horizontalOffset) + 'px';
break;
default:
case 'center':
el.style.left = (pixel.x - (content_width / 2) + options.horizontalOffset) + 'px';
break;
case 'right':
el.style.left = (pixel.x + options.horizontalOffset) + 'px';
break;
}
el.style.display = auto_show ? 'block' : 'none';
if (!auto_show) {
options.show.apply(this, [el]);
}
};
overlay.onRemove = function() {
var el = overlay.el;
if (options.remove) {
options.remove.apply(this, [el]);
}
else {
overlay.el.parentNode.removeChild(overlay.el);
overlay.el = null;
}
};
this.overlays.push(overlay);
return overlay;
};
GMaps.prototype.removeOverlay = function(overlay) {
for (var i = 0; i < this.overlays.length; i++) {
if (this.overlays[i] === overlay) {
this.overlays[i].setMap(null);
this.overlays.splice(i, 1);
break;
}
}
};
GMaps.prototype.removeOverlays = function() {
for (var i = 0, item; item = this.overlays[i]; i++) {
item.setMap(null);
}
this.overlays = [];
};

View File

@@ -0,0 +1,295 @@
var travelMode, unitSystem;
GMaps.prototype.getRoutes = function(options) {
switch (options.travelMode) {
case 'bicycling':
travelMode = google.maps.TravelMode.BICYCLING;
break;
case 'transit':
travelMode = google.maps.TravelMode.TRANSIT;
break;
case 'driving':
travelMode = google.maps.TravelMode.DRIVING;
break;
default:
travelMode = google.maps.TravelMode.WALKING;
break;
}
if (options.unitSystem === 'imperial') {
unitSystem = google.maps.UnitSystem.IMPERIAL;
}
else {
unitSystem = google.maps.UnitSystem.METRIC;
}
var base_options = {
avoidHighways: false,
avoidTolls: false,
optimizeWaypoints: false,
waypoints: []
},
request_options = extend_object(base_options, options);
request_options.origin = /string/.test(typeof options.origin) ? options.origin : new google.maps.LatLng(options.origin[0], options.origin[1]);
request_options.destination = /string/.test(typeof options.destination) ? options.destination : new google.maps.LatLng(options.destination[0], options.destination[1]);
request_options.travelMode = travelMode;
request_options.unitSystem = unitSystem;
delete request_options.callback;
var self = this,
service = new google.maps.DirectionsService();
service.route(request_options, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
for (var r in result.routes) {
if (result.routes.hasOwnProperty(r)) {
self.routes.push(result.routes[r]);
}
}
}
if (options.callback) {
options.callback(self.routes);
}
});
};
GMaps.prototype.removeRoutes = function() {
this.routes = [];
};
GMaps.prototype.getElevations = function(options) {
options = extend_object({
locations: [],
path : false,
samples : 256
}, options);
if (options.locations.length > 0) {
if (options.locations[0].length > 0) {
options.locations = array_flat(array_map([options.locations], arrayToLatLng, false));
}
}
var callback = options.callback;
delete options.callback;
var service = new google.maps.ElevationService();
//location request
if (!options.path) {
delete options.path;
delete options.samples;
service.getElevationForLocations(options, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
//path request
} else {
var pathRequest = {
path : options.locations,
samples : options.samples
};
service.getElevationAlongPath(pathRequest, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
}
};
GMaps.prototype.cleanRoute = GMaps.prototype.removePolylines;
GMaps.prototype.drawRoute = function(options) {
var self = this;
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
callback: function(e) {
if (e.length > 0) {
self.drawPolyline({
path: e[e.length - 1].overview_path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
});
if (options.callback) {
options.callback(e[e.length - 1]);
}
}
}
});
};
GMaps.prototype.travelRoute = function(options) {
if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}
//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i=0, step; step=steps[i]; i++) {
step.step_number = i;
options.step(step, (route.legs[0].steps.length - 1));
}
}
}
//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i=0, step; step=steps[i]; i++) {
step.step_number = i;
options.step(step);
}
}
}
};
GMaps.prototype.drawSteppedRoute = function(options) {
var self = this;
if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}
//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i=0, step; step=steps[i]; i++) {
step.step_number = i;
self.drawPolyline({
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
});
options.step(step, (route.legs[0].steps.length - 1));
}
}
}
//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i=0, step; step=steps[i]; i++) {
step.step_number = i;
self.drawPolyline({
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
});
options.step(step);
}
}
}
};
GMaps.Route = function(options) {
this.origin = options.origin;
this.destination = options.destination;
this.waypoints = options.waypoints;
this.map = options.map;
this.route = options.route;
this.step_count = 0;
this.steps = this.route.legs[0].steps;
this.steps_length = this.steps.length;
this.polyline = this.map.drawPolyline({
path: new google.maps.MVCArray(),
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
}).getPath();
};
GMaps.Route.prototype.getRoute = function(options) {
var self = this;
this.map.getRoutes({
origin : this.origin,
destination : this.destination,
travelMode : options.travelMode,
waypoints : this.waypoints || [],
callback : function() {
self.route = e[0];
if (options.callback) {
options.callback.call(self);
}
}
});
};
GMaps.Route.prototype.back = function() {
if (this.step_count > 0) {
this.step_count--;
var path = this.route.legs[0].steps[this.step_count].path;
for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.pop();
}
}
}
};
GMaps.Route.prototype.forward = function() {
if (this.step_count < this.steps_length) {
var path = this.route.legs[0].steps[this.step_count].path;
for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.push(path[p]);
}
}
this.step_count++;
}
};

View File

@@ -0,0 +1,195 @@
GMaps.prototype.toImage = function(options) {
var options = options || {},
static_map_options = {};
static_map_options['size'] = options['size'] || [this.el.clientWidth, this.el.clientHeight];
static_map_options['lat'] = this.getCenter().lat();
static_map_options['lng'] = this.getCenter().lng();
if (this.markers.length > 0) {
static_map_options['markers'] = [];
for (var i = 0; i < this.markers.length; i++) {
static_map_options['markers'].push({
lat: this.markers[i].getPosition().lat(),
lng: this.markers[i].getPosition().lng()
});
}
}
if (this.polylines.length > 0) {
var polyline = this.polylines[0];
static_map_options['polyline'] = {};
static_map_options['polyline']['path'] = google.maps.geometry.encoding.encodePath(polyline.getPath());
static_map_options['polyline']['strokeColor'] = polyline.strokeColor
static_map_options['polyline']['strokeOpacity'] = polyline.strokeOpacity
static_map_options['polyline']['strokeWeight'] = polyline.strokeWeight
}
return GMaps.staticMapURL(static_map_options);
};
GMaps.staticMapURL = function(options){
var parameters = [],
data,
static_root = 'http://maps.googleapis.com/maps/api/staticmap';
if (options.url) {
static_root = options.url;
delete options.url;
}
static_root += '?';
var markers = options.markers;
delete options.markers;
if (!markers && options.marker) {
markers = [options.marker];
delete options.marker;
}
var polyline = options.polyline;
delete options.polyline;
/** Map options **/
if (options.center) {
parameters.push('center=' + options.center);
delete options.center;
}
else if (options.address) {
parameters.push('center=' + options.address);
delete options.address;
}
else if (options.lat) {
parameters.push(['center=', options.lat, ',', options.lng].join(''));
delete options.lat;
delete options.lng;
}
else if (options.visible) {
var visible = encodeURI(options.visible.join('|'));
parameters.push('visible=' + visible);
}
var size = options.size;
if (size) {
if (size.join) {
size = size.join('x');
}
delete options.size;
}
else {
size = '630x300';
}
parameters.push('size=' + size);
if (!options.zoom) {
options.zoom = 15;
}
var sensor = options.hasOwnProperty('sensor') ? !!options.sensor : true;
delete options.sensor;
parameters.push('sensor=' + sensor);
for (var param in options) {
if (options.hasOwnProperty(param)) {
parameters.push(param + '=' + options[param]);
}
}
/** Markers **/
if (markers) {
var marker, loc;
for (var i=0; data=markers[i]; i++) {
marker = [];
if (data.size && data.size !== 'normal') {
marker.push('size:' + data.size);
}
else if (data.icon) {
marker.push('icon:' + encodeURI(data.icon));
}
if (data.color) {
marker.push('color:' + data.color.replace('#', '0x'));
}
if (data.label) {
marker.push('label:' + data.label[0].toUpperCase());
}
loc = (data.address ? data.address : data.lat + ',' + data.lng);
if (marker.length || i === 0) {
marker.push(loc);
marker = marker.join('|');
parameters.push('markers=' + encodeURI(marker));
}
// New marker without styles
else {
marker = parameters.pop() + encodeURI('|' + loc);
parameters.push(marker);
}
}
}
/** Polylines **/
function parseColor(color, opacity) {
if (color[0] === '#'){
color = color.replace('#', '0x');
if (opacity) {
opacity = parseFloat(opacity);
opacity = Math.min(1, Math.max(opacity, 0));
if (opacity === 0) {
return '0x00000000';
}
opacity = (opacity * 255).toString(16);
if (opacity.length === 1) {
opacity += opacity;
}
color = color.slice(0,8) + opacity;
}
}
return color;
}
if (polyline) {
data = polyline;
polyline = [];
if (data.strokeWeight) {
polyline.push('weight:' + parseInt(data.strokeWeight, 10));
}
if (data.strokeColor) {
var color = parseColor(data.strokeColor, data.strokeOpacity);
polyline.push('color:' + color);
}
if (data.fillColor) {
var fillcolor = parseColor(data.fillColor, data.fillOpacity);
polyline.push('fillcolor:' + fillcolor);
}
var path = data.path;
if (path.join) {
for (var j=0, pos; pos=path[j]; j++) {
polyline.push(pos.join(','));
}
}
else {
polyline.push('enc:' + path);
}
polyline = polyline.join('|');
parameters.push('path=' + encodeURI(polyline));
}
parameters = parameters.join('&');
return static_root + parameters;
};

View File

@@ -0,0 +1,44 @@
GMaps.prototype.createPanorama = function(streetview_options) {
if (!streetview_options.hasOwnProperty('lat') || !streetview_options.hasOwnProperty('lng')) {
streetview_options.lat = this.getCenter().lat();
streetview_options.lng = this.getCenter().lng();
}
this.panorama = GMaps.createPanorama(streetview_options);
this.map.setStreetView(this.panorama);
return this.panorama;
};
GMaps.createPanorama = function(options) {
var el = getElementById(options.el, options.context);
options.position = new google.maps.LatLng(options.lat, options.lng);
delete options.el;
delete options.context;
delete options.lat;
delete options.lng;
var streetview_events = ['closeclick', 'links_changed', 'pano_changed', 'position_changed', 'pov_changed', 'resize', 'visible_changed'],
streetview_options = extend_object({visible : true}, options);
for (var i = 0; i < streetview_events.length; i++) {
delete streetview_options[streetview_events[i]];
}
var panorama = new google.maps.StreetViewPanorama(el, streetview_options);
for (var i = 0; i < streetview_events.length; i++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this);
});
}
})(panorama, streetview_events[i]);
}
return panorama;
};

View File

@@ -0,0 +1,9 @@
GMaps.prototype.addStyle = function(options) {
var styledMapType = new google.maps.StyledMapType(options.styles, options.styledMapName);
this.map.mapTypes.set(options.mapTypeId, styledMapType);
};
GMaps.prototype.setStyle = function(mapTypeId) {
this.map.setMapTypeId(mapTypeId);
};

View File

@@ -0,0 +1,42 @@
GMaps.geolocate = function(options) {
var complete_callback = options.always || options.complete;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
options.success(position);
if (complete_callback) {
complete_callback();
}
}, function(error) {
options.error(error);
if (complete_callback) {
complete_callback();
}
}, options.options);
}
else {
options.not_supported();
if (complete_callback) {
complete_callback();
}
}
};
GMaps.geocode = function(options) {
this.geocoder = new google.maps.Geocoder();
var callback = options.callback;
if (options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) {
options.latLng = new google.maps.LatLng(options.lat, options.lng);
}
delete options.lat;
delete options.lng;
delete options.callback;
this.geocoder.geocode(options, function(results, status) {
callback(results, status);
});
};

View File

@@ -0,0 +1,26 @@
{
"name": "gmaps",
"version": "0.4.5",
"description": "the easiest way to use Google Maps",
"main": "gmaps.js",
"scripts": {
"test": "grunt test --verbose"
},
"repository": {
"type": "git",
"url": "https://github.com/HPNeo/gmaps"
},
"author": "Gustavo Leon",
"homepage": "http://hpneo.github.com/gmaps/",
"license": "MIT",
"bugs": {
"url": "https://github.com/HPNeo/gmaps/issues"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jasmine": "~0.5.1",
"grunt-contrib-watch": "~0.4.4",
"grunt-contrib-jshint": "~0.6.0"
}
}

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title>gmaps.js test</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="lib/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-html.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<script type="text/javascript" src="spec/MapSpec.js"></script>
<script type="text/javascript" src="spec/MarkerSpec.js"></script>
<script type="text/javascript" src="spec/GeometrySpec.js"></script>
<script type="text/javascript" src="spec/LayerSpec.js"></script>
<script type="text/javascript" src="spec/OverlaySpec.js"></script>
<script type="text/javascript" src="spec/RouteSpec.js"></script>
<script type="text/javascript" src="spec/StyleSpec.js"></script>
<script type="text/javascript" src="spec/StreetViewSpec.js"></script>
<script type="text/javascript" src="spec/EventSpec.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
<h3>Basic map</h3>
<div class="map" id="basic-map"></div>
<h3>Advanced map</h3>
<div class="map" id="advanced-map"></div>
<h3>Map with events</h3>
<div class="map" id="map-with-events"></div>
<h3>Map with markers</h3>
<div class="map" id="map-with-markers"></div>
<h3>Map with custom controls</h3>
<div class="map" id="map-with-custom-controls"></div>
<h3>Map with polygons</h3>
<div class="map" id="map-with-polygons"></div>
<h3>Map with layers</h3>
<div class="map" id="map-with-layers"></div>
<h3>Map with overlays</h3>
<div class="map" id="map-with-overlays"></div>
<h3>Map with routes</h3>
<div class="map" id="map-with-routes"></div>
<h3>Map with styles</h3>
<div class="map" id="map-with-styles"></div>
<h3>Street View Panorama</h3>
<div class="panorama" id="streetview-standalone-panorama"></div>
<h3>Map with Street View</h3>
<div class="with-columns">
<div class="map" id="map-with-streetview"></div>
<div class="panorama" id="streetview-panorama"></div>
</div>
<h3>Street View Panorama with events</h3>
<div class="panorama" id="streetview-with-events"></div>
<h3>Events</h3>
<div class="map" id="events"></div>
</body>
</html>

View File

@@ -0,0 +1,681 @@
jasmine.HtmlReporterHelpers = {};
jasmine.HtmlReporterHelpers.createDom = function(type, attrs, childrenVarArgs) {
var el = document.createElement(type);
for (var i = 2; i < arguments.length; i++) {
var child = arguments[i];
if (typeof child === 'string') {
el.appendChild(document.createTextNode(child));
} else {
if (child) {
el.appendChild(child);
}
}
}
for (var attr in attrs) {
if (attr == "className") {
el[attr] = attrs[attr];
} else {
el.setAttribute(attr, attrs[attr]);
}
}
return el;
};
jasmine.HtmlReporterHelpers.getSpecStatus = function(child) {
var results = child.results();
var status = results.passed() ? 'passed' : 'failed';
if (results.skipped) {
status = 'skipped';
}
return status;
};
jasmine.HtmlReporterHelpers.appendToSummary = function(child, childElement) {
var parentDiv = this.dom.summary;
var parentSuite = (typeof child.parentSuite == 'undefined') ? 'suite' : 'parentSuite';
var parent = child[parentSuite];
if (parent) {
if (typeof this.views.suites[parent.id] == 'undefined') {
this.views.suites[parent.id] = new jasmine.HtmlReporter.SuiteView(parent, this.dom, this.views);
}
parentDiv = this.views.suites[parent.id].element;
}
parentDiv.appendChild(childElement);
};
jasmine.HtmlReporterHelpers.addHelpers = function(ctor) {
for(var fn in jasmine.HtmlReporterHelpers) {
ctor.prototype[fn] = jasmine.HtmlReporterHelpers[fn];
}
};
jasmine.HtmlReporter = function(_doc) {
var self = this;
var doc = _doc || window.document;
var reporterView;
var dom = {};
// Jasmine Reporter Public Interface
self.logRunningSpecs = false;
self.reportRunnerStarting = function(runner) {
var specs = runner.specs() || [];
if (specs.length == 0) {
return;
}
createReporterDom(runner.env.versionString());
doc.body.appendChild(dom.reporter);
setExceptionHandling();
reporterView = new jasmine.HtmlReporter.ReporterView(dom);
reporterView.addSpecs(specs, self.specFilter);
};
self.reportRunnerResults = function(runner) {
reporterView && reporterView.complete();
};
self.reportSuiteResults = function(suite) {
reporterView.suiteComplete(suite);
};
self.reportSpecStarting = function(spec) {
if (self.logRunningSpecs) {
self.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
}
};
self.reportSpecResults = function(spec) {
reporterView.specComplete(spec);
};
self.log = function() {
var console = jasmine.getGlobal().console;
if (console && console.log) {
if (console.log.apply) {
console.log.apply(console, arguments);
} else {
console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
}
}
};
self.specFilter = function(spec) {
if (!focusedSpecName()) {
return true;
}
return spec.getFullName().indexOf(focusedSpecName()) === 0;
};
return self;
function focusedSpecName() {
var specName;
(function memoizeFocusedSpec() {
if (specName) {
return;
}
var paramMap = [];
var params = jasmine.HtmlReporter.parameters(doc);
for (var i = 0; i < params.length; i++) {
var p = params[i].split('=');
paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
}
specName = paramMap.spec;
})();
return specName;
}
function createReporterDom(version) {
dom.reporter = self.createDom('div', { id: 'HTMLReporter', className: 'jasmine_reporter' },
dom.banner = self.createDom('div', { className: 'banner' },
self.createDom('span', { className: 'title' }, "Jasmine "),
self.createDom('span', { className: 'version' }, version)),
dom.symbolSummary = self.createDom('ul', {className: 'symbolSummary'}),
dom.alert = self.createDom('div', {className: 'alert'},
self.createDom('span', { className: 'exceptions' },
self.createDom('label', { className: 'label', 'for': 'no_try_catch' }, 'No try/catch'),
self.createDom('input', { id: 'no_try_catch', type: 'checkbox' }))),
dom.results = self.createDom('div', {className: 'results'},
dom.summary = self.createDom('div', { className: 'summary' }),
dom.details = self.createDom('div', { id: 'details' }))
);
}
function noTryCatch() {
return window.location.search.match(/catch=false/);
}
function searchWithCatch() {
var params = jasmine.HtmlReporter.parameters(window.document);
var removed = false;
var i = 0;
while (!removed && i < params.length) {
if (params[i].match(/catch=/)) {
params.splice(i, 1);
removed = true;
}
i++;
}
if (jasmine.CATCH_EXCEPTIONS) {
params.push("catch=false");
}
return params.join("&");
}
function setExceptionHandling() {
var chxCatch = document.getElementById('no_try_catch');
if (noTryCatch()) {
chxCatch.setAttribute('checked', true);
jasmine.CATCH_EXCEPTIONS = false;
}
chxCatch.onclick = function() {
window.location.search = searchWithCatch();
};
}
};
jasmine.HtmlReporter.parameters = function(doc) {
var paramStr = doc.location.search.substring(1);
var params = [];
if (paramStr.length > 0) {
params = paramStr.split('&');
}
return params;
}
jasmine.HtmlReporter.sectionLink = function(sectionName) {
var link = '?';
var params = [];
if (sectionName) {
params.push('spec=' + encodeURIComponent(sectionName));
}
if (!jasmine.CATCH_EXCEPTIONS) {
params.push("catch=false");
}
if (params.length > 0) {
link += params.join("&");
}
return link;
};
jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter);
jasmine.HtmlReporter.ReporterView = function(dom) {
this.startedAt = new Date();
this.runningSpecCount = 0;
this.completeSpecCount = 0;
this.passedCount = 0;
this.failedCount = 0;
this.skippedCount = 0;
this.createResultsMenu = function() {
this.resultsMenu = this.createDom('span', {className: 'resultsMenu bar'},
this.summaryMenuItem = this.createDom('a', {className: 'summaryMenuItem', href: "#"}, '0 specs'),
' | ',
this.detailsMenuItem = this.createDom('a', {className: 'detailsMenuItem', href: "#"}, '0 failing'));
this.summaryMenuItem.onclick = function() {
dom.reporter.className = dom.reporter.className.replace(/ showDetails/g, '');
};
this.detailsMenuItem.onclick = function() {
showDetails();
};
};
this.addSpecs = function(specs, specFilter) {
this.totalSpecCount = specs.length;
this.views = {
specs: {},
suites: {}
};
for (var i = 0; i < specs.length; i++) {
var spec = specs[i];
this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom, this.views);
if (specFilter(spec)) {
this.runningSpecCount++;
}
}
};
this.specComplete = function(spec) {
this.completeSpecCount++;
if (isUndefined(this.views.specs[spec.id])) {
this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom);
}
var specView = this.views.specs[spec.id];
switch (specView.status()) {
case 'passed':
this.passedCount++;
break;
case 'failed':
this.failedCount++;
break;
case 'skipped':
this.skippedCount++;
break;
}
specView.refresh();
this.refresh();
};
this.suiteComplete = function(suite) {
var suiteView = this.views.suites[suite.id];
if (isUndefined(suiteView)) {
return;
}
suiteView.refresh();
};
this.refresh = function() {
if (isUndefined(this.resultsMenu)) {
this.createResultsMenu();
}
// currently running UI
if (isUndefined(this.runningAlert)) {
this.runningAlert = this.createDom('a', { href: jasmine.HtmlReporter.sectionLink(), className: "runningAlert bar" });
dom.alert.appendChild(this.runningAlert);
}
this.runningAlert.innerHTML = "Running " + this.completeSpecCount + " of " + specPluralizedFor(this.totalSpecCount);
// skipped specs UI
if (isUndefined(this.skippedAlert)) {
this.skippedAlert = this.createDom('a', { href: jasmine.HtmlReporter.sectionLink(), className: "skippedAlert bar" });
}
this.skippedAlert.innerHTML = "Skipping " + this.skippedCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all";
if (this.skippedCount === 1 && isDefined(dom.alert)) {
dom.alert.appendChild(this.skippedAlert);
}
// passing specs UI
if (isUndefined(this.passedAlert)) {
this.passedAlert = this.createDom('span', { href: jasmine.HtmlReporter.sectionLink(), className: "passingAlert bar" });
}
this.passedAlert.innerHTML = "Passing " + specPluralizedFor(this.passedCount);
// failing specs UI
if (isUndefined(this.failedAlert)) {
this.failedAlert = this.createDom('span', {href: "?", className: "failingAlert bar"});
}
this.failedAlert.innerHTML = "Failing " + specPluralizedFor(this.failedCount);
if (this.failedCount === 1 && isDefined(dom.alert)) {
dom.alert.appendChild(this.failedAlert);
dom.alert.appendChild(this.resultsMenu);
}
// summary info
this.summaryMenuItem.innerHTML = "" + specPluralizedFor(this.runningSpecCount);
this.detailsMenuItem.innerHTML = "" + this.failedCount + " failing";
};
this.complete = function() {
dom.alert.removeChild(this.runningAlert);
this.skippedAlert.innerHTML = "Ran " + this.runningSpecCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all";
if (this.failedCount === 0) {
dom.alert.appendChild(this.createDom('span', {className: 'passingAlert bar'}, "Passing " + specPluralizedFor(this.passedCount)));
} else {
showDetails();
}
dom.banner.appendChild(this.createDom('span', {className: 'duration'}, "finished in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s"));
};
return this;
function showDetails() {
if (dom.reporter.className.search(/showDetails/) === -1) {
dom.reporter.className += " showDetails";
}
}
function isUndefined(obj) {
return typeof obj === 'undefined';
}
function isDefined(obj) {
return !isUndefined(obj);
}
function specPluralizedFor(count) {
var str = count + " spec";
if (count > 1) {
str += "s"
}
return str;
}
};
jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.ReporterView);
jasmine.HtmlReporter.SpecView = function(spec, dom, views) {
this.spec = spec;
this.dom = dom;
this.views = views;
this.symbol = this.createDom('li', { className: 'pending' });
this.dom.symbolSummary.appendChild(this.symbol);
this.summary = this.createDom('div', { className: 'specSummary' },
this.createDom('a', {
className: 'description',
href: jasmine.HtmlReporter.sectionLink(this.spec.getFullName()),
title: this.spec.getFullName()
}, this.spec.description)
);
this.detail = this.createDom('div', { className: 'specDetail' },
this.createDom('a', {
className: 'description',
href: '?spec=' + encodeURIComponent(this.spec.getFullName()),
title: this.spec.getFullName()
}, this.spec.getFullName())
);
};
jasmine.HtmlReporter.SpecView.prototype.status = function() {
return this.getSpecStatus(this.spec);
};
jasmine.HtmlReporter.SpecView.prototype.refresh = function() {
this.symbol.className = this.status();
switch (this.status()) {
case 'skipped':
break;
case 'passed':
this.appendSummaryToSuiteDiv();
break;
case 'failed':
this.appendSummaryToSuiteDiv();
this.appendFailureDetail();
break;
}
};
jasmine.HtmlReporter.SpecView.prototype.appendSummaryToSuiteDiv = function() {
this.summary.className += ' ' + this.status();
this.appendToSummary(this.spec, this.summary);
};
jasmine.HtmlReporter.SpecView.prototype.appendFailureDetail = function() {
this.detail.className += ' ' + this.status();
var resultItems = this.spec.results().getItems();
var messagesDiv = this.createDom('div', { className: 'messages' });
for (var i = 0; i < resultItems.length; i++) {
var result = resultItems[i];
if (result.type == 'log') {
messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
} else if (result.type == 'expect' && result.passed && !result.passed()) {
messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
if (result.trace.stack) {
messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
}
}
}
if (messagesDiv.childNodes.length > 0) {
this.detail.appendChild(messagesDiv);
this.dom.details.appendChild(this.detail);
}
};
jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SpecView);jasmine.HtmlReporter.SuiteView = function(suite, dom, views) {
this.suite = suite;
this.dom = dom;
this.views = views;
this.element = this.createDom('div', { className: 'suite' },
this.createDom('a', { className: 'description', href: jasmine.HtmlReporter.sectionLink(this.suite.getFullName()) }, this.suite.description)
);
this.appendToSummary(this.suite, this.element);
};
jasmine.HtmlReporter.SuiteView.prototype.status = function() {
return this.getSpecStatus(this.suite);
};
jasmine.HtmlReporter.SuiteView.prototype.refresh = function() {
this.element.className += " " + this.status();
};
jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SuiteView);
/* @deprecated Use jasmine.HtmlReporter instead
*/
jasmine.TrivialReporter = function(doc) {
this.document = doc || document;
this.suiteDivs = {};
this.logRunningSpecs = false;
};
jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) {
var el = document.createElement(type);
for (var i = 2; i < arguments.length; i++) {
var child = arguments[i];
if (typeof child === 'string') {
el.appendChild(document.createTextNode(child));
} else {
if (child) { el.appendChild(child); }
}
}
for (var attr in attrs) {
if (attr == "className") {
el[attr] = attrs[attr];
} else {
el.setAttribute(attr, attrs[attr]);
}
}
return el;
};
jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) {
var showPassed, showSkipped;
this.outerDiv = this.createDom('div', { id: 'TrivialReporter', className: 'jasmine_reporter' },
this.createDom('div', { className: 'banner' },
this.createDom('div', { className: 'logo' },
this.createDom('span', { className: 'title' }, "Jasmine"),
this.createDom('span', { className: 'version' }, runner.env.versionString())),
this.createDom('div', { className: 'options' },
"Show ",
showPassed = this.createDom('input', { id: "__jasmine_TrivialReporter_showPassed__", type: 'checkbox' }),
this.createDom('label', { "for": "__jasmine_TrivialReporter_showPassed__" }, " passed "),
showSkipped = this.createDom('input', { id: "__jasmine_TrivialReporter_showSkipped__", type: 'checkbox' }),
this.createDom('label', { "for": "__jasmine_TrivialReporter_showSkipped__" }, " skipped")
)
),
this.runnerDiv = this.createDom('div', { className: 'runner running' },
this.createDom('a', { className: 'run_spec', href: '?' }, "run all"),
this.runnerMessageSpan = this.createDom('span', {}, "Running..."),
this.finishedAtSpan = this.createDom('span', { className: 'finished-at' }, ""))
);
this.document.body.appendChild(this.outerDiv);
var suites = runner.suites();
for (var i = 0; i < suites.length; i++) {
var suite = suites[i];
var suiteDiv = this.createDom('div', { className: 'suite' },
this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, "run"),
this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, suite.description));
this.suiteDivs[suite.id] = suiteDiv;
var parentDiv = this.outerDiv;
if (suite.parentSuite) {
parentDiv = this.suiteDivs[suite.parentSuite.id];
}
parentDiv.appendChild(suiteDiv);
}
this.startedAt = new Date();
var self = this;
showPassed.onclick = function(evt) {
if (showPassed.checked) {
self.outerDiv.className += ' show-passed';
} else {
self.outerDiv.className = self.outerDiv.className.replace(/ show-passed/, '');
}
};
showSkipped.onclick = function(evt) {
if (showSkipped.checked) {
self.outerDiv.className += ' show-skipped';
} else {
self.outerDiv.className = self.outerDiv.className.replace(/ show-skipped/, '');
}
};
};
jasmine.TrivialReporter.prototype.reportRunnerResults = function(runner) {
var results = runner.results();
var className = (results.failedCount > 0) ? "runner failed" : "runner passed";
this.runnerDiv.setAttribute("class", className);
//do it twice for IE
this.runnerDiv.setAttribute("className", className);
var specs = runner.specs();
var specCount = 0;
for (var i = 0; i < specs.length; i++) {
if (this.specFilter(specs[i])) {
specCount++;
}
}
var message = "" + specCount + " spec" + (specCount == 1 ? "" : "s" ) + ", " + results.failedCount + " failure" + ((results.failedCount == 1) ? "" : "s");
message += " in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s";
this.runnerMessageSpan.replaceChild(this.createDom('a', { className: 'description', href: '?'}, message), this.runnerMessageSpan.firstChild);
this.finishedAtSpan.appendChild(document.createTextNode("Finished at " + new Date().toString()));
};
jasmine.TrivialReporter.prototype.reportSuiteResults = function(suite) {
var results = suite.results();
var status = results.passed() ? 'passed' : 'failed';
if (results.totalCount === 0) { // todo: change this to check results.skipped
status = 'skipped';
}
this.suiteDivs[suite.id].className += " " + status;
};
jasmine.TrivialReporter.prototype.reportSpecStarting = function(spec) {
if (this.logRunningSpecs) {
this.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
}
};
jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) {
var results = spec.results();
var status = results.passed() ? 'passed' : 'failed';
if (results.skipped) {
status = 'skipped';
}
var specDiv = this.createDom('div', { className: 'spec ' + status },
this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"),
this.createDom('a', {
className: 'description',
href: '?spec=' + encodeURIComponent(spec.getFullName()),
title: spec.getFullName()
}, spec.description));
var resultItems = results.getItems();
var messagesDiv = this.createDom('div', { className: 'messages' });
for (var i = 0; i < resultItems.length; i++) {
var result = resultItems[i];
if (result.type == 'log') {
messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
} else if (result.type == 'expect' && result.passed && !result.passed()) {
messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
if (result.trace.stack) {
messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
}
}
}
if (messagesDiv.childNodes.length > 0) {
specDiv.appendChild(messagesDiv);
}
this.suiteDivs[spec.suite.id].appendChild(specDiv);
};
jasmine.TrivialReporter.prototype.log = function() {
var console = jasmine.getGlobal().console;
if (console && console.log) {
if (console.log.apply) {
console.log.apply(console, arguments);
} else {
console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
}
}
};
jasmine.TrivialReporter.prototype.getLocation = function() {
return this.document.location;
};
jasmine.TrivialReporter.prototype.specFilter = function(spec) {
var paramMap = {};
var params = this.getLocation().search.substring(1).split('&');
for (var i = 0; i < params.length; i++) {
var p = params[i].split('=');
paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
}
if (!paramMap.spec) {
return true;
}
return spec.getFullName().indexOf(paramMap.spec) === 0;
};

View File

@@ -0,0 +1,82 @@
body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; }
#HTMLReporter { font-size: 11px; font-family: Monaco, "Lucida Console", monospace; line-height: 14px; color: #333333; }
#HTMLReporter a { text-decoration: none; }
#HTMLReporter a:hover { text-decoration: underline; }
#HTMLReporter p, #HTMLReporter h1, #HTMLReporter h2, #HTMLReporter h3, #HTMLReporter h4, #HTMLReporter h5, #HTMLReporter h6 { margin: 0; line-height: 14px; }
#HTMLReporter .banner, #HTMLReporter .symbolSummary, #HTMLReporter .summary, #HTMLReporter .resultMessage, #HTMLReporter .specDetail .description, #HTMLReporter .alert .bar, #HTMLReporter .stackTrace { padding-left: 9px; padding-right: 9px; }
#HTMLReporter #jasmine_content { position: fixed; right: 100%; }
#HTMLReporter .version { color: #aaaaaa; }
#HTMLReporter .banner { margin-top: 14px; }
#HTMLReporter .duration { color: #aaaaaa; float: right; }
#HTMLReporter .symbolSummary { overflow: hidden; *zoom: 1; margin: 14px 0; }
#HTMLReporter .symbolSummary li { display: block; float: left; height: 7px; width: 14px; margin-bottom: 7px; font-size: 16px; }
#HTMLReporter .symbolSummary li.passed { font-size: 14px; }
#HTMLReporter .symbolSummary li.passed:before { color: #5e7d00; content: "\02022"; }
#HTMLReporter .symbolSummary li.failed { line-height: 9px; }
#HTMLReporter .symbolSummary li.failed:before { color: #b03911; content: "x"; font-weight: bold; margin-left: -1px; }
#HTMLReporter .symbolSummary li.skipped { font-size: 14px; }
#HTMLReporter .symbolSummary li.skipped:before { color: #bababa; content: "\02022"; }
#HTMLReporter .symbolSummary li.pending { line-height: 11px; }
#HTMLReporter .symbolSummary li.pending:before { color: #aaaaaa; content: "-"; }
#HTMLReporter .exceptions { color: #fff; float: right; margin-top: 5px; margin-right: 5px; }
#HTMLReporter .bar { line-height: 28px; font-size: 14px; display: block; color: #eee; }
#HTMLReporter .runningAlert { background-color: #666666; }
#HTMLReporter .skippedAlert { background-color: #aaaaaa; }
#HTMLReporter .skippedAlert:first-child { background-color: #333333; }
#HTMLReporter .skippedAlert:hover { text-decoration: none; color: white; text-decoration: underline; }
#HTMLReporter .passingAlert { background-color: #a6b779; }
#HTMLReporter .passingAlert:first-child { background-color: #5e7d00; }
#HTMLReporter .failingAlert { background-color: #cf867e; }
#HTMLReporter .failingAlert:first-child { background-color: #b03911; }
#HTMLReporter .results { margin-top: 14px; }
#HTMLReporter #details { display: none; }
#HTMLReporter .resultsMenu, #HTMLReporter .resultsMenu a { background-color: #fff; color: #333333; }
#HTMLReporter.showDetails .summaryMenuItem { font-weight: normal; text-decoration: inherit; }
#HTMLReporter.showDetails .summaryMenuItem:hover { text-decoration: underline; }
#HTMLReporter.showDetails .detailsMenuItem { font-weight: bold; text-decoration: underline; }
#HTMLReporter.showDetails .summary { display: none; }
#HTMLReporter.showDetails #details { display: block; }
#HTMLReporter .summaryMenuItem { font-weight: bold; text-decoration: underline; }
#HTMLReporter .summary { margin-top: 14px; }
#HTMLReporter .summary .suite .suite, #HTMLReporter .summary .specSummary { margin-left: 14px; }
#HTMLReporter .summary .specSummary.passed a { color: #5e7d00; }
#HTMLReporter .summary .specSummary.failed a { color: #b03911; }
#HTMLReporter .description + .suite { margin-top: 0; }
#HTMLReporter .suite { margin-top: 14px; }
#HTMLReporter .suite a { color: #333333; }
#HTMLReporter #details .specDetail { margin-bottom: 28px; }
#HTMLReporter #details .specDetail .description { display: block; color: white; background-color: #b03911; }
#HTMLReporter .resultMessage { padding-top: 14px; color: #333333; }
#HTMLReporter .resultMessage span.result { display: block; }
#HTMLReporter .stackTrace { margin: 5px 0 0 0; max-height: 224px; overflow: auto; line-height: 18px; color: #666666; border: 1px solid #ddd; background: white; white-space: pre; }
#TrivialReporter { padding: 8px 13px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; background-color: white; font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; /*.resultMessage {*/ /*white-space: pre;*/ /*}*/ }
#TrivialReporter a:visited, #TrivialReporter a { color: #303; }
#TrivialReporter a:hover, #TrivialReporter a:active { color: blue; }
#TrivialReporter .run_spec { float: right; padding-right: 5px; font-size: .8em; text-decoration: none; }
#TrivialReporter .banner { color: #303; background-color: #fef; padding: 5px; }
#TrivialReporter .logo { float: left; font-size: 1.1em; padding-left: 5px; }
#TrivialReporter .logo .version { font-size: .6em; padding-left: 1em; }
#TrivialReporter .runner.running { background-color: yellow; }
#TrivialReporter .options { text-align: right; font-size: .8em; }
#TrivialReporter .suite { border: 1px outset gray; margin: 5px 0; padding-left: 1em; }
#TrivialReporter .suite .suite { margin: 5px; }
#TrivialReporter .suite.passed { background-color: #dfd; }
#TrivialReporter .suite.failed { background-color: #fdd; }
#TrivialReporter .spec { margin: 5px; padding-left: 1em; clear: both; }
#TrivialReporter .spec.failed, #TrivialReporter .spec.passed, #TrivialReporter .spec.skipped { padding-bottom: 5px; border: 1px solid gray; }
#TrivialReporter .spec.failed { background-color: #fbb; border-color: red; }
#TrivialReporter .spec.passed { background-color: #bfb; border-color: green; }
#TrivialReporter .spec.skipped { background-color: #bbb; }
#TrivialReporter .messages { border-left: 1px dashed gray; padding-left: 1em; padding-right: 1em; }
#TrivialReporter .passed { background-color: #cfc; display: none; }
#TrivialReporter .failed { background-color: #fbb; }
#TrivialReporter .skipped { color: #777; background-color: #eee; display: none; }
#TrivialReporter .resultMessage span.result { display: block; line-height: 2em; color: black; }
#TrivialReporter .resultMessage .mismatch { color: black; }
#TrivialReporter .stackTrace { white-space: pre; font-size: .8em; margin-left: 10px; max-height: 5em; overflow: auto; border: 1px inset red; padding: 1em; background: #eef; }
#TrivialReporter .finished-at { padding-left: 1em; font-size: .6em; }
#TrivialReporter.show-passed .passed, #TrivialReporter.show-skipped .skipped { display: block; }
#TrivialReporter #jasmine_content { position: fixed; right: 100%; }
#TrivialReporter .runner { border: 1px solid gray; display: block; margin: 5px 0; padding: 2px 0 2px 10px; }

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,274 @@
describe("Creating event listeners", function() {
var map_events, marker, line, polygon, callbacks_native, callbacks_gmaps;
var added_marker, added_line, added_polygon;
var marker_added_event, marker_removed_event,
polyline_added_event, polyline_removed_event,
polygon_added_event, polygon_removed_event;
beforeEach(function() {
map_events = map_events || new GMaps({
el : '#events',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
marker = marker || map_events.addMarker({
lat : -12.0433,
lng : -77.0283,
title : 'New marker'
});
line = line || map_events.drawPolyline({
path : [[-12.0440, -77.0247], [-12.0544, -77.0302], [-12.0551, -77.0303], [-12.0759, -77.0276], [-12.0763, -77.0279], [-12.0768, -77.0289], [-12.0885, -77.0241], [-12.0908, -77.0227]],
strokeColor : '#131540',
strokeOpacity : 0.6,
strokeWeight : 6
});
polygon = polygon || map_events.drawPolygon({
paths : [[-12.0403,-77.0337],[-12.0402,-77.0399],[-12.0500,-77.0244],[-12.0448,-77.0215]],
strokeColor : '#25D359',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#25D359',
fillOpacity : 0.6
});
});
describe("for google.maps events", function() {
beforeEach(function() {
callbacks_native = callbacks_native || {
map : {
onclick : function() {
console.log('callbacks_native.map.onclick');
}
},
marker : {
onclick : function() {
console.log('callbacks_native.marker.onclick');
}
},
line : {
onclick : function() {
console.log('callbacks_native.line.onclick');
}
},
polygon : {
onclick : function() {
console.log('callbacks_native.polygon.onclick');
}
}
};
spyOn(callbacks_native.map, 'onclick').andCallThrough();
spyOn(callbacks_native.marker, 'onclick').andCallThrough();
spyOn(callbacks_native.line, 'onclick').andCallThrough();
spyOn(callbacks_native.polygon, 'onclick').andCallThrough();
});
describe("To a map", function() {
it("should add the listener to the listeners collection", function() {
var click_event = GMaps.on('click', map_events.map, callbacks_native.map.onclick);
expect(map_events.map['__e3_']['click'][click_event['id']]).toBeDefined();
expect(map_events.map['__e3_']['click'][click_event['id']]).toEqual(click_event);
});
});
describe("To a marker", function() {
it("should add the listener to the listeners collection", function() {
var click_event = GMaps.on('click', marker, callbacks_native.marker.onclick);
expect(marker['__e3_']['click'][click_event['id']]).toBeDefined();
expect(marker['__e3_']['click'][click_event['id']]).toEqual(click_event);
});
});
describe("To a line", function() {
it("should add the listener to the listeners collection", function() {
var click_event = GMaps.on('click', line, callbacks_native.line.onclick);
expect(line['__e3_']['click'][click_event['id']]).toBeDefined();
expect(line['__e3_']['click'][click_event['id']]).toEqual(click_event);
});
});
describe("To a polygon", function() {
it("should add the listener to the listeners collection", function() {
var click_event = GMaps.on('click', polygon, callbacks_native.polygon.onclick);
expect(polygon['__e3_']['click'][click_event['id']]).toBeDefined();
expect(polygon['__e3_']['click'][click_event['id']]).toEqual(click_event);
});
});
});
describe("for GMaps events", function() {
beforeEach(function() {
callbacks_gmaps = {
marker_added : function() {
console.log('callbacks_gmaps.marker_added called');
},
marker_removed : function() {
console.log('callbacks_gmaps.marker_removed called');
},
polyline_added : function() {
console.log('callbacks_gmaps.polyline_added called');
},
polyline_removed : function() {
console.log('callbacks_gmaps.polyline_removed called');
},
polygon_added : function() {
console.log('callbacks_gmaps.polygon_added called');
},
polygon_removed : function() {
console.log('callbacks_gmaps.polygon_removed called');
}
};
spyOn(callbacks_gmaps, 'marker_added').andCallThrough();
spyOn(callbacks_gmaps, 'marker_removed').andCallThrough();
spyOn(callbacks_gmaps, 'polyline_added').andCallThrough();
spyOn(callbacks_gmaps, 'polyline_removed').andCallThrough();
spyOn(callbacks_gmaps, 'polygon_added').andCallThrough();
spyOn(callbacks_gmaps, 'polygon_removed').andCallThrough();
});
describe("#marker_added", function() {
beforeEach(function() {
marker_added_event = GMaps.on('marker_added', map_events, callbacks_gmaps.marker_added);
});
it("should add the listener to the listeners collection", function() {
expect(map_events.registered_events['marker_added'][0]).toEqual(marker_added_event);
});
it("should trigger the listener created", function() {
added_marker = added_marker || map_events.addMarker({
lat : -12.0433,
lng : -77.0273,
title : 'New marker'
});
expect(callbacks_gmaps.marker_added).toHaveBeenCalled();
});
afterEach(function() {
GMaps.off('marker_added', map_events);
});
});
describe("#marker_removed", function() {
beforeEach(function() {
marker_removed_event = GMaps.on('marker_removed', map_events, callbacks_gmaps.marker_removed);
});
it("should add the listener to the listeners collection", function() {
expect(map_events.registered_events['marker_removed'][0]).toEqual(marker_removed_event);
});
it("should trigger the listener created", function() {
map_events.removeMarker(added_marker);
expect(callbacks_gmaps.marker_removed).toHaveBeenCalled();
});
afterEach(function() {
GMaps.off('marker_removed', map_events);
});
});
describe("#polyline_added", function() {
beforeEach(function() {
polyline_added_event = GMaps.on('polyline_added', map_events, callbacks_gmaps.polyline_added);
});
it("should add the listener to the listeners collection", function() {
expect(map_events.registered_events['polyline_added'][0]).toEqual(polyline_added_event);
});
it("should trigger the listener created", function() {
added_line = added_line || map_events.drawPolyline({
path : [[-12.0420, -77.0247], [-12.0544, -77.0102], [-12.0751, -77.0903], [-12.0759, -77.0276], [-12.0763, -77.0279], [-12.0768, -77.0289], [-12.0885, -77.0241], [-12.0908, -77.0227]],
strokeColor : '#271804',
strokeOpacity : 0.1,
strokeWeight : 1
});
expect(callbacks_gmaps.polyline_added).toHaveBeenCalled();
});
afterEach(function() {
GMaps.off('polyline_added', map_events);
});
});
describe("#polyline_removed", function() {
beforeEach(function() {
polyline_removed_event = GMaps.on('polyline_removed', map_events, callbacks_gmaps.polyline_removed);
});
it("should add the listener to the listeners collection", function() {
expect(map_events.registered_events['polyline_removed'][0]).toEqual(polyline_removed_event);
});
it("should trigger the listener created", function() {
map_events.removePolyline(added_line);
expect(callbacks_gmaps.polyline_removed).toHaveBeenCalled();
});
afterEach(function() {
GMaps.off('polyline_removed', map_events);
});
});
describe("#polygon_added", function() {
beforeEach(function() {
polygon_added_event = GMaps.on('polygon_added', map_events, callbacks_gmaps.polygon_added);
});
it("should add the listener to the listeners collection", function() {
expect(map_events.registered_events['polygon_added'][0]).toEqual(polygon_added_event);
});
it("should trigger the listener created", function() {
added_polygon = added_polygon || map_events.drawPolygon({
paths : [[-12.0203,-77.0137],[-12.0402,-77.0109],[-12.0500,-77.0144],[-12.0848,-77.0115]],
strokeColor : '#D32559',
strokeOpacity : 0.7,
strokeWeight : 8,
fillColor : '#D32559',
fillOpacity : 0.6
});
expect(callbacks_gmaps.polygon_added).toHaveBeenCalled();
});
afterEach(function() {
GMaps.off('polygon_added', map_events);
});
});
describe("#polygon_removed", function() {
beforeEach(function() {
polygon_removed_event = GMaps.on('polygon_removed', map_events, callbacks_gmaps.polygon_removed);
});
it("should add the listener to the listeners collection", function() {
expect(map_events.registered_events['polygon_removed'][0]).toEqual(polygon_removed_event);
});
it("should trigger the listener created", function() {
map_events.removePolygon(added_polygon);
expect(callbacks_gmaps.polygon_removed).toHaveBeenCalled();
});
afterEach(function() {
GMaps.off('polygon_removed', map_events);
});
});
});
});

View File

@@ -0,0 +1,225 @@
describe("Drawing geometry overlays", function() {
var map_with_polygons, line, rectangle, circle, polygon;
beforeEach(function() {
map_with_polygons = map_with_polygons || new GMaps({
el : '#map-with-polygons',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
});
describe("A line", function() {
beforeEach(function() {
line = line || map_with_polygons.drawPolyline({
path : [[-12.0440, -77.0247], [-12.0544, -77.0302], [-12.0551, -77.0303], [-12.0759, -77.0276], [-12.0763, -77.0279], [-12.0768, -77.0289], [-12.0885, -77.0241], [-12.0908, -77.0227]],
strokeColor : '#131540',
strokeOpacity : 0.6,
strokeWeight : 6
});
});
it("should add the line to the polylines collection", function() {
expect(map_with_polygons.polylines.length).toEqual(1);
expect(map_with_polygons.polylines[0]).toEqual(line);
});
it("should be added in the current map", function() {
expect(line.getMap()).toEqual(map_with_polygons.map);
});
it("should return the defined path", function() {
var first_point = line.getPath().getAt(0);
expect(parseFloat(first_point.lat().toFixed(4))).toEqual(-12.0440);
expect(parseFloat(first_point.lng().toFixed(4))).toEqual(-77.0247);
});
});
describe("A rectangle", function() {
beforeEach(function() {
rectangle = rectangle || map_with_polygons.drawRectangle({
bounds : [[-12.0303,-77.0237],[-12.0348,-77.0115]],
strokeColor : '#BBD8E9',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#BBD8E9',
fillOpacity : 0.6
});
});
it("should add the rectangle to the polygons collection", function() {
expect(map_with_polygons.polygons.length).toEqual(1);
expect(map_with_polygons.polygons[0]).toEqual(rectangle);
});
it("should be added in the current map", function() {
expect(rectangle.getMap()).toEqual(map_with_polygons.map);
});
it("should have the defined bounds", function() {
// Fix for floating-point bug
var SWLat = parseFloat(rectangle.getBounds().getSouthWest().lat().toFixed(4));
var SWLng = parseFloat(rectangle.getBounds().getSouthWest().lng().toFixed(4));
var NELat = parseFloat(rectangle.getBounds().getNorthEast().lat().toFixed(4));
var NELng = parseFloat(rectangle.getBounds().getNorthEast().lng().toFixed(4));
expect(SWLat).toEqual(-12.0303);
expect(SWLng).toEqual(-77.0237);
expect(NELat).toEqual(-12.0348);
expect(NELng).toEqual(-77.0115);
});
});
describe("A polygon", function() {
beforeEach(function() {
polygon = polygon || map_with_polygons.drawPolygon({
paths : [[-12.0403,-77.0337],[-12.0402,-77.0399],[-12.0500,-77.0244],[-12.0448,-77.0215]],
strokeColor : '#25D359',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#25D359',
fillOpacity : 0.6
});
});
it("should add the polygon to the polygons collection", function() {
expect(map_with_polygons.polygons.length).toEqual(2);
expect(map_with_polygons.polygons[1]).toEqual(polygon);
});
it("should be added in the current map", function() {
expect(polygon.getMap()).toEqual(map_with_polygons.map);
});
it("should return the defined path", function() {
var first_point = polygon.getPath().getAt(0);
expect(parseFloat(first_point.lat().toFixed(4))).toEqual(-12.0403);
expect(parseFloat(first_point.lng().toFixed(4))).toEqual(-77.0337);
});
});
describe("A circle", function() {
beforeEach(function() {
circle = circle || map_with_polygons.drawCircle({
lat : -12.040504866577001,
lng : -77.02024422636042,
radius : 350,
strokeColor : '#432070',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#432070',
fillOpacity : 0.6
});
});
it("should add the circle to the polygons collection", function() {
expect(map_with_polygons.polygons.length).toEqual(3);
expect(map_with_polygons.polygons[2]).toEqual(circle);
});
it("should be added in the current map", function() {
expect(circle.getMap()).toEqual(map_with_polygons.map);
});
it("should have the defined radius", function() {
expect(circle.getRadius()).toEqual(350);
});
});
});
describe("Removing geometry overlays", function() {
var map_with_polygons, line, rectangle, circle, polygon;
beforeEach(function() {
map_with_polygons = map_with_polygons || new GMaps({
el : '#map-with-polygons',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
});
describe("A line", function() {
beforeEach(function() {
line = map_with_polygons.drawPolyline({
path : [[-12.0440, -77.0247], [-12.0544, -77.0302], [-12.0551, -77.0303], [-12.0759, -77.0276], [-12.0763, -77.0279], [-12.0768, -77.0289], [-12.0885, -77.0241], [-12.0908, -77.0227]],
strokeColor : '#131540',
strokeOpacity : 0.6,
strokeWeight : 6
});
map_with_polygons.removePolyline(line);
});
it("should remove the line from the polylines collection", function() {
expect(map_with_polygons.polylines.length).toEqual(0);
expect(line.getMap()).toBeNull();
});
});
describe("A rectangle", function() {
beforeEach(function() {
rectangle = map_with_polygons.drawRectangle({
bounds : [[-12.0303,-77.0237],[-12.0348,-77.0115]],
strokeColor : '#BBD8E9',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#BBD8E9',
fillOpacity : 0.6
});
map_with_polygons.removePolygon(rectangle);
});
it("should remove the rectangle from the polygons collection", function() {
expect(map_with_polygons.polygons.length).toEqual(0);
expect(rectangle.getMap()).toBeNull();
});
});
describe("A polygon", function() {
beforeEach(function() {
polygon = map_with_polygons.drawPolygon({
paths : [[-12.0403,-77.0337],[-12.0402,-77.0399],[-12.0500,-77.0244],[-12.0448,-77.0215]],
strokeColor : '#25D359',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#25D359',
fillOpacity : 0.6
});
map_with_polygons.removePolygon(polygon);
});
it("should remove the polygon from the polygons collection", function() {
expect(map_with_polygons.polygons.length).toEqual(0);
expect(polygon.getMap()).toBeNull();
});
});
describe("A circle", function() {
beforeEach(function() {
circle = map_with_polygons.drawCircle({
lat : -12.040504866577001,
lng : -77.02024422636042,
radius : 350,
strokeColor : '#432070',
strokeOpacity : 1,
strokeWeight : 3,
fillColor : '#432070',
fillOpacity : 0.6
});
map_with_polygons.removePolygon(circle);
});
it("should remove the circle from the polygons collection", function() {
expect(map_with_polygons.polygons.length).toEqual(0);
expect(circle.getMap()).toBeNull();
});
});
});

View File

@@ -0,0 +1,50 @@
describe("Adding layers", function() {
var map_with_layers, single_layer, multiple_layers = [];
beforeEach(function() {
map_with_layers = map_with_layers || new GMaps({
el : '#map-with-layers',
lat: -12.0433,
lng: -77.0283,
zoom: 12
});
});
describe("Single layer", function() {
beforeEach(function() {
single_layer = single_layer || map_with_layers.addLayer('traffic');
})
it("should be added in the current map", function() {
expect(single_layer.getMap()).toEqual(map_with_layers.map);
});
it("should be removed from the current map", function() {
map_with_layers.removeLayer('traffic');
expect(single_layer.getMap()).toBeNull();
});
});
describe("Multiple layers", function() {
beforeEach(function() {
if (multiple_layers.length == 0) {
multiple_layers.push(map_with_layers.addLayer('transit'));
multiple_layers.push(map_with_layers.addLayer('bicycling'));
}
});
it("should be added in the current map", function() {
expect(multiple_layers[0].getMap()).toEqual(map_with_layers.map);
expect(multiple_layers[1].getMap()).toEqual(map_with_layers.map);
});
it("should be removed from the current map", function() {
map_with_layers.removeLayer('transit');
map_with_layers.removeLayer('bicycling');
expect(multiple_layers[0].getMap()).toBeNull();
expect(multiple_layers[1].getMap()).toBeNull();
});
});
});

View File

@@ -0,0 +1,178 @@
describe("Creating a map", function() {
var basic_map, advanced_map, map_with_events, map_with_custom_controls;
it("should throw an error if element is not defined", function() {
expect(function() { new GMaps({}); }).toThrow(new Error('No element defined.'));
});
describe("With basic options", function() {
beforeEach(function() {
basic_map = basic_map || new GMaps({
el : '#basic-map',
lat: -12.0433,
lng: -77.0283,
zoom: 12
});
});
it("should create a GMaps object", function() {
expect(basic_map).toBeDefined();
});
it("should have centered the map at the initial coordinates", function() {
var lat = basic_map.getCenter().lat();
var lng = basic_map.getCenter().lng();
expect(lat).toEqual(-12.0433);
expect(lng).toEqual(-77.0283);
});
it("should have the correct zoom", function() {
expect(basic_map.getZoom()).toEqual(12);
});
});
describe("With advanced controls", function() {
beforeEach(function() {
advanced_map = advanced_map || new GMaps({
el : '#advanced-map',
lat: -12.0433,
lng: -77.0283,
zoomControl : true,
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
});
it("should show the defined controls", function() {
expect(advanced_map.map.zoomControl).toBeTruthy();
expect(advanced_map.map.panControl).toBeFalsy();
expect(advanced_map.map.streetViewControl).toBeFalsy();
expect(advanced_map.map.mapTypeControl).toBeFalsy();
expect(advanced_map.map.overviewMapControl).toBeFalsy();
});
});
describe("With events", function() {
var callbacks, current_zoom = 0, current_center = null;
beforeEach(function() {
callbacks = {
onclick : function(e) {
var lat = e.latLng.lat();
var lng = e.latLng.lng();
map_with_events.addMarker({
lat : lat,
lng : lng,
title : 'New Marker'
});
},
onzoomchanged : function() {
console.log('onzoomchanged');
current_zoom = this.getZoom();
},
oncenterchanged : function() {
console.log('oncenterchanged');
current_center = this.getCenter();
}
};
spyOn(callbacks, 'onclick').andCallThrough();
spyOn(callbacks, 'onzoomchanged').andCallThrough();
spyOn(callbacks, 'oncenterchanged').andCallThrough();
map_with_events = map_with_events || new GMaps({
el : '#map-with-events',
lat : -12.0433,
lng : -77.0283,
click : callbacks.onclick,
zoom_changed : callbacks.onzoomchanged,
center_changed : callbacks.oncenterchanged
});
});
it("should respond to zoom_changed event", function() {
map_with_events.map.setZoom(16);
expect(callbacks.onzoomchanged).toHaveBeenCalled();
expect(current_zoom).toEqual(16);
});
it("should respond to center_changed event", function() {
map_with_events.map.setCenter(new google.maps.LatLng(-12.0907, -77.0227));
// Fix for floating-point bug
var lat = parseFloat(current_center.lat().toFixed(4));
var lng = parseFloat(current_center.lng().toFixed(4));
expect(callbacks.oncenterchanged).toHaveBeenCalled();
expect(lat).toEqual(-12.0907);
expect(lng).toEqual(-77.0227);
});
it("should respond to click event", function() {
google.maps.event.trigger(map_with_events.map, 'click', {
latLng : new google.maps.LatLng(-12.0433, -77.0283)
});
expect(callbacks.onclick).toHaveBeenCalled();
expect(map_with_events.markers.length).toEqual(1);
});
afterEach(function() {
document.getElementById('map-with-events').innerHTML = '';
map_with_events = null;
});
});
describe("With custom controls", function() {
var callbacks, markers_in_map = 0;
beforeEach(function() {
callbacks = {
onclick : function() {
map_with_custom_controls.addMarker({
lat : map_with_custom_controls.getCenter().lat(),
lng : map_with_custom_controls.getCenter().lng()
});
}
}
spyOn(callbacks, 'onclick').andCallThrough();
map_with_custom_controls = new GMaps({
el : '#map-with-custom-controls',
lat : -12.0433,
lng : -77.0283
});
map_with_custom_controls.addControl({
position : 'top_right',
content : 'Add marker at the center',
style : {
margin: '5px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#fff'
},
events : {
click: callbacks.onclick
}
});
});
it("should add the control to the controls collection", function() {
expect(map_with_custom_controls.controls.length).toEqual(1);
});
it("should respond to click event attached to the custom control", function() {
google.maps.event.trigger(map_with_custom_controls.controls[0], 'click');
expect(callbacks.onclick).toHaveBeenCalled();
expect(map_with_custom_controls.markers.length).toEqual(1);
});
});
});

View File

@@ -0,0 +1,60 @@
describe("Creating a marker", function() {
var map, marker;
beforeEach(function() {
map = map || new GMaps({
el : '#map-with-markers',
lat : -12.0533,
lng: -77.0293,
zoom: 14
});
});
describe("With basic options", function() {
beforeEach(function() {
marker = map.addMarker({
lat : -12.0533,
lng: -77.0293,
title : 'New marker'
});
});
it("should add the marker to the markers collection", function() {
expect(map.markers.length).toEqual(1);
expect(map.markers[0]).toEqual(marker);
});
it("should create a marker with defined position", function() {
// Fix for floating-point bug
expect(parseFloat(marker.getPosition().lat().toFixed(4))).toEqual(-12.0533);
expect(parseFloat(marker.getPosition().lng().toFixed(4))).toEqual(-77.0293);
});
});
describe("With events", function() {
var callbacks;
beforeEach(function() {
callbacks = {
onclick : function() {
console.log(this.title);
}
};
spyOn(callbacks, 'onclick').andCallThrough();
marker = map.addMarker({
lat : -12.0533,
lng: -77.0193,
title : 'New marker',
click : callbacks.onclick
});
});
it("should respond to click event", function() {
google.maps.event.trigger(marker, 'click');
expect(callbacks.onclick).toHaveBeenCalled();
});
});
});

View File

@@ -0,0 +1,30 @@
describe("Drawing HTML overlays", function() {
var map_with_overlays, overlay;
beforeEach(function() {
map_with_overlays = map_with_overlays || new GMaps({
el : '#map-with-overlays',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
overlay = overlay || map_with_overlays.drawOverlay({
lat: map_with_overlays.getCenter().lat(),
lng: map_with_overlays.getCenter().lng(),
layer: 'overlayLayer',
content: '<div class="overlay">Lima</div>',
verticalAlign: 'top',
horizontalAlign: 'center'
});
});
it("should add the overlay to the overlays collection", function() {
expect(map_with_overlays.overlays.length).toEqual(1);
expect(map_with_overlays.overlays[0]).toEqual(overlay);
});
it("should add the overlay in the current map", function() {
expect(overlay.getMap()).toEqual(map_with_overlays.map);
});
});

View File

@@ -0,0 +1,86 @@
var map_with_routes, route, routes;
describe("Drawing a route", function() {
beforeEach(function() {
map_with_routes = map_with_routes || new GMaps({
el : '#map-with-routes',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
});
it("should add a line in the current map", function() {
var route_flag;
runs(function() {
route_flag = false;
map_with_routes.drawRoute({
origin : [-12.044012922866312, -77.02470665341184],
destination : [-12.090814532191756, -77.02271108990476],
travelMode : 'driving',
strokeColor : '#131540',
strokeOpacity : 0.6,
strokeWeight : 6,
callback : function() {
route_flag = true;
}
});
});
waitsFor(function() {
return route_flag;
}, "The drawn route should create a line in the current map", 500);
runs(function() {
expect(map_with_routes.polylines.length).toEqual(1);
expect(map_with_routes.polylines[0].get('strokeColor')).toEqual('#131540');
expect(map_with_routes.polylines[0].get('strokeOpacity')).toEqual(0.6);
expect(map_with_routes.polylines[0].getMap()).toEqual(map_with_routes.map);
});
});
});
describe("Getting routes", function() {
beforeEach(function() {
map_with_routes = map_with_routes || new GMaps({
el : '#map-with-routes',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
});
it("should return an array of routes", function() {
var routes_flag;
runs(function() {
routes_flag = false;
map_with_routes.getRoutes({
origin : [-12.0440, -77.0247],
destination : [-12.0908, -77.0227],
callback : function(r) {
routes = r;
routes_flag = true;
}
});
});
waitsFor(function() {
return routes_flag;
}, "#getRoutes should return the found routes as an argument", 500);
runs(function() {
expect(routes).toBeDefined();
expect(map_with_routes.routes).toEqual(routes);
if (routes.length > 0) {
expect(routes[0].legs[0].distance).toBeDefined();
expect(routes[0].legs[0].duration).toBeDefined();
}
});
});
});

View File

@@ -0,0 +1,84 @@
describe("Create a Street View Panorama", function() {
var map_with_streetview, attached_panorama, standalone_panorama, panorama_with_events;
beforeEach(function() {
map_with_streetview = map_with_streetview || new GMaps({
el : '#map-with-streetview',
lat : 42.3455,
lng : -71.0983,
zoom : 12
});
});
describe("Standalone", function() {
beforeEach(function() {
standalone_panorama = standalone_panorama || GMaps.createPanorama({
el : '#streetview-standalone-panorama',
lat : 42.3455,
lng : -71.0983,
pov : {
heading : 60,
pitch : -10,
zoom : 1
}
});
});
it("should create a Street View panorama", function() {
expect(standalone_panorama).toBeDefined();
});
});
describe("Attached to the current map", function() {
beforeEach(function() {
attached_panorama = attached_panorama || map_with_streetview.createPanorama({
el : '#streetview-panorama',
pov : {
heading : 60,
pitch : -10,
zoom : 1
}
});
});
it("should be equal to the current map Street View panorama", function() {
expect(map_with_streetview.getStreetView()).toEqual(attached_panorama);
});
});
describe("With events", function() {
var callbacks;
beforeEach(function() {
callbacks = {
onpovchanged : function() {
console.log(this);
}
};
spyOn(callbacks, 'onpovchanged').andCallThrough();
panorama_with_events = panorama_with_events || GMaps.createPanorama({
el : '#streetview-with-events',
lat : 42.3455,
lng : -71.0983,
pov : {
heading : 60,
pitch : -10,
zoom : 1
},
pov_changed : callbacks.onpovchanged
});
});
it("should respond to pov_changed event", function() {
panorama_with_events.setPov({
heading : 80,
pitch : -10,
zoom : 1
});
expect(callbacks.onpovchanged).toHaveBeenCalled();
});
});
});

View File

@@ -0,0 +1,43 @@
describe("Adding Map Styles", function() {
var map_with_styles;
beforeEach(function() {
map_with_styles = map_with_styles || new GMaps({
el : '#map-with-styles',
lat : -12.0433,
lng : -77.0283,
zoom : 12
});
map_with_styles.addStyle({
styledMapName : {
name : 'Lighter'
},
mapTypeId : 'lighter',
styles : [
{
elementType : 'geometry',
stylers : [
{ lightness : 50 }
]
},
{
elementType : 'labels',
stylers : [
{ visibility : 'off' }
]
},
]
});
});
it("should add a MapType to the current map", function() {
expect(map_with_styles.map.mapTypes.get('lighter')).toBeDefined();
});
it("should update the styles in the current map", function() {
map_with_styles.setStyle('lighter');
expect(map_with_styles.getMapTypeId()).toEqual('lighter');
});
});

View File

@@ -0,0 +1,30 @@
body {
font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: lighter;
text-transform: lowercase;
font-variant: small-caps;
}
.map,
.panorama {
width: 100%;
height: 100px;
}
.with-columns {
display: block;
width: 100%;
overflow: hidden;
}
.with-columns .map,
.with-columns .panorama {
display: block;
width: 50%;
height: 150px;
float: left;
}

View File

@@ -0,0 +1,49 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner</title>
<% css.forEach(function(style){ %>
<link rel="stylesheet" type="text/css" href="<%= style %>">
<% }) %>
<% with (scripts) { %>
<% [].concat(polyfills, jasmine, vendor, helpers, src, specs, reporters, start).forEach(function(script){ %>
<script src="<%= script %>"></script>
<% }) %>
<% }; %>
</head>
<body>
<h3>Basic map</h3>
<div class="map" id="basic-map"></div>
<h3>Advanced map</h3>
<div class="map" id="advanced-map"></div>
<h3>Map with events</h3>
<div class="map" id="map-with-events"></div>
<h3>Map with markers</h3>
<div class="map" id="map-with-markers"></div>
<h3>Map with custom controls</h3>
<div class="map" id="map-with-custom-controls"></div>
<h3>Map with polygons</h3>
<div class="map" id="map-with-polygons"></div>
<h3>Map with layers</h3>
<div class="map" id="map-with-layers"></div>
<h3>Map with overlays</h3>
<div class="map" id="map-with-overlays"></div>
<h3>Map with routes</h3>
<div class="map" id="map-with-routes"></div>
<h3>Map with styles</h3>
<div class="map" id="map-with-styles"></div>
<h3>Street View Panorama</h3>
<div class="panorama" id="streetview-standalone-panorama"></div>
<h3>Map with Street View</h3>
<div class="with-columns">
<div class="map" id="map-with-streetview"></div>
<div class="panorama" id="streetview-panorama"></div>
</div>
<h3>Street View Panorama with events</h3>
<div class="panorama" id="streetview-with-events"></div>
<h3>Events</h3>
<div class="map" id="events"></div>
</body>
</html>