-
Notifications
You must be signed in to change notification settings - Fork 8
/
sample_map.html
executable file
·58 lines (51 loc) · 2 KB
/
sample_map.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
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
<script>
</script>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 2
});
map.data.setStyle(function(transaction) {
var size = transaction.getProperty('cost');
return {
icon: getCircle(size)
};
});
}
function addPoint(data) {
map.data.addGeoJson(data);
}
function getCircle(size) {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: size / 10,
strokeColor: 'white',
strokeWeight: .5
};
return circle;
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
<button onclick='addPoint({"geometry": {"type": "Point", "coordinates": [-73.187207, 41.386646]}, "type": "Feature", "properties": {"lname": "Church", "cc": "5591 2902 6883 3705", "state": "CT", "cost": 165, "zip": "06491", "fname": "Guy", "city": "Stevenson", "date": 1459173101}});'>Add Data 1</button>
<button onClick='addPoint({"geometry": {"type": "Point", "coordinates": [-78.87436, 42.329183]}, "type": "Feature", "properties": {"lname": "Dickerson", "cc": "5410 0135 3654 2851", "state": "NY", "cost": 600, "zip": "14719", "fname": "Deirdre", "city": "Cattaraugus", "date": 1459175636}});'>Add Data 2</button>
<button onClick='addPoint({"geometry": {"type": "Point", "coordinates": [-97.37051, 27.672334]}, "type": "Feature", "properties": {"lname": "Huff", "cc": "5109 8456 3140 2044", "state": "TX", "cost": 45, "zip": "78414", "fname": "Nehru", "city": "Corpus Christi", "date": 1459175697}});'>Add Data 3</button>
</body>
</html>