SBHacks2018/index.html at master · tmlabonte/SBHacks2018 · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

    <title>World's Stage</title>

    <style>
       #map {
        height: 725px;
        width: 100%;
       }
    </style>

    <link rel="stylesheet" type="text/css" href="index.css" media="screen, handheld">
        <link rel="icon" href="github.png">
  </head>
  <body>
    <h1>World's Stage</h1>

    <form>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">Song: </span>
        </div>
        <input type="text" class="form-control" id="searchBar" name="song" placeholder="">
      </div>
    </form>

    <pre id='response'></pre>

      <!-- GoogleMap -->
    <div id="map"></div>


<script>
        function initMap() {
            var mid = {lat: 22, lng: 0};
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 2,
              center: mid
            });
            map.setOptions({ minZoom: 2, maxZoom: 15 });

            var cities = ["Los Angeles", "Los Angeles", "New York", "New York", "New Delhi", "New Delhi", "Sydney", "Sydney", "Beijing", "Beijing", "Rio", "Rio", "London", "London", "Lagos", "Lagos", "Moscow", "Moscow", "Cairo", "Cairo", "Seoul", "Seoul", "Cape Town", "Cape Town", "Bogota", "Bogota"];

            var latLons = [34.0522, -118.2437, 40.7128, -74.0060, 28.6139, 77.2090, -33.8688, 151.2093, 39.9042, 116.4074, -22.9068, -43.1729, 51.5074, -0.1278, 6.5244, 3.3792, 55.7558, 37.6173, 30.0444, 31.2357, 37.5665, 126.9780, -33.9249, 18.4241, 4.7110, -74.0721];

            if (query.song !== undefined) {
                for(var i = 0; i < cities.length-1; i+=2) {
                    var marker = new google.maps.Marker({
                        position: {lat: latLons[i], lng: latLons[i+1]},
                        map: map
                    });

                    console.log(urlArr[i/2]);

                    var content = cities[i] + '<br/>' + '<a href=' + urlArr[i/2] + ' target="_blank"><img src = ' + imgArr[i/2] +' style = "width: 7rem; height: auto;"></a>';

                    var infowindow = new google.maps.InfoWindow();

                    google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){
                        return function() {
                            infowindow.setContent(content);
                            infowindow.open(map, this);
                        };
                    })(marker,content,infowindow));
                }
            }
        }
    </script>
    <script src="search.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>


    <!-- Params -->
    <script>
      function getQueryParams(qs) {
      qs = qs.split('+').join(' ');

      var params = {},
          tokens,
          re = /[?&]?([^=]+)=([^&]*)/g;

      while (tokens = re.exec(qs)) {
          params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
      }
      return params;
    }

    var query = getQueryParams(document.location.search);
    var currentSong = query.song;
    if (currentSong == undefined) {
      document.getElementById("searchBar").defaultValue = "";
    }
    else {
      document.getElementById("searchBar").defaultValue = currentSong;
    }
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>