izu/spota-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend assets and plugin bundles

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/plugins/gmaps/examples/basic.html Normal file
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>

87
assets/plugins/gmaps/examples/context_menu.html Normal file
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>

91
assets/plugins/gmaps/examples/custom_controls.html Normal file
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>

60
assets/plugins/gmaps/examples/elevation_locations.html Normal file
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>

106
assets/plugins/gmaps/examples/elevation_routes.html Normal file
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>

51
assets/plugins/gmaps/examples/examples.css Normal file
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;
}

66
assets/plugins/gmaps/examples/fusion_tables.html Normal file
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>

70
assets/plugins/gmaps/examples/geocoding.html Normal file
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>

76
assets/plugins/gmaps/examples/geofences.html Normal file
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>

69
assets/plugins/gmaps/examples/geolocation.html Normal file
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>

104
assets/plugins/gmaps/examples/geometry.html Normal file
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>

60
assets/plugins/gmaps/examples/kml.html Normal file
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>

54
assets/plugins/gmaps/examples/layers.html Normal file
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>

65
assets/plugins/gmaps/examples/layers_places.html Normal file
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>

53
assets/plugins/gmaps/examples/map_events.html Normal file
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>

62
assets/plugins/gmaps/examples/map_types.html Normal file
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>

61
assets/plugins/gmaps/examples/marker_clusterer.html Normal file
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>

73
assets/plugins/gmaps/examples/markers.html Normal file
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>

76
assets/plugins/gmaps/examples/overlay_map_types.html Normal file
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>

49
assets/plugins/gmaps/examples/overlays.html Normal file
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>

105
assets/plugins/gmaps/examples/polygons.html Normal file
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>

54
assets/plugins/gmaps/examples/polylines.html Normal file
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>

51
assets/plugins/gmaps/examples/routes.html Normal file
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>

68
assets/plugins/gmaps/examples/routes_advanced.html Normal file
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>

43
assets/plugins/gmaps/examples/static.html Normal file
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>

52
assets/plugins/gmaps/examples/static_markers.html Normal file
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>

62
assets/plugins/gmaps/examples/static_polylines.html Normal file
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>

93
assets/plugins/gmaps/examples/styled_maps.html Normal file
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>

84
assets/plugins/gmaps/examples/travel_route.html Normal file
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>