Skip to content

Commit 9a28f36

Browse files
author
Juan Pablo Scaletti
committed
staticMaps
1 parent e6beb01 commit 9a28f36

16 files changed

+1228
-1041
lines changed

‎examples/basic.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Basic</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -27,10 +28,10 @@ <h1>GMaps.js &mdash; Basic</h1>
2728
<div class="span6">
2829
<p>Using GMaps.js is as easy as:</p>
2930
<pre>new GMaps({
30-
div: '#map',
31-
lat: -12.043333,
32-
lng: -77.028333
33-
});</pre>
31+
div: '#map',
32+
lat: -12.043333,
33+
lng: -77.028333
34+
});</pre>
3435
<p>You must define <strong>container ID</strong>, <strong>latitude</strong> and <strong>longitude</strong> of the map's center.</p>
3536
<p><span class="label notice">Note</span>You also can define <strong>zoom</strong>. By default, zoom is 15.</p>
3637
</div>

‎examples/context_menu.html

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Context menu</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -48,25 +49,25 @@ <h1>GMaps.js &mdash; Context menu</h1>
4849
<div class="span6">
4950
<p>You can define a context menu (which will show on right click) with:</p>
5051
<pre>map.setContextMenu({
51-
control: 'map',
52-
options: [{
53-
title: 'Add marker',
54-
name: 'add_marker',
55-
action: function(e){
56-
this.addMarker({
57-
lat: e.latLng.lat(),
58-
lng: e.latLng.lng(),
59-
title: 'New marker'
60-
});
61-
}
62-
}, {
63-
title: 'Center here',
64-
name: 'center_here',
65-
action: function(e){
66-
this.setCenter(e.latLng.lat(), e.latLng.lng());
67-
}
68-
}]
69-
});</pre>
52+
control: 'map',
53+
options: [{
54+
title: 'Add marker',
55+
name: 'add_marker',
56+
action: function(e){
57+
this.addMarker({
58+
lat: e.latLng.lat(),
59+
lng: e.latLng.lng(),
60+
title: 'New marker'
61+
});
62+
}
63+
}, {
64+
title: 'Center here',
65+
name: 'center_here',
66+
action: function(e){
67+
this.setCenter(e.latLng.lat(), e.latLng.lng());
68+
}
69+
}]
70+
});</pre>
7071
<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>
7172
</div>
7273
</div>

‎examples/geocoding.html

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Geocoding</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -50,18 +51,18 @@ <h1>GMaps.js &mdash; Geocoding</h1>
5051
<div class="span6">
5152
<p>You can geocoding this way:</p>
5253
<pre>GMaps.geocode({
53-
address: $('#address').val(),
54-
callback: function(results, status){
55-
if(status=='OK'){
56-
var latlng = results[0].geometry.location;
57-
map.setCenter(latlng.lat(), latlng.lng());
58-
map.addMarker({
59-
lat: latlng.lat(),
60-
lng: latlng.lng()
61-
});
62-
}
63-
}
64-
});</pre>
54+
address: $('#address').val(),
55+
callback: function(results, status){
56+
if(status=='OK'){
57+
var latlng = results[0].geometry.location;
58+
map.setCenter(latlng.lat(), latlng.lng());
59+
map.addMarker({
60+
lat: latlng.lat(),
61+
lng: latlng.lng()
62+
});
63+
}
64+
}
65+
});</pre>
6566
<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>
6667
</div>
6768
</div>

‎examples/geofences.html

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Geofences</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -50,22 +51,22 @@ <h1>GMaps.js &mdash; Geofences</h1>
5051
<div class="span6">
5152
<p>You can attach a geofence (which can be a polygon or a bounds) to a marker with:</p>
5253
<pre>polygon = map.drawPolygon({
53-
paths: path,
54-
strokeColor: '#BBD8E9',
55-
strokeOpacity: 1,
56-
strokeWeight: 3,
57-
fillColor: '#BBD8E9',
58-
fillOpacity: 0.6
59-
});
60-
map.addMarker({
61-
lat: -12.043333,
62-
lng: -77.028333,
63-
draggable: true,
64-
fences: [polygon],
65-
outside: function(marker, fence){
66-
alert('This marker has been moved outside of its fence');
67-
}
68-
});</pre>
54+
paths: path,
55+
strokeColor: '#BBD8E9',
56+
strokeOpacity: 1,
57+
strokeWeight: 3,
58+
fillColor: '#BBD8E9',
59+
fillOpacity: 0.6
60+
});
61+
map.addMarker({
62+
lat: -12.043333,
63+
lng: -77.028333,
64+
draggable: true,
65+
fences: [polygon],
66+
outside: function(marker, fence){
67+
alert('This marker has been moved outside of its fence');
68+
}
69+
});</pre>
6970
<p>You must define an <strong>outside</strong> callback, which will use this <code>marker</code> and its <code>fence</code>.</p>
7071
<p><span class="label notice">Note</span>You also can use <code>checkMarkerGeofence</code> or <code>checkGeofence</code> methods.</p>
7172
</div>

‎examples/geolocation.html

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Geolocation</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -42,19 +43,19 @@ <h1>GMaps.js &mdash; Geolocation</h1>
4243
<div class="span6">
4344
<p>GMaps.js supports HTML5 Geolocation:</p>
4445
<pre>GMaps.geolocate({
45-
success: function(position){
46-
map.setCenter(position.coords.latitude, position.coords.longitude);
47-
},
48-
error: function(error){
49-
alert('Geolocation failed: '+error.message);
50-
},
51-
not_supported: function(){
52-
alert("Your browser does not support geolocation");
53-
},
54-
always: function(){
55-
alert("Done!");
56-
}
57-
});</pre>
46+
success: function(position){
47+
map.setCenter(position.coords.latitude, position.coords.longitude);
48+
},
49+
error: function(error){
50+
alert('Geolocation failed: '+error.message);
51+
},
52+
not_supported: function(){
53+
alert("Your browser does not support geolocation");
54+
},
55+
always: function(){
56+
alert("Done!");
57+
}
58+
});</pre>
5859
<p><code>GMaps.geolocate</code> supports 4 functions:
5960
<ul>
6061
<li><code>success</code> (required): fires when geolocation has been successful</li>

‎examples/map_events.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Map events</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -34,17 +35,17 @@ <h1>GMaps.js &mdash; Map events</h1>
3435
<div class="span6">
3536
<p>GMaps.js allows to define map events very easily:</p>
3637
<pre>map = new GMaps({
37-
div: '#map',
38-
zoom: 16,
39-
lat: -12.043333,
40-
lng: -77.028333,
41-
click: function(e){
42-
alert('click');
43-
},
44-
dragend: function(e){
45-
alert('dragend');
46-
}
47-
});</pre>
38+
div: '#map',
39+
zoom: 16,
40+
lat: -12.043333,
41+
lng: -77.028333,
42+
click: function(e){
43+
alert('click');
44+
},
45+
dragend: function(e){
46+
alert('dragend');
47+
}
48+
});</pre>
4849
<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>
4950
</div>
5051
</div>

‎examples/markers.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Markers</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -49,13 +50,13 @@ <h1>GMaps.js &mdash; Markers</h1>
4950
<div class="span6">
5051
<p>With GMaps.js you can add markers this way:</p>
5152
<pre>map.addMarker({
52-
lat: -12.043333,
53-
lng: -77.028333,
54-
title: 'Lima',
55-
click: function(e){
56-
alert('You clicked in this marker');
57-
}
58-
});</pre>
53+
lat: -12.043333,
54+
lng: -77.028333,
55+
title: 'Lima',
56+
click: function(e){
57+
alert('You clicked in this marker');
58+
}
59+
});</pre>
5960
<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>
6061
<p><span class="label notice">Note</span>If you want to show an Info Window, you must add:</p>
6162
<pre>infoWindow: {

‎examples/overlays.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Overlays</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -35,10 +36,10 @@ <h1>GMaps.js &mdash; Overlays</h1>
3536
<div class="span6">
3637
<p>You can add overlays using:</p>
3738
<pre>map.drawOverlay({
38-
lat: -12.043333,
39-
lng: -77.028333,
40-
content: '&lt;div class="overlay"&gt;Lima&lt;/div&gt;'
41-
});</pre>
39+
lat: -12.043333,
40+
lng: -77.028333,
41+
content: '&lt;div class="overlay"&gt;Lima&lt;/div&gt;'
42+
});</pre>
4243
<p>You must define <strong>latitude</strong>, <strong>longitude</strong> and the <strong>content</strong> of the map overlay.</p>
4344
<p><span class="label notice">Note</span>Also, you must define a <strong>height</strong> to the <strong>content</strong>.</p>
4445
<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>

‎examples/polylines.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Polylines</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -40,12 +41,12 @@ <h1>GMaps.js &mdash; Polylines</h1>
4041
<p>You can add polylines in GMaps.js this way:</p>
4142
<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]];
4243

43-
map.drawPolyline({
44-
path: path,
45-
strokeColor: '#131540',
46-
strokeOpacity: 0.6,
47-
strokeWeight: 6
48-
});</pre>
44+
map.drawPolyline({
45+
path: path,
46+
strokeColor: '#131540',
47+
strokeOpacity: 0.6,
48+
strokeWeight: 6
49+
});</pre>
4950
<p>The path of the polyline is defined by an array of array of two (latitude and longitude).</p>
5051
</div>
5152
</div>

‎examples/routes.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Routes</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -35,13 +36,13 @@ <h1>GMaps.js &mdash; Routes</h1>
3536
<div class="span6">
3637
<p>With GMaps.js you can draw a route between two points this way:</p>
3738
<pre>map.drawRoute({
38-
origin: [-12.044012922866312, -77.02470665341184],
39-
destination: [-12.090814532191756, -77.02271108990476],
40-
travelMode: 'walking',
41-
strokeColor: '#131540',
42-
strokeOpacity: 0.6,
43-
strokeWeight: 6
44-
});</pre>
39+
origin: [-12.044012922866312, -77.02470665341184],
40+
destination: [-12.090814532191756, -77.02271108990476],
41+
travelMode: 'walking',
42+
strokeColor: '#131540',
43+
strokeOpacity: 0.6,
44+
strokeWeight: 6
45+
});</pre>
4546
<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>
4647
<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>
4748
</div>

‎examples/routes_advanced.html

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<title>GMaps.js &mdash; Routes</title>
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
67
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -45,21 +46,21 @@ <h1>GMaps.js &mdash; Routes</h1>
4546
<div class="span6">
4647
<p>You can travel a route, step by step, this way:</p>
4748
<pre>map.travelRoute({
48-
origin: [-12.044012922866312, -77.02470665341184],
49-
destination: [-12.090814532191756, -77.02271108990476],
50-
travelMode: 'driving',
51-
step: function(e){
52-
$('#instructions').append('&lt;li&gt;'+e.instructions+'&lt;/li&gt;');
53-
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
54-
map.drawPolyline({
55-
path: e.path,
56-
strokeColor: '#131540',
57-
strokeOpacity: 0.6,
58-
strokeWeight: 6
59-
});
60-
});
61-
}
62-
});</pre>
49+
origin: [-12.044012922866312, -77.02470665341184],
50+
destination: [-12.090814532191756, -77.02271108990476],
51+
travelMode: 'driving',
52+
step: function(e){
53+
$('#instructions').append('&lt;li&gt;'+e.instructions+'&lt;/li&gt;');
54+
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
55+
map.drawPolyline({
56+
path: e.path,
57+
strokeColor: '#131540',
58+
strokeOpacity: 0.6,
59+
strokeWeight: 6
60+
});
61+
});
62+
}
63+
});</pre>
6364
<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>
6465
</div>
6566
</div>

0 commit comments

Comments
 (0)