NewsMap/newsMaps.html at master · mhhplumber/NewsMap · GitHub

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
<!-- Api key: AIzaSyD2daRRidhArP7lUWGqhEUHZMlIjAhxGiM -->


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
	<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
	<title>News Maps</title>
</head>
<body>

	<div class="page-title">
		<h1>News Maps</h1>
	</div>


	<!-- Map -->


	<div id="map"></div>
    <script>
    var citymap = {

      chicago: {
        center: {lat: 41.878, lng: -87.629},
        population: 2714856
      },
      newyork: {
        center: {lat: 40.714, lng: -74.005},
        population: 8405837
      },
      losangeles: {
        center: {lat: 34.052, lng: -118.243},
        population: 3857799
      },
      vancouver: {
        center: {lat: 49.25, lng: -123.1},
        population: 603502
      }
    };

      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {


          zoom: 2,
          center: {lat: 0, lng: 0},
          mapTypeId: 'satellite'
        });

        // Create a <script> tag and set the USGS URL as the source.
        //var script = document.createElement('script');
        var infoWindow = new google.maps.InfoWindow({
            content: "News Title: "
        });

        for (var city in citymap) {
            var cityCircle = new google.maps.Circle({
              strokeColor: 'black',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: 'red',
              fillOpacity: 0.35,
              map: map,
              center: citymap[city].center,
              radius: Math.sqrt(citymap[city].population) * 100
            });

            cityCircle.addListener('mouseover', function() {
                infoWindow.setPosition(citymap[city].center);
                infoWindow.open(map);
            });

            cityCircle.addListener('mouseout', function() {
                infoWindow.close();
            });
        }
      }
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlYgpCNxABlDdGj7h9TPvwe_guM3tBTEo&callback=initMap">
    </script>


<!-- End of map -->


</body>
</html>