-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathData Layer.html
74 lines (67 loc) · 2.17 KB
/
Data Layer.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
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Event Handling</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() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: -28, lng: 137.883}
});
// Load GeoJSON.
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
// Add some style.
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: feature.getProperty('color'),
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');
});
map.data.addListener('click', function(event) {
placeMarker(event.latLng);
});
// [END snippet]
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="info-box">?</div>
</body>
</html>