This repository has been archived by the owner on Jun 7, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
108 lines (103 loc) · 3.86 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!--MODIFY your web page title -->
<title>Fusion Tables Layer Example: Legend</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body, #map-canvas {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#legend {
background: #FFF;
padding: 10px;
margin: 5px;
font-size: 12px;
font-family: Arial, sans-serif;
}
.color {
border: 1px solid;
height: 12px;
width: 12px;
margin-right: 3px;
float: left;
}
.red {
background: #C00;
}
.yellow {
background: #FF3;
}
.green {
background: #6F0;
}
.blue {
background: #06C;
}
.purple {
background: #63C;
}
</style>
<script type="text/javascript">
function initialize() {
// MODIFY the map center point, zoom level, and type if desired
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -90.1),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// MODIFY these items in the section below:
// Insert the header of the geocoded location data column in your Google Fusion Table. Mine is 'Address'. If your header includes spaces, type with double-quotes around single-quotes, like this: "'My Addresses'"
// Insert your Google Fusion Table ID number, the long string that appears in File menu > About this Table.
// Insert your styleId and templateId numbers, which appear in your GFT > Map > Publish > Get HTML and JavaScript.
var layer = new google.maps.FusionTablesLayer({
map: map,
query: {
select: 'Address',
from: '1RXgs33--EUO1ARJsNr0VQwju9TyebQpkuBlbxmlF',
},
options:{
styleId: 5,
templateId: 6
}
});
// MODIFY Title and text of your legend. Match color names and labels to the Google Fusion Table map marker icons you already created.
// To display link to source data, insert the URL of your Google Fusion Table.
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Company</h3>');
content.push('<p><div class="color green"></div>The Fresh Market</p>');
content.push('<p><div class="color blue"></div>Whole Foods Market</p>');
content.push('<p><div class="color yellow"></div>Sprouts Farmers Market</p>');
content.push('<p>*Only US locations</p>');
content.push('<p><a href="https://www.google.com/fusiontables/DataSource?docid=1RXgs33--EUO1ARJsNr0VQwju9TyebQpkuBlbxmlF">Source Data</a>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>