Untitled
unknown
html
4 years ago
31 kB
30
Indexable
<!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>Editor is loading...