forked from Vizzuality/cartodb-gmapsv3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (61 loc) · 2.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using CartoDB with Google Maps v3</title>
<link rel="shortcut icon" href="http://cartodb.com/favicon/favicon_32x32.ico" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="cartodb.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="wax.g.js"></script>
<script type="text/javascript" src="cartodb-gmapsv3.js"></script>
<script type="text/javascript">
var cartodb1_gmapsv3
, cartodb2_gmapsv3;
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(20,0),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
cartodb1_gmapsv3 = new google.maps.CartoDBLayer({
map_canvas: 'map_canvas',
map: map,
user_name:"xavijam",
table_name: 'test',
query: "SELECT cartodb_id,the_geom_webmercator,description FROM test",
tile_style: "#test{line-color:#719700;line-width:1;line-opacity:0.6;polygon-opacity:0.6;}",
map_key: "6087bc5111352713a81a48491078f182a0541f6c",
map_style: true,
infowindow: "SELECT cartodb_id,the_geom_webmercator,description FROM test WHERE cartodb_id={{feature}}",
auto_bound: true,
debug: false
});
cartodb2_gmapsv3 = new google.maps.CartoDBLayer({
map_canvas: 'map_canvas',
map: map,
user_name:'xavijam',
table_name: 'schools',
query: "SELECT cartodb_id, the_geom_webmercator, address_line_1 AS Address FROM schools",
map_style: false,
infowindow: false,
auto_bound: false,
debug: true
});
$('form').submit(function(ev){
ev.stopPropagation(); ev.preventDefault();
var value = $(this).find('input').val();
cartodb1_gmapsv3.update(value);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<form><input type="text" value="SELECT * FROM test"/></form>
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
</body>
</html>