full code

mail@pastecode.io avatar
unknown
html
2 years ago
31 kB
1
Indexable
Never
<!DOCTYPE html>
<html>
  <head>
    <title>Tutor Map</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jQuery base library needed -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
    <script src="/static/js/multi-select.js"></script>

      <style type="text/css">
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
          height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #description {
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
        }

        #infowindow-content .title {
          font-weight: bold;
        }

        #infowindow-content {
          display: none;
        }

        #map #infowindow-content {
          display: inline;
        }

        .pac-card {
          border-radius: 2px 0 0 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          background-color: #fff;
          font-family: Roboto;
        }

        #pac-container {
          
          margin-right: 12px;
        }

        .pac-controls {
          display: inline-block;
          padding: 5px 11px;
        }

        .pac-controls label {
          font-family: Roboto;
          font-size: 13px;
          font-weight: 300;
        }

        #pac-input {
          margin-top: 0px;
          background-color: #fff;
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
          padding: 0 11px 0 13px;
          text-overflow: ellipsis;
          width: 400px;
        }

        #pac-input:focus {
          border-color: #4d90fe;
        }

        #title {
          color: #fff;
          background-color: #4d90fe;
          font-size: 25px;
          font-weight: 500;
        }

        #target {
          width: 345px;
        }
      </style>
    <script>

      gmarkers = [];
      var status_list = [];
      filteredMarkers = [];
      markers = []; 
      markerSecond = [];
      invisibleMarkers = [];
      test = [];
      var map = null;
      var infowindow;;


      {% for tutor in tutor_list %}
      markers.push([
        {{tutor['id']}},
        "{{tutor['first_name']}}",
        "{{tutor['last_name']}}",
        "{{tutor['email']}}",
        "{{tutor['mobile_phone']}}",
        {{tutor['lat']}},
        {{tutor['lng']}},
        {{tutor['lat_alternative']}},
        {{tutor['lng_alternative']}},
        "{{tutor['status']}}",
        "{{tutor['gym_type']}}",
        "{{tutor['gender']}}",
        "{{tutor['car']}}",
        "{{tutor['grade']}}",
        "{{tutor['course']}}",
        "{{tutor['programs']}}",
        "{{tutor['fluent_danish']}}",
        "{{tutor['fluent_other']}}",
        "{{tutor['more_courses']}}",
        "{{tutor['educational_institution']}}",
        "{{tutor['age']}}",
        "{{tutor['age_interval']}}",
        "{{tutor['subjects']}}",
        "{{tutor['formatted_subjects']}}",
        "{{tutor['inactive_reason']}}",
        "{{tutor['has_second']}}",
        "{{tutor['still_in_gym']}}",
        "{{tutor['tutor_gym']}}",
        "{{tutor['hours']}}",
        "{{tutor['hour_interval']}}",
        "{{tutor['tutor_qualification']}}",
        "{{tutor['formatted_programs']}}",
        "{{tutor['formatted_fluent']}}",
        "{{tutor['tutor_uni']}}"
      ]);
      {% endfor %}

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 56.26392, lng: 10.901785 },
          zoom: 8,
        });

        infowindow = new google.maps.InfoWindow({
          content: ''
        });

        for (i = 0; i < markers.length; i++) {
          checkMarker(markers[i]);
        }

        // This is where you add html elements inside the map
        const input = document.getElementById("pac-input");
        const filter = document.getElementById("status");
        const gymType = document.getElementById("gymtype");
        const tutor_gym = document.getElementById("tutor_gym");
        const still_gym = document.getElementById("still_gym");
        const gender = document.getElementById("gender");
        const car = document.getElementById("car");
        const grade = document.getElementById("grade");
        const course = document.getElementById("course");
        const programs = document.getElementById("programs");
        const fluent_danish = document.getElementById("fluent_danish");
        const fluent_other = document.getElementById("fluent_other");
        const more_courses = document.getElementById("more_courses");
        const educational_institution = document.getElementById("educational_institution");
        const age_interval = document.getElementById("age_interval");
        const subject = document.getElementById("subject");
        const secondAddress = document.getElementById("secondAddress");
        const hour_interval = document.getElementById("hour_interval");
        const qualification = document.getElementById("qualification");
        const uni = document.getElementById("uni");

        const searchBox = new google.maps.places.SearchBox(input);

        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.controls[google.maps.ControlPosition.LEFT_TOP].push(searchBox);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(filter);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(gymType);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(tutor_gym);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(still_gym);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(gender);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(grade);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(course);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(programs);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(fluent_danish);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(fluent_other);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(more_courses);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(hour_interval);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(qualification);
        // husk at push køn her

        // Bias the SearchBox results towards current map's viewport.
        map.addListener("bounds_changed", () => {
          searchBox.setBounds(map.getBounds());
        });
        
        let markers2 = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener("places_changed", () => {
          const places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }
          // Clear out the old markers.
          markers2.forEach((marker) => {
            marker.setMap(null);
          });
          markers2 = [];
          // For each place, get the icon, name and location.
          const bounds = new google.maps.LatLngBounds();
          places.forEach((place) => {
            if (!place.geometry || !place.geometry.location) {
              console.log("Returned place contains no geometry");
              return;
            }
            const icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25),
            };
            // Create a marker for each place.
            markers2.push(
              new google.maps.Marker({
                map,
                icon,
                title: place.name,
                position: place.geometry.location,
              })
            );

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }
    
      function checkMarker(marker){

        var lat_alternative = marker[7]
        var lng_alternative = marker[8] 
        var has_second = marker[25]
        var hours = marker[28]

        if (lat_alternative == 0 && lng_alternative == 0){
          addMarker(marker);
        }
        else {
          addMarker(marker);
          addMarkerSecond(marker);
        }
      }


      function addMarker(marker){

        var id = marker[0]
        var first_name = marker[1]
        var last_name = marker[2]
        var email = marker[3]
        var mobile = marker[4]
        var lat = marker[5]
        var lng = marker[6]
        var lat_alternative = marker[7]
        var lng_alternative = marker[8]
        var status = marker[9]
        var gym_type = marker[10]
        var gender = marker[11]
        var car = marker[12]
        var grade = marker[13]
        var course = marker[14]
        var programs = marker[15]
        var programs_text = marker[31]
        var fluent_danish = marker[16]
        var fluent_other = marker[17]
        var formatted_fluent = marker[32]
        var more_courses = marker[18]
        var educational_institution = marker[19]
        var age = marker[20]
        var age_interval = marker[21]
        var subject = marker[22]
        var formatted_subjects = marker[23]
        var inactive_reason = marker[24]
        var has_second = marker[25]
        var still_gym = marker[26]
        var tutor_gym = marker[27]
        var hours = marker[28]
        var hour_interval = marker[29]
        var qualification = marker[30]
        var tutor_uni = marker[33]

        if (inactive_reason != "Blank"){
          var content = 
            '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">'+first_name+' '+last_name+'</h1>' +
            '<div id="bodyContent">' +
            '<p>Inaktivitets grundlag: '+inactive_reason+'</p>' +
            '<p>Åben for flere forløb: '+more_courses+'</p>' +
            '<p>Email: '+email+'</p>' +
            '<p>Mobil: '+mobile+'</p>' +
            '<p>Køn: '+gender+'</p>' +
            '<p>Timer: '+hours+'</p>' +
            '<p>Alder: '+age+'</p>' +
            '<p>Kvalifikation: '+qualification+'</p>' +
            '<p>Gym type: '+gym_type+'</p>' +
            '<p>Gym: '+tutor_gym+'</p>' +
            '<p>Tutors Universitet: '+tutor_uni+'</p>' +
            '<p>Gym år: '+still_gym+'</p>' +
            '<p>Fag: '+formatted_subjects+'</p>' +
            '<p>Uddannelsesinstitution: '+educational_institution+'</p>' +
            '<p>Flydende i dansk: '+fluent_danish+'</p>' +
            '<p>Flydende i andre sprog: '+formatted_fluent+'</p>' +
            '<p>Bil: '+car+'</p>' +
            '<p>Karakter gennemsnit: '+grade+'</p>' +
            '<p>Online prioritet: '+course+'</p>' +
            '<p>Programmer: '+programs_text+'</p>' +
            '<a href="https://toptutors.teachworks.com/employees/'+id+'">' +
            "Teackworks Profil</a> " +
            "</div>" +
            "</div>";
        }
        else {
          var content =
            '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">'+first_name+' '+last_name+'</h1>' +
            '<div id="bodyContent">' +
            '<p>Status: '+status+'</p>' +
            '<p>Åben for flere forløb: '+more_courses+'</p>' +
            '<p>Email: '+email+'</p>' +
            '<p>Mobil: '+mobile+'</p>' +
            '<p>Køn: '+gender+'</p>' +
            '<p>Timer: '+hours+'</p>' +
            '<p>Alder: '+age+'</p>' +
            '<p>Kvalifikation: '+qualification+'</p>' +
            '<p>Gym type: '+gym_type+'</p>' +
            '<p>Gym: '+tutor_gym+'</p>' +
            '<p>Gym år: '+still_gym+'</p>' +
            '<p>Tutors Universitet: '+tutor_uni+'</p>' +
            '<p>Fag: '+formatted_subjects+'</p>' +
            '<p>Uddannelsesinstitution: '+educational_institution+'</p>' +
            '<p>Flydende i dansk: '+fluent_danish+'</p>' +
            '<p>Flydende i andre sprog: '+formatted_fluent+'</p>' +
            '<p>Bil: '+car+'</p>' +
            '<p>Karakter gennemsnit: '+grade+'</p>' +
            '<p>Online prioritet: '+course+'</p>' +
            '<p>Porgrammer: '+programs_text+'</p>' +
            '<a href="https://toptutors.teachworks.com/employees/'+id+'">' +
            "Teackworks Profil</a> " +
            "</div>" +
            "</div>";
        }

        var url;

        if (status == 'Inactive') {
          url = "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
        }
        else if (status == 'Active') {
          url = "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        }
        else if (status == 'Prospective') {
          url = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
        }
        else {
          url = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
        }

        var marker = new google.maps.Marker({
            position: {lat: lat, lng: lng},
            map,
            title: 'Tutor '+ id,
            icon: {
              url: url
            },
            status: status,
            gym_type: gym_type,
            gender: gender,
            car: car,
            grade: grade,
            course: course,
            programs: programs,
            fluent_danish: fluent_danish,
            fluent_other: fluent_other,
            more_courses: more_courses,
            educational_institution: educational_institution,
            age_interval: age_interval,
            subject: subject,
            inactive_reason: inactive_reason,
            has_second: has_second,
            still_gym: still_gym,
            tutor_gym: tutor_gym,
            hours: hours,
            hour_interval: hour_interval,
            qualification: qualification,
            tutor_uni: tutor_uni

        });

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
          return function() {
            infowindow.setContent(content);
            infowindow.open(map,marker);
          };
        })(marker,content,infowindow)); 

        gmarkers.push(marker);
      }

      function addMarkerSecond(marker){

        var id = marker[0]
        var first_name = marker[1]
        var last_name = marker[2]
        var email = marker[3]
        var mobile = marker[4]
        var lat = marker[5]
        var lng = marker[6]
        var lat_alternative = marker[7]
        var lng_alternative = marker[8]
        var status = marker[9]
        var gym_type = marker[10]
        var gender = marker[11]
        var car = marker[12]
        var grade = marker[13]
        var course = marker[14]
        var programs = marker[15]
        var programs_text = marker[31]
        var fluent_danish = marker[16]
        var fluent_other = marker[17]
        var formatted_fluent = marker[32]
        var more_courses = marker[18]
        var educational_institution = marker[19]
        var age = marker[20]
        var age_interval = marker[21]
        var subject = marker[22]
        var formatted_subjects = marker[23]
        var inactive_reason = marker[24]
        var has_second = marker[25]
        var still_gym = marker[26]
        var tutor_gym = marker[27]
        var hours = marker[28]
        var hour_interval = marker[29]
        var qualification = marker[30]
        var tutor_uni = marker[33]

        var content = 
            '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">'+first_name+' '+last_name+'</h1>' +
            '<div id="bodyContent">' +
            '<p>Status: '+status+'</p>' +
            '<p>Åben for flere forløb: '+more_courses+'</p>' +
            '<p>Email: '+email+'</p>' +
            '<p>Mobil: '+mobile+'</p>' +
            '<p>Køn: '+gender+'</p>' +
            '<p>Timer: '+hours+'</p>' +
            '<p>Alder: '+age+'</p>' +
            '<p>Kvalifikation: '+qualification+'</p>' +
            '<p>Gym type: '+gym_type+'</p>' +
            '<p>Gym: '+tutor_gym+'</p>' +
            '<p>Tutors Universitet: '+tutor_uni+'</p>' +
            '<p>Gym år: '+still_gym+'</p>' +
            '<p>Fag: '+formatted_subjects+'</p>' +
            '<p>Uddannelsesinstitution: '+educational_institution+'</p>' +
            '<p>Flydende i dansk: '+fluent_danish+'</p>' +
            '<p>Flydende i andre sprog: '+formatted_fluent+'</p>' +
            '<p>Bil: '+car+'</p>' +
            '<p>Karakter gennemsnit: '+grade+'</p>' +
            '<p>Online prioritet: '+course+'</p>' +
            '<p>Porgrammer: '+programs_text+'</p>' +
            '<a href="https://toptutors.teachworks.com/employees/'+id+'">' +
            "Teackworks Profil</a> " +
            "</div>" +
            "</div>";


        var url = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"

        var marker = new google.maps.Marker({
            position: {lat: lat_alternative, lng: lng_alternative},
            map,
            title: 'Tutor '+ id,
            icon: {
              url: url
            },
            status: status,
            gym_type: gym_type,
            gender: gender,
            car: car,
            grade: grade,
            course: course,
            programs: programs,
            fluent_danish: fluent_danish,
            fluent_other: fluent_other,
            more_courses: more_courses,
            educational_institution: educational_institution,
            subject: subject,
            inactive_reason: inactive_reason,
            has_second: has_second,
            still_gym: still_gym,
            tutor_gym: tutor_gym,
            hours: hours,
            hour_interval: hour_interval,
            qualification: qualification,
            tutor_uni: tutor_uni,
            visible: false

        });

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
          return function() {
            infowindow.setContent(content);
            infowindow.open(map,marker);
          };
        })(marker,content,infowindow)); 

        gmarkers.push(marker);
        markerSecond.push(marker);
        }

      filterSecond = function(){
        var filter = document.getElementById("secondAddress").value;

        for (i = 0; i < markerSecond.length; i++){
          marker = markerSecond[i];
          if (filter == "show"){
            marker.setVisible(true);
          }
          else {
            marker.setVisible(false);
          }
        }
      }

      function test123(item, index) {
        return item;
      }

      filterMarkers = function(fieldID){


        var selective = document.getElementById(fieldID).options;

        var arrayOfSelectedIDs = [];

        for (i = 0; i < selective.length; i++)
        {
          if (selective[i].selected){
            arrayOfSelectedIDs.push(selective[i].value)
          }
        }
        console.log(arrayOfSelectedIDs);

        for (i = 0; i < gmarkers.length; i++)
        {
          for (i = 0; i < invisibleMarkers.length; i++) 
          {
              marker = gmarkers[i];
              invisMarker = invisibleMarkers[i];
              marker.setMap(map)
              console.log(gmarkers.length);

              if (marker.status.includes(arrayOfSelectedIDs) || invisMarker.status.includes(arrayOfSelectedIDs)) 
              {
                invisMarker.setVisible(true)
                marker.setVisible(true);
              }
              else {
                invisibleMarkers.push(marker);
                marker.setVisible(false);
                invisMarker.setVisible(false)
              }
          }

          // TODO if any show all gym types elif: 
          // if (marker.gym_type == gym || gym.length === 0) {
          //   marker.setVisible(true);
          // }
          // else {
          //   marker.setVisible(false);
          // }

          // if (marker.gender == gender || gender.length === 0) {}
          // else {
          //   marker.setVisible(false);
          // }

          // if (marker.car == car || car.length === 0) {}
          // else {
          //   marker.setVisible(false);
          // }
        }
      }
    
    </script>

  </head>
  <body>

    <select class="status-multiple" required name="status[]" multiple="multiple" id="status" onchange="filterMarkers(this.id);" style="width: 7%;">
      <option></option>
      <option value="Active">Aktiv</option>
      <option value="Inactive">Inaktiv</option>
      <option value="Prospective">Prospective</option>
    </select>
  
    <select id="gymtype" style="width: 80px;" onchange="filterMarkers();">
      <option value="">Gym type</option>
      <option value="STX">STX</option>
      <option value="HHX">HHX</option>
      <option value="HTX">HTX</option>
      <option value="HF">HF</option>
      <option value="IB">IB</option>
      <option value="IBB">IBB</option>
      <option value="EUX">EUX</option>
      <option value="EUD">EUD</option>
      <option value="Foreign high school">Foreign high school</option>
      <option value="Other">Other</option>
    </select>

    <select id="still_gym" style="width: 70px;" onchange="filterMarkers();">
      <option value="">Gym år</option>
      <option value="1.g">1.g</option>
      <option value="2.g">2.g</option>
      <option value="3.g">3.g</option>
      <option value="Jeg er færdig med gymnasiet">Færdig</option>
    </select>

    <select id="gender" class="ui dropdown" onchange="filterMarkers();">
      <option value="">Gender</option>
      <option value="Mand">Male</option>
      <option value="Kvinde">Female</option>
      <option value="Other">Other</option>  
    </select>

    <select id="car" style="width: 160px; position: fixed; margin-left: 857px;" onchange="filterMarkers();">
      <option value="">Adgang til bil</option>
      <option value="Yes">Ja</option>
      <option value="No">Nej</option>
    </select>

    <select id="grade" onchange="filterMarkers();">
      <option value="">Karakter</option>
      <option value="Under 7">Under 7</option>
      <option value="7 til 8">7 til 8</option>
      <option value="8 til 9">8 til 9</option>
      <option value="9 til 10">9 til 10</option>
      <option value="10 til 11">10 til 11</option>
      <option value="11 til 12">11 til 12</option>
      <option value="Over 12">Over 12</option>
    </select>

    <select id="course" style="width: 140px;" onchange="filterMarkers();">
      <option value="">Online prioriteringer</option>
      <option value="1. prioritet (Bor i mindre by)">1. prioritet (Bor i mindre by)</option>
      <option value="2. prioritet (Foretrækker online)">2. prioritet (Foretrækker online)</option>
      <option value="3. prioritet (Bor i større by)">3. prioritet (Bor i større by)</option>
      <option value="4. prioritet (Foretrækker fysisk)">4. prioritet (Foretrækker fysisk)</option>
      <option value="5. prioritet (Kan ikke undervise online)">5. prioritet (Kan ikke undervise online)</option>
    </select>
    
    <select id="programs" onchange="filterMarkers();" >
      <option value="">Programmer</option>
      <option value="Excel">Excel</option>
      <option value="TI-Nspire">TI-Nspire</option>
      <option value="Geogebra">Geogebra</option>
      <option value="Wordmat">Wordmat</option>
      <option value="Maple">Maple</option>
      <option value="Matlab">Matlab</option>
      <option value="STATA">STATA</option>
      <option value="JMP">JMP</option>
      <option value="R">R</option>
      <option value="Python">Python</option>
      <option value="Maple">Maple</option>
    </select>

    <select id="fluent_danish" onchange="filterMarkers();">
      <option value="">Snakker dansk?</option>
      <option value="Yes">Ja</option>
      <option value="No">Nej</option>
    </select>

    <select id="fluent_other" style="width: 85px;" onchange="filterMarkers();">
      <option value="">Flydende i</option>
      <option value="Engelsk">English</option>
      <option value="Tsyk">German</option>
      <option value="Fransk">French</option>
      <option value="Spansk">Spanish</option>
      <option value="Arabisk">Arabic</option>
      <option value="Portugisisk">Portugesse</option>
      <option value="Russisk">Russian</option>
      <option value="Japansk">Japanesse</option>
      <option value="Kinesisk">Chinesse</option>
      <option value="Persisk">Persian</option>
      <option value="Italiensk">Italian</option>
    </select>

    <select id="more_courses" onchange="filterMarkers();">
      <option value="">Åben for forløb?</option>
      <option value="Yes">Ja</option>
      <option value="No">Nej</option>
    </select>

    <select id="educational_institution" style="width: 160px; position: fixed; margin-left: 427px;" onchange="filterMarkers();">
      <option value="">Uddannelsesinstitution</option>
      <option value="Aalborg Universitet">Aalborg Uni</option>
      <option value="Aarhus Universitet">Aarhus Uni</option>
      <option value="Absalon Professionshøjskole">Absalon Professionshøjskole</option>
      <option value="Copenhagen Business Academy">Copenhagen Business Academy</option>
      <option value="Copenhagen Business School">Copenhagen Business School</option>
      <option value="Danmarks Tekniske Universitet">Danmarks Tekniske Uni</option>
      <option value="Danmarks Medie- og Jornalisthøjskole">DMJX</option>
      <option value="Erhvervsakademi Aarhus">Erhvervsakademi Aarhus</option>
      <option value="Erhvervsakademi Dania">Erhvervsakademi Dania</option>
      <option value="Erhvervsakademi Kolding">Erhvervsakademi Kolding</option>
      <option value="Erhvervsakademi Midtvest">Erhvervsakademi Midtvest</option>
      <option value="Erhvervsakademi Sydvest">Erhvervsakademi Sydvest</option>
      <option value="IT-Universitet">IT-Uni</option>
      <option value="Københavns Universitet">KU</option>
      <option value="Københavns Professionshøjskole">Københavns Professionshøjskole</option>
      <option value="Københavns Erhvervsakademi">Københavns Erhvervsakademi</option>
      <option value="Professionshøjskolen UCN">Professionshøjskolen</option>
      <option value="Roskilde Universitet">Roskilde Uni</option>
      <option value="SmartLearning">SmartLearning</option>
      <option value="Syddansk Universitet">Syddansk Uni</option>
      <option value="UC Syd">IT-Uni</option>
      <option value="UCL Erhvervsakademi og Professionshøjskole">UCL</option>
      <option value="Via University College">Via University College</option>
      <option value="Zealand">Zealand</option>
    </select>

    <select id="age_interval" style="width: 60px; position: fixed; margin-left: 747px;" onchange="filterMarkers();">
      <option value="">Alder</option>
      <option value="under 18">Under 18</option>
      <option value="18 til 20">18 til 20</option>
      <option value="21 til 23">21 til 23</option>
      <option value="24 til 26">24 til 26</option>
      <option value="27+">Over 27</option>
    </select>

    <select id="secondAddress" style="width: 160px; position: fixed; margin-left: 587px;" onchange="filterSecond();">
      <option selected value="hide">Skjul sekundær adresse</option>  
      <option value="show">Vis sekundær adresse</option>
    </select>

    <select id="hour_interval" onchange="filterMarkers();">
      <option value="">Time interval</option>
      <option value="0 til 2">0 til 2</option>
      <option value="2 til 10">2 til 10</option>
      <option value="10 til 50">10 til 50</option>
      <option value="50 til 100">50 til 100</option>
      <option value="100+">Over 100</option>
    </select>

    <select id="qualification" style="width: 110px;" onchange="filterMarkers();">
      <option value="">Kvalifikationer</option>
      <option value="Super pædagogisk">Pædagogisk</option> 
      <option value="Ikke særlig pædagogisk">Ikke Pædagogisk</option> 
      <option value="Dansk korrektur/grammatik">Dansk korrektur/gramamtik</option>
      <option value="Engelsk korrektur/grammatik">Engelsk korrektur/grammatik</option>
      <option value="God til SRP-forløb">God til SRP-forløb</option>
      <option value="God til sprogundervisning">God til sprogundervisning</option>
    </select>

    <select id="subject" style="width: 50px; margin-left: 807px;" onchange="filterMarkers();">
      <option value="">Fag</option>
      {% for subject in subject_list %}
        <option value="{{subject["subject"]}}">{{subject["subject"]}}</option>
      {% endfor %}
    </select>

    <select id="uni" style="width: 160px; position: fixed; margin-left: 160px;" onchange="filterMarkers();">
      <option value="">Uni Uddannelser</option>
      {% for uni in lst %}
        <option value="{{uni["uni"]}}">{{uni["uni"]}}</option>
      {% endfor %}
    </select>

    <select id="tutor_gym" onchange="filterMarkers();">
      <option value="">Tutorens gym</option>
      {% for gym in gym_list %}
        <option value="{{gym}}">{{gym}}</option>
      {% endfor %}
    </select>

    <input
      id="pac-input"
      class="controls"
      style="height: 1.57%;"
      type="text"
      placeholder="Søg efter adresse"
    />

    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key={{gmaps_key}}&callback=initMap&libraries=places&v=weekly"
      async
    ></script>
  </body>
</html>