-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (65 loc) · 1.87 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
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
#info-box {
background-color: white;
border: 1px solid black;
bottom: 30px;
height: 20px;
padding: 10px;
position: absolute;
left: 30px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: {lat: 22.267039464904627, lng: 70.53019149780268}
});
// Load a GeoJSON from the same server as our demo.
map.data.loadGeoJson('./gujrat.json');
//map.data.loadGeoJson('https://drive.google.com/open?id=0ByTTwcOHkIUSRkZfb1FvLTMyZXM');
// Add some style.
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: feature.getProperty('color'),
// fillColor: 'blue',
strokeWeight: 1
});
});
// [START snippet]
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
console.log(event.feature.getProperty('color'));
console.log(event.feature.getProperty('name'));
});
// [END snippet]
// Set the stroke width, and fill color for each polygon
//var featureStyle = {
// fillColor: 'green',
// strokeWeight: .5}
//map.data.setStyle(featureStyle);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="info-box">?</div>
</body>
</html>