JavaScript
--
Questions
--
Followers
Top Experts
Names of places in DK
My project is to create a service that helps users to find names of places in Denmark.
I use a SQL database and I use Google Maps to support the solution.
The beta version can be seen here: http://kroweb.dk/gfdev/stednavne/
It is only a smalle fragment of placenames that is implemented in the database at this moment. Type "Allinge" in the searchfield, and you will get what there is for now.
What I need to establish before I expand the database, is two things:
1. This represents the broader search. I need the searchfield to be active as a query against the database (which it allready is), AND I need the same searchfield to be searchfield for the Google Map at the page, menaing that the searchstring entered in she searchfield sholud also be the primary searchstring in the Google Map search field - AND the map search shuould be fired automatically when firing the searchstring at the top. This should support that the users initial request typically would represent a broader search, which means that ww will show an initial map in accordance with that.
2. This represents the detailed search. When performing the broader search as mentioned above, a list of possible places will be presented to the user. I have structured the database with a column called Kort holding an Info icon which is linking to another column called Lating. What I need for the detailed is that when the user clicks on the info icon in a specific recird, this should enter AND fire a searchstring in the Google Map with the content form the columns in the database in this sequence: "Stednavn" " (space)" "Sogn" "space) " "Amt".
The code at this moment looks like this, and I hope that somebody can help me to get those two issues working:
I use a SQL database and I use Google Maps to support the solution.
The beta version can be seen here: http://kroweb.dk/gfdev/stednavne/
It is only a smalle fragment of placenames that is implemented in the database at this moment. Type "Allinge" in the searchfield, and you will get what there is for now.
What I need to establish before I expand the database, is two things:
1. This represents the broader search. I need the searchfield to be active as a query against the database (which it allready is), AND I need the same searchfield to be searchfield for the Google Map at the page, menaing that the searchstring entered in she searchfield sholud also be the primary searchstring in the Google Map search field - AND the map search shuould be fired automatically when firing the searchstring at the top. This should support that the users initial request typically would represent a broader search, which means that ww will show an initial map in accordance with that.
2. This represents the detailed search. When performing the broader search as mentioned above, a list of possible places will be presented to the user. I have structured the database with a column called Kort holding an Info icon which is linking to another column called Lating. What I need for the detailed is that when the user clicks on the info icon in a specific recird, this should enter AND fire a searchstring in the Google Map with the content form the columns in the database in this sequence: "Stednavn" " (space)" "Sogn" "space) " "Amt".
The code at this moment looks like this, and I hope that somebody can help me to get those two issues working:
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
$groupswithaccess="openssl_public_decrypt(data, decrypted, key)";
require_once("../slpw/sitelokpw.php");
?>
<!-- Check for db requirements-->
<?php
//$link = mysqli_connect("mysql31.unoeuro.com", "genealogisk_dk1", "AevleBaevle194287Bum", "genealogiskforum_dk_db4");
//$link->set_charset("utf8");
// Check connection
//if($link === false){
// die("ERROR: Could not connect. " . mysqli_connect_error());
//}
// <!-- Check for query requirements-->
//$id = $_GET[ 'id' ];
//$sql = "SELECT id, Sogn, Stift, Provsti, navn, tlf, email, besked FROM gravsten WHERE id = $id";
//$result = $link->query($sql);
//$row = $result->fetch_object();
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Presentation/upload</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
#target {
width: 345px;
}
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
table, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 20px;
font-weight: bold;
text-align: left;
}
table, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: arial;
font-size: 14px;
font-weight: normal;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<div class="w3-row" style="background-color:#666666">
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; height: 80px; background-color:#666666;">
<div class="w3-container w3-hide-small">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:60px"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="8001567329"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="w3-col w3-mobile" style="width: 65%; margin:0; height: 80px; background-color:#666666;">
<div class="w3-container">
<input type="text" style="-webkit-font-smoothing:antialiased;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;font-family: Lucida Blackletter; text-docoration:none; font-weight:bold; font-size: 48px; text-align:center; text-shadow: 5px 5px 10px #191919;color: #FFFFFF; background-color:#666666; margin-left:0px; border-style:none; height:80px;" value="Genealogisk forum Stednavne">
</div>
</div>
<div class="w3-col w3-mobile" style="width: 10%; padding-left: 5px; height:80px; background-color:#666666;">
<div class="w3-container">
<input type="image" style= "margin-top: 5px; margin-buttom: 5px; margin-right: 5 px; width: 70px; background-color: #666666;" <img src= "<?php echo $slprofileimage;?>">
</div>
</div>
</div>
<!-- Page Header end-->
<!-- Top Menubar start-->
<div class="w3-row">
<div class="w3-bar w3-black w3-mobile" style="font-family: sans-serif; font-size: 0.8rem; font-weight: lighter; padding-top: 8px; padding-left: 375px; border-top: 1px solid #f6f6f6; height: 45px; ">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialogforum" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gf magasin</a>
<a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gravsten</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Værktøjer</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">☰</a>
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-black">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-blue">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-blue">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-blue">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button w3-hover-text-blue">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Om Arkivalier</a>
</div>
</div>
</div>
</div>
<div id="MyMenu" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialog" class="w3-bar-item w3-button">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button">Gf magasin</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button">Værktøjer</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button">Om Arkivalier</a>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("MyMenu");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:56%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px; ">
<!-- Søge felt til sogne -->
<form action="" form title="Skriv evt. bare en del af sognets navn hvis du søger et sogn. Hvis du søger et Stift eller et Provsti skal du skrive HELE Stiftets eller Provstiets navn" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" placeholder= "Søg sogn" style="height:25px;border: 1px solid #666666;border-radius:2px;color:#666666;" name="query" />
<input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" value="Søg"/>
<input type="submit" submit title="" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);;" value="Nulstil"/>
</form>
<?php
if ((isset($_POST['query'])) && (trim($_POST['query'])!="")) {
$con=mysqli_connect("db credentials") or die("Error connecting to database: ".mysql_error());
mysqli_select_db($con,"genealogiskforum_dk_db5");
/* the name of database we'are working in */
mysqli_set_charset($con,"utf8");
// This is an example of config.php
?>
<?php
$query = trim($_POST['query']);
//print "query=".$query;
// gets value sent over search form
$min_length = 2;
// you can set minimum length of the query if you want
if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
$query = htmlspecialchars($query,ENT_QUOTES,"utf-8");
// changes characters used in html to their equivalents, for example: < to >
$query = mysqli_real_escape_string($con, $query);
// makes sure nobody uses SQL injection
$raw_results = mysqli_query($con, "SELECT * FROM stednavne
WHERE (`Stednavn` LIKE '%".$query."%') OR (`Sogn`='$query') OR (`Amt`='$query') OR (`Herred`='$query')") or die(mysql_error());
if(mysqli_num_rows($raw_results) > 0){
echo "<table><tr><th>Stednavn</th> <th>Sogn</th> <th>Herred</th> <th>Amt</th> <th>Vis kort</th> </tr> " .$results['Stednavn'];
//Vis tabel med overskrifter
while($row = $result=mysqli_fetch_array($raw_results)) {
echo "<tr><td>" . $row["Stednavn"]. "</td><td>";
if ($row["Lating"]=="")
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>" . $row["Kort"]. "<td>";
else
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>". "<a href=\"".$row["Lating"]."\"target=\"_blank\">" . $row["Kort"]. "<td>". "<td>". "</a>";
echo "</td></tr>";
}
echo "</table>";
}else{ // if there is no matching rows do following
echo "No results";
}
}else{ // if query length is less than minimum
echo "Minimum length is ".$min_length;
}
mysqli_close($con);
}
?>
<div class="w3-row" style="width:100%; height:50px;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-row" style="width:100%; height:500px;"> <!-- for content inside this column -->
<input id="g_map" class="controls" type="text" placeholder="Søg sted" style="padding-top:10px; padding-bottom:10px; margin-top: 10px; border-radius: 25px; border: 1px solid #cccccc; height:40px; width:250px;" value="<?php echo $query?>">
<div id="map" style="width:90%; height:100%; margin-top:20px; padding-top:20px; border: 2px solid #cccccc"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARtV9mTV01IPpfc4mQUhOysce5YedUN0w&libraries=places&callback=initAutocomplete"
async defer></script>
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile" style="width:16%; margin-top: 150px; margin-left: 40px; margin-bottom:10px; border: solid 1px #cccccc;">
<img src= "skilte.jpeg" alt="Hvilken vej" style="width:100%;">
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<div class="w3-col w3-mobile" style="width:22%; float: right; margin-top:0px; background-color:#666666; border-top: solid 1px #f6f6f6; border-left: solid 1px #f6f6f6;">
<!-- Sidebar linkmenu start-->
<a href= "https://genealogiskforum.dk/Login/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Login </a> <br>
<a href= "https://genealogiskforum.dk/brugeroprettelse/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Registrer </a> <br>
<a href= "https://genealogiskforum.dk/bestil_slaegtstrae/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Bestil slægtstræ </a> <br>
<a href= "https://genealogiskforum.dk/om_gf/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Om Genealogisk forum </a> <br>
<a href= "https://genealogiskforum.dk/medlemmer/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Medlemmer </a> <br>
<a href= "https://genealogiskforum.dk/tips_vejledninger/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Tips og vejledninger </a> <br>
<a href= "https://genealogiskforum.dk/kontakt/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Kontakt </a> <br>
<a href= "https://genealogiskforum.dk/registrering/OpdaterProfil/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Opdater brugerprofil </a> <br>
<a href= "https://genealogiskforum.dk/registrering/Logout/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Logout </a> <br>
<hr>
<!-- Sidebar linkmenu end-->
<!-- SIdebar meddelelser start-->
<h4> Meddelser fra administrator </h4>
<br>
<div id="blabbox1" style="width: 200px; height: 250px; border: solid
1px black; overflow: auto; background-color: #FFFFFF; margin-left: 15px;">
</div>
<script language="javascript" type="text/javascript">
var blabsettings = new Array()
blabsettings['object']="blabbox1"
blabsettings['blabtype']="normalusergroups"
blabsettings['number']=5
blabsettings['refresh']=30
blabsettings['datetoday']="!A! ago"
blabsettings['dateearlier']="!D!/!M!/!Y! !H!:!I!:!S!"
blabsettings['showimage']=true
blabsettings['messagelinks']=true
blabsettings['loadmore']="Load older messages"
blabsettings['userpage']="userprofile.php";
blabsettings['about']="";
startblab(blabsettings)
</script>
<hr>
<!-- Sidebar meddelelser end-->
<!-- Sidebar Hvem er online start-->
<h4> Hvem er online </h4>
<hr>
<div class= "w3-container">
<ul class="slwhoisonline" style= "list-style-type: none; background-color:#666666; padding-left: 0px; padding-top:0px; margin-top:0px; padding-bottom:25px; margin-bottom:25px;">
<?php
if (function_exists('sl_whoisonline'))
sl_whoisonline('<li><img src="***profileimage***" style="padding-bottom: 5px;width: 30px;"><span style="font-family:Helvetica;font-size: 11px; color: #E6E6E6;"> ***name***</span></li>');
?>
</ul>
</div>
<!-- Sidebar Hvem er online end-->
<!-- Donate, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc;">
<br>
<h6>Din hjælp til at genealogiskforum.dk fortsat kan være gratis er af stor værdi for alle medlemmer, og vil være meget højt påskønnet.</h6>
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3WCQ75DT5F8BL">
<input type="image" src="https://www.paypalobjects.com/da_DK/DK/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – den sikre og nemme måde at betale på nettet.">
<img alt="" border="0" src="https://www.paypalobjects.com/da_DK/i/scr/pixel.gif" width="1" height="1">
</form>
<br>
</div>
<!-- Donate, end-->
<!-- Ad, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc; padding-top:10px; padding-bottom: 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="7429817725"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Ad, end-->
</div>
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-black" style="border-top: 1px solid #f6f6f6">
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 66%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman ©
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 20px;" > Samarbejdspartnere
</div>
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
Statens arkiver <br> Webtrees <br> Simple Machines Forum <br> Vibralogix
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
DIS Odense <br> <br> <br>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer end-->
</body>
</html>Zero AI Policy
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Check the following code.The changes that I have done are these:
I added an id in the input element (type search)
I added an id in the input element (type search) in the google map
I made a javascript functions that fired with the keyup event listener so when you type in the first input then auto the search procedure transfering to the map input.This is done beacause we can't have two focus (active) input elements at once.
I made a click event listener to the td cell with the info icon so when you clicked it then fetch the values from the corresponding cells that have you described before and add these into the input google map element.
I added an id in the input element (type search)
I added an id in the input element (type search) in the google map
I made a javascript functions that fired with the keyup event listener so when you type in the first input then auto the search procedure transfering to the map input.This is done beacause we can't have two focus (active) input elements at once.
I made a click event listener to the td cell with the info icon so when you clicked it then fetch the values from the corresponding cells that have you described before and add these into the input google map element.
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
$groupswithaccess="openssl_public_decrypt(data, decrypted, key)";
require_once("../slpw/sitelokpw.php");
?>
<!-- Check for db requirements-->
<?php
//$link = mysqli_connect("mysql31.unoeuro.com", "genealogisk_dk1", "AevleBaevle194287Bum", "genealogiskforum_dk_db4");
//$link->set_charset("utf8");
// Check connection
//if($link === false){
// die("ERROR: Could not connect. " . mysqli_connect_error());
//}
// <!-- Check for query requirements-->
//$id = $_GET[ 'id' ];
//$sql = "SELECT id, Sogn, Stift, Provsti, navn, tlf, email, besked FROM gravsten WHERE id = $id";
//$result = $link->query($sql);
//$row = $result->fetch_object();
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Presentation/upload</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
#target {
width: 345px;
}
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
table, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 20px;
font-weight: bold;
text-align: left;
}
table, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: arial;
font-size: 14px;
font-weight: normal;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<div class="w3-row" style="background-color:#666666">
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; height: 80px; background-color:#666666;">
<div class="w3-container w3-hide-small">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:60px"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="8001567329"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="w3-col w3-mobile" style="width: 65%; margin:0; height: 80px; background-color:#666666;">
<div class="w3-container">
<input type="text" style="-webkit-font-smoothing:antialiased;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;font-family: Lucida Blackletter; text-docoration:none; font-weight:bold; font-size: 48px; text-align:center; text-shadow: 5px 5px 10px #191919;color: #FFFFFF; background-color:#666666; margin-left:0px; border-style:none; height:80px;" value="Genealogisk forum Stednavne">
</div>
</div>
<div class="w3-col w3-mobile" style="width: 10%; padding-left: 5px; height:80px; background-color:#666666;">
<div class="w3-container">
<input type="image" style= "margin-top: 5px; margin-buttom: 5px; margin-right: 5 px; width: 70px; background-color: #666666;" <img src= "<?php echo $slprofileimage;?>">
</div>
</div>
</div>
<!-- Page Header end-->
<!-- Top Menubar start-->
<div class="w3-row">
<div class="w3-bar w3-black w3-mobile" style="font-family: sans-serif; font-size: 0.8rem; font-weight: lighter; padding-top: 8px; padding-left: 375px; border-top: 1px solid #f6f6f6; height: 45px; ">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialogforum" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gf magasin</a>
<a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gravsten</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Værktøjer</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">☰</a>
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-black">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-blue">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-blue">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-blue">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button w3-hover-text-blue">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Om Arkivalier</a>
</div>
</div>
</div>
</div>
<div id="MyMenu" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialog" class="w3-bar-item w3-button">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button">Gf magasin</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button">Værktøjer</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button">Om Arkivalier</a>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("MyMenu");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:56%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px; ">
<!-- Søge felt til sogne -->
<form action="" form title="Skriv evt. bare en del af sognets navn hvis du søger et sogn. Hvis du søger et Stift eller et Provsti skal du skrive HELE Stiftets eller Provstiets navn" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg sogn" style="height:25px;border: 1px solid #666666;border-radius:2px;color:#666666;" name="query" />
<input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="submit" submit title="" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);;" value="Nulstil"/>
</form>
<?php
if ((isset($_POST['query'])) && (trim($_POST['query'])!="")) {
$con=mysqli_connect("db credentials") or die("Error connecting to database: ".mysql_error());
mysqli_select_db($con,"genealogiskforum_dk_db5");
/* the name of database we'are working in */
mysqli_set_charset($con,"utf8");
// This is an example of config.php
?>
<?php
$query = trim($_POST['query']);
//print "query=".$query;
// gets value sent over search form
$min_length = 2;
// you can set minimum length of the query if you want
if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
$query = htmlspecialchars($query,ENT_QUOTES,"utf-8");
// changes characters used in html to their equivalents, for example: < to >
$query = mysqli_real_escape_string($con, $query);
// makes sure nobody uses SQL injection
$raw_results = mysqli_query($con, "SELECT * FROM stednavne
WHERE (`Stednavn` LIKE '%".$query."%') OR (`Sogn`='$query') OR (`Amt`='$query') OR (`Herred`='$query')") or die(mysql_error());
if(mysqli_num_rows($raw_results) > 0){
echo "<table><tr><th>Stednavn</th> <th>Sogn</th> <th>Herred</th> <th>Amt</th> <th>Vis kort</th> </tr> " .$results['Stednavn'];
//Vis tabel med overskrifter
while($row = $result=mysqli_fetch_array($raw_results)) {
echo "<tr><td>" . $row["Stednavn"]. "</td><td>";
if ($row["Lating"]=="")
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>" . $row["Kort"]. "<td>";
else
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>". "<a href=\"".$row["Lating"]."\"target=\"_blank\">" . $row["Kort"]. "<td>". "<td>". "</a>";
echo "</td></tr>";
}
echo "</table>";
}else{ // if there is no matching rows do following
echo "No results";
}
}else{ // if query length is less than minimum
echo "Minimum length is ".$min_length;
}
mysqli_close($con);
}
?>
<div class="w3-row" style="width:100%; height:50px;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-row" style="width:100%; height:500px;"> <!-- for content inside this column -->
<input id="g_map" class="controls" type="text" placeholder="Søg sted" style="padding-top:10px; padding-bottom:10px; margin-top: 10px; border-radius: 25px; border: 1px solid #cccccc; height:40px; width:250px;" value="">
<div id="map" style="width:90%; height:100%; margin-top:20px; padding-top:20px; border: 2px solid #cccccc"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
var cells=document.getElementsByTagName('tr').children;
if(cells.length){
for(var i=0;i<cells.length;i++){
cells[i][4].addEventListener('click',function(){
var Stednavn=cells[i][0].innerHTML;
var Sogn=cells[i][1].innerHTML;
var Amt=cells[i][3].innerHTML;
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
})
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARtV9mTV01IPpfc4mQUhOysce5YedUN0w&libraries=places&callback=initAutocomplete"
async defer></script>
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile" style="width:16%; margin-top: 150px; margin-left: 40px; margin-bottom:10px; border: solid 1px #cccccc;">
<img src= "skilte.jpeg" alt="Hvilken vej" style="width:100%;">
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<div class="w3-col w3-mobile" style="width:22%; float: right; margin-top:0px; background-color:#666666; border-top: solid 1px #f6f6f6; border-left: solid 1px #f6f6f6;">
<!-- Sidebar linkmenu start-->
<a href= "https://genealogiskforum.dk/Login/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Login </a> <br>
<a href= "https://genealogiskforum.dk/brugeroprettelse/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Registrer </a> <br>
<a href= "https://genealogiskforum.dk/bestil_slaegtstrae/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Bestil slægtstræ </a> <br>
<a href= "https://genealogiskforum.dk/om_gf/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Om Genealogisk forum </a> <br>
<a href= "https://genealogiskforum.dk/medlemmer/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Medlemmer </a> <br>
<a href= "https://genealogiskforum.dk/tips_vejledninger/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Tips og vejledninger </a> <br>
<a href= "https://genealogiskforum.dk/kontakt/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Kontakt </a> <br>
<a href= "https://genealogiskforum.dk/registrering/OpdaterProfil/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Opdater brugerprofil </a> <br>
<a href= "https://genealogiskforum.dk/registrering/Logout/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Logout </a> <br>
<hr>
<!-- Sidebar linkmenu end-->
<!-- SIdebar meddelelser start-->
<h4> Meddelser fra administrator </h4>
<br>
<div id="blabbox1" style="width: 200px; height: 250px; border: solid
1px black; overflow: auto; background-color: #FFFFFF; margin-left: 15px;">
</div>
<script language="javascript" type="text/javascript">
var blabsettings = new Array()
blabsettings['object']="blabbox1"
blabsettings['blabtype']="normalusergroups"
blabsettings['number']=5
blabsettings['refresh']=30
blabsettings['datetoday']="!A! ago"
blabsettings['dateearlier']="!D!/!M!/!Y! !H!:!I!:!S!"
blabsettings['showimage']=true
blabsettings['messagelinks']=true
blabsettings['loadmore']="Load older messages"
blabsettings['userpage']="userprofile.php";
blabsettings['about']="";
startblab(blabsettings)
</script>
<hr>
<!-- Sidebar meddelelser end-->
<!-- Sidebar Hvem er online start-->
<h4> Hvem er online </h4>
<hr>
<div class= "w3-container">
<ul class="slwhoisonline" style= "list-style-type: none; background-color:#666666; padding-left: 0px; padding-top:0px; margin-top:0px; padding-bottom:25px; margin-bottom:25px;">
<?php
if (function_exists('sl_whoisonline'))
sl_whoisonline('<li><img src="***profileimage***" style="padding-bottom: 5px;width: 30px;"><span style="font-family:Helvetica;font-size: 11px; color: #E6E6E6;"> ***name***</span></li>');
?>
</ul>
</div>
<!-- Sidebar Hvem er online end-->
<!-- Donate, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc;">
<br>
<h6>Din hjælp til at genealogiskforum.dk fortsat kan være gratis er af stor værdi for alle medlemmer, og vil være meget højt påskønnet.</h6>
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3WCQ75DT5F8BL">
<input type="image" src="https://www.paypalobjects.com/da_DK/DK/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – den sikre og nemme måde at betale på nettet.">
<img alt="" border="0" src="https://www.paypalobjects.com/da_DK/i/scr/pixel.gif" width="1" height="1">
</form>
<br>
</div>
<!-- Donate, end-->
<!-- Ad, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc; padding-top:10px; padding-bottom: 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="7429817725"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Ad, end-->
</div>
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-black" style="border-top: 1px solid #f6f6f6">
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 66%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman ©
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 20px;" > Samarbejdspartnere
</div>
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
Statens arkiver <br> Webtrees <br> Simple Machines Forum <br> Vibralogix
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
DIS Odense <br> <br> <br>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer end-->
</body>
</html>
Thanks a lot Leonidas,
It looks good. I'll work with it today, and get back to you :)
It looks good. I'll work with it today, and get back to you :)
First of all - thanks for the very fine code you have provided here :)
I do have some things we need to clarify on both issues, but let's take the first thing first :)
About the issue 1.:
When I enter a searchstring in the searchfield and hit the Enter key the searchstring fires against the map but not against the database query.
When I click the submit button (with value "Søg") the searchstring fires against the database query but not against the map which returns to default lating in stead.
Is it possible to make it in a way so hitting the Enter and clicking the submit button does the same thing - namely fires the searshstring against both the database query and the map?
Let's work on that first, and then I'll get back to the issue 2: later :)
I do have some things we need to clarify on both issues, but let's take the first thing first :)
About the issue 1.:
When I enter a searchstring in the searchfield and hit the Enter key the searchstring fires against the map but not against the database query.
When I click the submit button (with value "Søg") the searchstring fires against the database query but not against the map which returns to default lating in stead.
Is it possible to make it in a way so hitting the Enter and clicking the submit button does the same thing - namely fires the searshstring against both the database query and the map?
Let's work on that first, and then I'll get back to the issue 2: later :)
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Anybody who can help me finalizing these two issues?
Could you test the code below.I made some functions-corrections.
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
$groupswithaccess="openssl_public_decrypt(data, decrypted, key)";
require_once("../slpw/sitelokpw.php");
?>
<!-- Check for db requirements-->
<?php
//$link = mysqli_connect("mysql31.unoeuro.com", "genealogisk_dk1", "AevleBaevle194287Bum", "genealogiskforum_dk_db4");
//$link->set_charset("utf8");
// Check connection
//if($link === false){
// die("ERROR: Could not connect. " . mysqli_connect_error());
//}
// <!-- Check for query requirements-->
//$id = $_GET[ 'id' ];
//$sql = "SELECT id, Sogn, Stift, Provsti, navn, tlf, email, besked FROM gravsten WHERE id = $id";
//$result = $link->query($sql);
//$row = $result->fetch_object();
?>
//$link = mysqli_connect("mysql31.unoeuro.com", "genealogisk_dk1", "AevleBaevle194287Bum", "genealogiskforum_dk_db4");
//$link->set_charset("utf8");
// Check connection
//if($link === false){
// die("ERROR: Could not connect. " . mysqli_connect_error());
//}
// <!-- Check for query requirements-->
//$id = $_GET[ 'id' ];
//$sql = "SELECT id, Sogn, Stift, Provsti, navn, tlf, email, besked FROM gravsten WHERE id = $id";
//$result = $link->query($sql);
//$row = $result->fetch_object();
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Presentation/upload</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
#target {
width: 345px;
}
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
table, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 20px;
font-weight: bold;
text-align: left;
}
table, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: arial;
font-size: 14px;
font-weight: normal;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<div class="w3-row" style="background-color:#666666">
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; height: 80px; background-color:#666666;">
<div class="w3-container w3-hide-small">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:60px"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="8001567329"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="w3-col w3-mobile" style="width: 65%; margin:0; height: 80px; background-color:#666666;">
<div class="w3-container">
<input type="text" style="-webkit-font-smoothing:antialiased;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;font-family: Lucida Blackletter; text-docoration:none; font-weight:bold; font-size: 48px; text-align:center; text-shadow: 5px 5px 10px #191919;color: #FFFFFF; background-color:#666666; margin-left:0px; border-style:none; height:80px;" value="Genealogisk forum Stednavne">
</div>
</div>
<div class="w3-col w3-mobile" style="width: 10%; padding-left: 5px; height:80px; background-color:#666666;">
<div class="w3-container">
<input type="image" style= "margin-top: 5px; margin-buttom: 5px; margin-right: 5 px; width: 70px; background-color: #666666;" <img src= "<?php echo $slprofileimage;?>">
</div>
</div>
</div>
<!-- Page Header end-->
<!-- Top Menubar start-->
<div class="w3-row">
<div class="w3-bar w3-black w3-mobile" style="font-family: sans-serif; font-size: 0.8rem; font-weight: lighter; padding-top: 8px; padding-left: 375px; border-top: 1px solid #f6f6f6; height: 45px; ">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialogforum" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gf magasin</a>
<a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gravsten</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Værktøjer</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">☰</a>
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-black">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-blue">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-blue">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-blue">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button w3-hover-text-blue">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Om Arkivalier</a>
</div>
</div>
</div>
</div>
<div id="MyMenu" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialog" class="w3-bar-item w3-button">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button">Gf magasin</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button">Værktøjer</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button">Om Arkivalier</a>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("MyMenu");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:56%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px; ">
<!-- Søge felt til sogne -->
<form action="" form title="Skriv evt. bare en del af sognets navn hvis du søger et sogn. Hvis du søger et Stift eller et Provsti skal du skrive HELE Stiftets eller Provstiets navn" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg sogn" style="height:25px;border: 1px solid #666666;border-radius:2px;color:#666666;" name="query" />
<input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="submit" submit title="" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);;" value="Nulstil"/>
</form>
<?php
if ((isset($_POST['query'])) && (trim($_POST['query'])!="")) {
echo json_encode($_POST['query']);
$con=mysqli_connect("db credentials") or die("Error connecting to database: ".mysql_error());
mysqli_select_db($con,"genealogiskforum_dk_db5");
/* the name of database we'are working in */
mysqli_set_charset($con,"utf8");
// This is an example of config.php
?>
<?php
$query = trim($_POST['query']);
//print "query=".$query;
// gets value sent over search form
$min_length = 2;
// you can set minimum length of the query if you want
if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
$query = htmlspecialchars($query,ENT_QUOTES,"utf-8");
// changes characters used in html to their equivalents, for example: < to >
$query = mysqli_real_escape_string($con, $query);
// makes sure nobody uses SQL injection
$raw_results = mysqli_query($con, "SELECT * FROM stednavne
WHERE (`Stednavn` LIKE '%".$query."%') OR (`Sogn`='$query') OR (`Amt`='$query') OR (`Herred`='$query')") or die(mysql_error());
if(mysqli_num_rows($raw_results) > 0){
echo "<table><tr><th>Stednavn</th> <th>Sogn</th> <th>Herred</th> <th>Amt</th> <th>Vis kort</th> </tr> " .$results['Stednavn'];
//Vis tabel med overskrifter
while($row = $result=mysqli_fetch_array($raw_results)) {
echo "<tr><td>" . $row["Stednavn"]. "</td><td>";
if ($row["Lating"]=="")
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>" . $row["Kort"]. "<td>";
else
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>". "<a href=\"".$row["Lating"]."\"target=\"_blank\">" . $row["Kort"]. "<td>". "<td>". "</a>";
echo "</td></tr>";
}
echo "</table>";
}else{ // if there is no matching rows do following
echo "No results";
}
}else{ // if query length is less than minimum
echo "Minimum length is ".$min_length;
}
mysqli_close($con);
}
?>
<div class="w3-row" style="width:100%; height:50px;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-row" style="width:100%; height:500px;"> <!-- for content inside this column -->
<input id="g_map" class="controls" type="text" placeholder="Søg sted" style="padding-top:10px; padding-bottom:10px; margin-top: 10px; border-radius: 25px; border: 1px solid #cccccc; height:40px; width:250px;" value="">
<div id="map" style="width:90%; height:100%; margin-top:20px; padding-top:20px; border: 2px solid #cccccc"></div>
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var deFaultPlace=sessionStorage.getItem('default');
var coorDnt=JSON.parse(sessionStorage.getItem('coordinates'));
//{lat: 55.6736841, lng: 12.568147100000033}
//console.log(JSON.parse(coorDnt));
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center:(function (){
if(coorDnt){
return coorDnt;
}else{ return {lat: 55.6736841, lng: 12.568147100000033} }
})() ,
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
input_1.value=places["0"].address_components["0"].long_name+' '+places["0"].address_components[1].long_name;
sessionStorage.setItem('default',JSON.stringify(places));
sessionStorage.setItem('coordinates',JSON.stringify({lat:places["0"].geometry.location.lat(),lng:places["0"].geometry.location.lng()}));
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
console.log(e.keyCode);
input_1.value=this.value;
if(e.keyCode===13){
input_1.parentNode.submit();
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
var cells=document.getElementsByTagName('tr').children;
if(cells.length){
for(var i=0;i<cells.length;i++){
cells[i][4].addEventListener('click',function(){
var Stednavn=cells[i][0].innerHTML;
var Sogn=cells[i][1].innerHTML;
var Amt=cells[i][3].innerHTML;
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
})
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARtV9mTV01IPpfc4mQUhOysce5YedUN0w&libraries=places&callback=initAutocomplete"
async defer></script>
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile" style="width:16%; margin-top: 150px; margin-left: 40px; margin-bottom:10px; border: solid 1px #cccccc;">
<img src= "skilte.jpeg" alt="Hvilken vej" style="width:100%;">
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<div class="w3-col w3-mobile" style="width:22%; float: right; margin-top:0px; background-color:#666666; border-top: solid 1px #f6f6f6; border-left: solid 1px #f6f6f6;">
<!-- Sidebar linkmenu start-->
<a href= "https://genealogiskforum.dk/Login/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Login </a> <br>
<a href= "https://genealogiskforum.dk/brugeroprettelse/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Registrer </a> <br>
<a href= "https://genealogiskforum.dk/bestil_slaegtstrae/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Bestil slægtstræ </a> <br>
<a href= "https://genealogiskforum.dk/om_gf/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Om Genealogisk forum </a> <br>
<a href= "https://genealogiskforum.dk/medlemmer/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Medlemmer </a> <br>
<a href= "https://genealogiskforum.dk/tips_vejledninger/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Tips og vejledninger </a> <br>
<a href= "https://genealogiskforum.dk/kontakt/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Kontakt </a> <br>
<a href= "https://genealogiskforum.dk/registrering/OpdaterProfil/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Opdater brugerprofil </a> <br>
<a href= "https://genealogiskforum.dk/registrering/Logout/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Logout </a> <br>
<hr>
<!-- Sidebar linkmenu end-->
<!-- SIdebar meddelelser start-->
<h4> Meddelser fra administrator </h4>
<br>
<div id="blabbox1" style="width: 200px; height: 250px; border: solid
1px black; overflow: auto; background-color: #FFFFFF; margin-left: 15px;">
</div>
<script language="javascript" type="text/javascript">
var blabsettings = new Array()
blabsettings['object']="blabbox1"
blabsettings['blabtype']="normalusergroups"
blabsettings['number']=5
blabsettings['refresh']=30
blabsettings['datetoday']="!A! ago"
blabsettings['dateearlier']="!D!/!M!/!Y! !H!:!I!:!S!"
blabsettings['showimage']=true
blabsettings['messagelinks']=true
blabsettings['loadmore']="Load older messages"
blabsettings['userpage']="userprofile.php";
blabsettings['about']="";
startblab(blabsettings)
</script>
<hr>
<!-- Sidebar meddelelser end-->
<!-- Sidebar Hvem er online start-->
<h4> Hvem er online </h4>
<hr>
<div class= "w3-container">
<ul class="slwhoisonline" style= "list-style-type: none; background-color:#666666; padding-left: 0px; padding-top:0px; margin-top:0px; padding-bottom:25px; margin-bottom:25px;">
<?php
if (function_exists('sl_whoisonline'))
sl_whoisonline('<li><img src="***profileimage***" style="padding-bottom: 5px;width: 30px;"><span style="font-family:Helvetica;font-size: 11px; color: #E6E6E6;"> ***name***</span></li>');
?>
</ul>
</div>
<!-- Sidebar Hvem er online end-->
<!-- Donate, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc;">
<br>
<h6>Din hjælp til at genealogiskforum.dk fortsat kan være gratis er af stor værdi for alle medlemmer, og vil være meget højt påskønnet.</h6>
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3WCQ75DT5F8BL">
<input type="image" src="https://www.paypalobjects.com/da_DK/DK/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – den sikre og nemme måde at betale på nettet.">
<img alt="" border="0" src="https://www.paypalobjects.com/da_DK/i/scr/pixel.gif" width="1" height="1">
</form>
<br>
</div>
<!-- Donate, end-->
<!-- Ad, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc; padding-top:10px; padding-bottom: 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="7429817725"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Ad, end-->
</div>
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-black" style="border-top: 1px solid #f6f6f6">
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 66%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman ©
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 20px;" > Samarbejdspartnere
</div>
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
Statens arkiver <br> Webtrees <br> Simple Machines Forum <br> Vibralogix
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
DIS Odense <br> <br> <br>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer end-->
</body>
</html>
It fires agains the database query but not against the map when hitting both Enter key and the submit button.
The input field in the map is in focus, but it does not fire.
See it here: http://www.kroweb.dk/gfdev/stednavne/leon_stednavne2.php
The input field in the map is in focus, but it does not fire.
See it here: http://www.kroweb.dk/gfdev/stednavne/leon_stednavne2.php
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
I can see you have changed a lot in the script, and that you have added an id to the submit button.
Is there anywhere else in the code you have changed something?
Is there anywhere else in the code you have changed something?
Well - actually the map is not working at all now, but the searchfield at the map fiires against the database query too.
The total code looks like this now, but perhaps we should just post the sections that change in stead of the total code??
The total code looks like this now, but perhaps we should just post the sections that change in stead of the total code??
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
$groupswithaccess="PUBLIC";
require_once("../slpw/sitelokpw.php");
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Presentation/upload</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
#target {
width: 345px;
}
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
table, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 16px;
font-weight: bold;
text-align: left;
}
table, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: arial;
font-size: 11px;
font-weight: bolder;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<div class="w3-row" style="background-color:#666666">
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; height: 80px; background-color:#666666;">
<div class="w3-container w3-hide-small">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:60px"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="8001567329"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="w3-col w3-mobile" style="width: 65%; margin:0; height: 80px; background-color:#666666;">
<div class="w3-container">
<input type="text" style="-webkit-font-smoothing:antialiased;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;font-family: Lucida Blackletter; text-docoration:none; font-weight:bold; font-size: 48px; text-align:center; text-shadow: 5px 5px 10px #191919;color: #FFFFFF; background-color:#666666; margin-left:0px; border-style:none; height:80px;" value="Genealogisk forum Stednavne">
</div>
</div>
<div class="w3-col w3-mobile" style="width: 10%; padding-left: 5px; height:80px; background-color:#666666;">
<div class="w3-container">
<input type="image" style= "margin-top: 5px; margin-buttom: 5px; margin-right: 5 px; width: 70px; background-color: #666666;" <img src= "<?php echo $slprofileimage;?>">
</div>
</div>
</div>
<!-- Page Header end-->
<!-- Top Menubar start-->
<div class="w3-row">
<div class="w3-bar w3-black w3-mobile" style="font-family: sans-serif; font-size: 0.8rem; font-weight: lighter; padding-top: 8px; padding-left: 375px; border-top: 1px solid #f6f6f6; height: 45px; ">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialogforum" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gf magasin</a>
<a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Gravsten</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button w3-hide-small w3-hover-text-blue">Værktøjer</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">☰</a>
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-black">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-blue">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-blue">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-blue">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button w3-hover-text-blue">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-blue">Om Arkivalier</a>
</div>
</div>
</div>
</div>
<div id="MyMenu" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium">
<a href="https://genealogiskforum.dk" class="w3-bar-item w3-button">Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button">Slægtstræ</a>
<a href="https://genealogiskforum.dk/dialog" class="w3-bar-item w3-button">Dialogforum</a>
<a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button">Gf magasin</a>
<a href="https://genealogiskforum.dk/tools" class="w3-bar-item w3-button">Værktøjer</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Arkivalier</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button">Lægdsruller</a>
<a href="http://genealogiskforum.dk/krabsen.php" class="w3-bar-item w3-button">Krabsen</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button">Om Arkivalier</a>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("MyMenu");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:47%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px; ">
<!-- Søge felt til steder -->
<form action="" form title="Skriv evt. bare en del af det sted du søger et sogn. Hvis du søger et Sogn skal du skrive HELE Sognets navn" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg sted eller sogn" style="height:25px;border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 11.5px; padding-left:10px;" name="query" />
<input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="submit" id="submit_1" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
</form>
<?php
if ((isset($_POST['query'])) && (trim($_POST['query'])!="")) {
$con=mysqli_connect("db credentials") or die("Error connecting to database: ".mysql_error());
mysqli_select_db($con,"genealogiskforum_dk_db5");
/* the name of database we'are working in */
mysqli_set_charset($con,"utf8");
// This is an example of config.php
?>
<?php
$query = trim($_POST['query']);
//print "query=".$query;
// gets value sent over search form
$min_length = 2;
// you can set minimum length of the query if you want
if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
$query = htmlspecialchars($query,ENT_QUOTES,"utf-8");
// changes characters used in html to their equivalents, for example: < to >
$query = mysqli_real_escape_string($con, $query);
// makes sure nobody uses SQL injection
$raw_results = mysqli_query($con, "SELECT * FROM stednavne
WHERE (`Stednavn` LIKE '%".$query."%') OR (`Sogn`='$query') OR (`Amt`='$query') OR (`Herred`='$query')") or die(mysql_error());
if(mysqli_num_rows($raw_results) > 0){
echo "<table><tr><th>Stednavn</th> <th>Sogn</th> <th>Herred</th> <th>Amt</th> <th>Vis kort</th> </tr> " .$results['Stednavn'];
//Vis tabel med overskrifter
while($row = $result=mysqli_fetch_array($raw_results)) {
echo "<tr><td>" . $row["Stednavn"]. "</td><td>";
//if ($row["Lating"]=="")
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>" . $row["Kort"]. "<td>";
//else
//echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>". "<a href=\"".$row["Lating"]."\"target=\"_blank\">" . $row["Kort"]. "<td>". "<td>". "</a>";
echo "</td></tr>";
}
echo "</table>";
}else{ // if there is no matching rows do following
echo "No results";
}
}else{ // if query length is less than minimum
echo "Minimum length is ".$min_length;
}
mysqli_close($con);
}
?>
<div class="w3-row" style="width:100%;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-row" style="width:100%; height:500px;"> <!-- for content inside this column -->
<!-- DB update form start-->
<div class="w3-col w3-mobile" style="width:65%; margin-top: 15px; margin-left: 10px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">
<form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="post">
<h5> Tilføj stednavn</h5>
<div class="w3-container">
<div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, Sogn, og Amt skal udfyldes</div>
</div>
<hr style= "margin-left: 15px; width: 90%; border-color: #9F5584;">
<input type="hidden" name="id" value="">
<input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= ""style= "color: #9F5584; font-weight: bold;"required>
<input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;"required>
<input type="text" placeholder= "Kort" name= "kort" id="Kort" value="ℹ️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>
<input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Opdater">
</form>
<?php if (isset($_SESSION['response'])): ?>
<?php
$response = json_decode($_SESSION['response']);
unset($_SESSION['response']);
?>
<div class="message <?php echo $response->success ? "success" : "error" ?>">
<?php echo $response->message; ?>
</div>
<?php endif ?>
</div>
<!-- DB update form end-->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile w3-hide-small w3-hide-medium" style="width:30%; height: 350px;">
<input id="g_map" class="controls" type="search" placeholder="Søg sted" style=" margin-top: 10px; margin-left: 40px; height:31px; width:175px; background-color:#f6f6f6; border-radius: 5px; color: #9F5584; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="">
<div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:20px; padding-top:20px; border: 2px solid #cccccc;"></div>
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var deFaultPlace=sessionStorage.getItem('default');
var coorDnt=JSON.parse(sessionStorage.getItem('coordinates'));
//{lat: 55.6736841, lng: 12.568147100000033}
//console.log(JSON.parse(coorDnt));
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center:(function (){
if(coorDnt){
return coorDnt;
}else{ return {lat: 55.3290605, lng: 10.23529080000003} }
})() ,
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
input_1.value=places["0"].address_components["0"].long_name+' '+places["0"].address_components[1].long_name;
sessionStorage.setItem('default',JSON.stringify(places));
sessionStorage.setItem('coordinates',JSON.stringify({lat:places["0"].geometry.location.lat(),lng:places["0"].geometry.location.lng()}));
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
console.log(e.keyCode);
input_1.value=this.value;
if(e.keyCode===13){
input_1.parentNode.submit();
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
var cells=document.getElementsByTagName('tr').children;
if(cells.length){
for(var i=0;i<cells.length;i++){
cells[i][4].addEventListener('click',function(){
var Stednavn=cells[i][0].innerHTML;
var Sogn=cells[i][1].innerHTML;
var Amt=cells[i][3].innerHTML;
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
})
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARtV9mTV01IPpfc4mQUhOysce5YedUN0w&libraries=places&callback=initAutocomplete"
async defer></script>
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<div class="w3-col w3-mobile" style="width:21%; float: right; margin-top:0px; background-color:#666666; border-top: solid 1px #f6f6f6; border-left: solid 1px #f6f6f6;">
<!-- Sidebar linkmenu start-->
<a href= "https://genealogiskforum.dk/Login/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Login </a> <br>
<a href= "https://genealogiskforum.dk/brugeroprettelse/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Registrer </a> <br>
<a href= "https://genealogiskforum.dk/bestil_slaegtstrae/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Bestil slægtstræ </a> <br>
<a href= "https://genealogiskforum.dk/om_gf/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Om Genealogisk forum </a> <br>
<a href= "https://genealogiskforum.dk/medlemmer/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Medlemmer </a> <br>
<a href= "https://genealogiskforum.dk/tips_vejledninger/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Tips og vejledninger </a> <br>
<a href= "https://genealogiskforum.dk/kontakt/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Kontakt </a> <br>
<a href= "https://genealogiskforum.dk/registrering/OpdaterProfil/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Opdater brugerprofil </a> <br>
<a href= "https://genealogiskforum.dk/registrering/Logout/" class="w3-hover-text-blue" style="font-family: arial; font-weight: normal; font-size: 11px; color: #cccccc; font-weight: lighter; margin-left:10px;" >Logout </a> <br>
<hr>
<!-- Sidebar linkmenu end-->
<!-- SIdebar meddelelser start-->
<h4> Meddelser fra administrator </h4>
<br>
<div id="blabbox1" style="width: 200px; height: 250px; border: solid
1px black; overflow: auto; background-color: #FFFFFF; margin-left: 15px;">
</div>
<script language="javascript" type="text/javascript">
var blabsettings = new Array()
blabsettings['object']="blabbox1"
blabsettings['blabtype']="normalusergroups"
blabsettings['number']=5
blabsettings['refresh']=30
blabsettings['datetoday']="!A! ago"
blabsettings['dateearlier']="!D!/!M!/!Y! !H!:!I!:!S!"
blabsettings['showimage']=true
blabsettings['messagelinks']=true
blabsettings['loadmore']="Load older messages"
blabsettings['userpage']="userprofile.php";
blabsettings['about']="";
startblab(blabsettings)
</script>
<hr>
<!-- Sidebar meddelelser end-->
<!-- Sidebar Hvem er online start-->
<h4> Hvem er online </h4>
<hr>
<div class= "w3-container">
<ul class="slwhoisonline" style= "list-style-type: none; background-color:#666666; padding-left: 0px; padding-top:0px; margin-top:0px; padding-bottom:25px; margin-bottom:25px;">
<?php
if (function_exists('sl_whoisonline'))
sl_whoisonline('<li><img src="***profileimage***" style="padding-bottom: 5px;width: 30px;"><span style="font-family:Helvetica;font-size: 11px; color: #E6E6E6;"> ***name***</span></li>');
?>
</ul>
</div>
<!-- Sidebar Hvem er online end-->
<!-- Donate, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc;">
<br>
<h6>Din hjælp til at genealogiskforum.dk fortsat kan være gratis er af stor værdi for alle medlemmer, og vil være meget højt påskønnet.</h6>
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3WCQ75DT5F8BL">
<input type="image" src="https://www.paypalobjects.com/da_DK/DK/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – den sikre og nemme måde at betale på nettet.">
<img alt="" border="0" src="https://www.paypalobjects.com/da_DK/i/scr/pixel.gif" width="1" height="1">
</form>
<br>
</div>
<!-- Donate, end-->
<!-- Ad, start-->
<div class= "w3-container" style="background-color: white; text-align: center; border: 1px solid #cccccc; padding-top:10px; padding-bottom: 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3626513934315518"
data-ad-slot="7429817725"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Ad, end-->
</div>
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-black" style="border-top: 1px solid #f6f6f6">
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 66%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman ©
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 20px;" > Samarbejdspartnere
</div>
<div class="w3-row">
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
Statens arkiver <br> Webtrees <br> Simple Machines Forum <br> Vibralogix
</div>
</div>
<div class="w3-col w3-mobile" style=" width: 50%; padding-top: 12px; padding-left: 10px; background-color:black;">
<div class="w3-container" style="text-align: left; font-family: palatino; font-weight: lighter; font-size: 14px;" >
DIS Odense <br> <br> <br>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer end-->
</body>
</html>
As I see it we are working in the four elements below. Hope you agree :)
<input type="search" id="input_1" placeholder= "Søg sogn" style="height:25px;border: 1px solid #666666;border-radius:2px;color:#666666;" name="query" /><input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/> <input id="g_map" class="controls" type="search" placeholder="Søg sted" style=" margin-top: 10px; margin-left: 80px; height:31px; width:175px; background-color:#f6f6f6; border-radius: 5px; color: #9F5584; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value=""> <script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var deFaultPlace=sessionStorage.getItem('default');
var coorDnt=JSON.parse(sessionStorage.getItem('coordinates'));
//{lat: 55.6736841, lng: 12.568147100000033}
//console.log(JSON.parse(coorDnt));
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center:(function (){
if(coorDnt){
return coorDnt;
}else{ return {lat: 55.3290605, lng: 10.23529080000003} }
})() ,
zoom: 15, disableDefaultUI: true, mapTypeControl: true, streetViewControl: true,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
input_1.value=places["0"].address_components["0"].long_name+' '+places["0"].address_components[1].long_name;
sessionStorage.setItem('default',JSON.stringify(places));
sessionStorage.setItem('coordinates',JSON.stringify({lat:places["0"].geometry.location.lat(),lng:places["0"].geometry.location.lng()}));
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
console.log(e.keyCode);
input_1.value=this.value;
if(e.keyCode===13){
input_1.parentNode.submit();
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
var cells=document.getElementsByTagName('tr').children;
if(cells.length){
for(var i=0;i<cells.length;i++){
cells[i][4].addEventListener('click',function(){
var Stednavn=cells[i][0].innerHTML;
var Sogn=cells[i][1].innerHTML;
var Amt=cells[i][3].innerHTML;
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
})
}
}
</script>EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
So far so good...Well..To review the issues..
You need when you typed in the input element that I added an id="input_1" (img below)
you want to typed the same string in the input element in google map that I added an id="g_map" (img below)
You want to fire php query when you select a place or hit the enter button in "g_map" input element?
I can't have access at the link above ( http://www.kroweb.dk/gfdev/stednavne/leon_stednavne2.php)
You need when you typed in the input element that I added an id="input_1" (img below)
you want to typed the same string in the input element in google map that I added an id="g_map" (img below)You want to fire php query when you select a place or hit the enter button in "g_map" input element?I can't have access at the link above ( http://www.kroweb.dk/gfdev/stednavne/leon_stednavne2.php)
Almost right.
Basically I only need one search box - the one in the top (input_1). What I want is that when I enter a search string in that box and hit Enter key or click the submit button (Sog) then this searchstring should be active (be fired) against both the database query (as it is mandatory) and against the map.
The reason I have made the map with a searchbox (g_map ) is that I believe that this is the only way that I can perform a serarch in the map without having to put in the lating values - but perhaps I am wrong about that?
That is my basic needs.
What worries me is that this is not working right, and that the second issue (put in below) is not working at all - nothing happens when clicking an icon - it is actually not "clickable".
Basically I only need one search box - the one in the top (input_1). What I want is that when I enter a search string in that box and hit Enter key or click the submit button (Sog) then this searchstring should be active (be fired) against both the database query (as it is mandatory) and against the map.
The reason I have made the map with a searchbox (g_map ) is that I believe that this is the only way that I can perform a serarch in the map without having to put in the lating values - but perhaps I am wrong about that?
That is my basic needs.
What worries me is that this is not working right, and that the second issue (put in below) is not working at all - nothing happens when clicking an icon - it is actually not "clickable".
2. This represents the detailed search. When performing the broader search as mentioned above, a list of possible places will be presented to the user. I have structured the database with a column called Kort holding an Info icon which is linking to another column called Lating. What I need for the detailed is that when the user clicks on the info icon in a specific recird, this should enter AND fire a searchstring in the Google Map with the content form the columns in the database in this sequence: "Stednavn" " (space)" "Sogn" "space) " "Amt".
You should be able to acces the link http://www.kroweb.dk/gfdev/stednavne/leon_stednavne2.php
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
To do this issue we must work without submitting function.To do this I set an ajax call inside the script as you will see.First create a div element at line 393 as you see:
At last replace the script with the following script that contains ajax calls events.
The link that you send is still inactive (I have 403 error)
<div id="list_items"></div>At last replace the script with the following script that contains ajax calls events.
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
console.log(e.keyCode);
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
});
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
var cells=document.getElementsByTagName('tr').children;
if(cells.length){
for(var i=0;i<cells.length;i++){
cells[i][4].addEventListener('click',function(){
var Stednavn=cells[i][0].innerHTML;
var Sogn=cells[i][1].innerHTML;
var Amt=cells[i][3].innerHTML;
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
});
}
}
</script>The link that you send is still inactive (I have 403 error)
This is not working at all.
I have set the <div id="list_items"></div> right after the form, I have removed the php and put into the file ajaxListHtml.php located in in the same folder. I have replaced the script with the one you have submitted here.
There is no map, and no search is working at all.
Take a look at this link: http://kroweb.dk/gfdev/stednavne/leon_stednavne4.php
I have set the <div id="list_items"></div> right after the form, I have removed the php and put into the file ajaxListHtml.php located in in the same folder. I have replaced the script with the one you have submitted here.
There is no map, and no search is working at all.
Take a look at this link: http://kroweb.dk/gfdev/stednavne/leon_stednavne4.php
Sorry - I Made a typo. I am testing now and will get back later
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
YES!! It is working :) Thanks a lot.
See it here: http://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
Just one little thing about this. If you e.g type Allinge in the searchfield and Enter you get the list in the table and you get the location at the map. Excllent :) But if you then put in a new searchstring in the searchfield e.g Allinge Vang and hit Enter, it shows the correct location at the mao, but does not clear the table from the former search in the screen but puts in the new search (twice actual) under the former search. Can we adjust that?
And then we need to look at issue 2. which is not working at all :)
See it here: http://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
Just one little thing about this. If you e.g type Allinge in the searchfield and Enter you get the list in the table and you get the location at the map. Excllent :) But if you then put in a new searchstring in the searchfield e.g Allinge Vang and hit Enter, it shows the correct location at the mao, but does not clear the table from the former search in the screen but puts in the new search (twice actual) under the former search. Can we adjust that?
And then we need to look at issue 2. which is not working at all :)
Give me some time to work on this...It's my pleasant to help you
Hey Peter,
Looking over your requirements, they seem a little out of sync. If you have a list of places in your DB then a search against your DB and Google Maps is very likely to give you different results, which will probably confuse your users. You also say you have an icon and LatLng stored in your DB but then go on to say you want to Google search for Stednavn Sogn Amt. Don't really undestand that part. Surely if you already have the LatLng stored for your place, why do you need to do a search. Surely you just want to drop a marker onto the map at the location specified by the LatLng field ??
My 'guess' here is that you want the user to enter a value into your search field. You then query your own DB to find any matches, and then when they click on a icon next to each DB result, you show that place marker on the map (based on the LatLng that your store in your own DB).
Is my undestanding correct, or am I missing something?
Looking over your requirements, they seem a little out of sync. If you have a list of places in your DB then a search against your DB and Google Maps is very likely to give you different results, which will probably confuse your users. You also say you have an icon and LatLng stored in your DB but then go on to say you want to Google search for Stednavn Sogn Amt. Don't really undestand that part. Surely if you already have the LatLng stored for your place, why do you need to do a search. Surely you just want to drop a marker onto the map at the location specified by the LatLng field ??
My 'guess' here is that you want the user to enter a value into your search field. You then query your own DB to find any matches, and then when they click on a icon next to each DB result, you show that place marker on the map (based on the LatLng that your store in your own DB).
Is my undestanding correct, or am I missing something?
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Thanks Leonidas I am looking forward to see what you can do.
@ Chris: You are guessing 50% right. And yes, I have at Lating column in the database, which I thought that would need when I started this project. During the work with the project, including getting a better knowledge of the possibilities with Google Maps, it seems that there might be no need for that column after all.
What I want is that clicking the icon next to each DB result should grab the values in the database for the columns "Stednavn", "Sogn", "Amt" and enter them as a string into the searchfield of the map separated by spaces (or comma space) and fire that request in the map only. I don't know if this is possible - but I hope :)
@ Chris: You are guessing 50% right. And yes, I have at Lating column in the database, which I thought that would need when I started this project. During the work with the project, including getting a better knowledge of the possibilities with Google Maps, it seems that there might be no need for that column after all.
What I want is that clicking the icon next to each DB result should grab the values in the database for the columns "Stednavn", "Sogn", "Amt" and enter them as a string into the searchfield of the map separated by spaces (or comma space) and fire that request in the map only. I don't know if this is possible - but I hope :)
OK Peter,
Sounds like what you need should be fairly straight forward. I would advise that you break this into 2 parts though so you can test and debug each part separately. The first part would be the DB search. The second part would be the Icon click.
For the first part, you would do a standard query against the DB using the search term from the POST array. When you retrieve the records from the database, you would use those to build your search results table, including a column for the Icon you want to be clickable. The trick here is to build the google search term at this point ("Stednavn", "Sogn", "Amt" etc) and attach it to the Icon. This is easily done usng the HTML5 Data attribute, so your HTML would end up with something like this:
<img src="someIcon.png" data-google="Stednavn Sogn Amt" class="gSearch">
Once you've got all that in place, we can use that to push the value from the data atriibute straight into the Google Map to perform your Map search.
Sounds like what you need should be fairly straight forward. I would advise that you break this into 2 parts though so you can test and debug each part separately. The first part would be the DB search. The second part would be the Icon click.
For the first part, you would do a standard query against the DB using the search term from the POST array. When you retrieve the records from the database, you would use those to build your search results table, including a column for the Icon you want to be clickable. The trick here is to build the google search term at this point ("Stednavn", "Sogn", "Amt" etc) and attach it to the Icon. This is easily done usng the HTML5 Data attribute, so your HTML would end up with something like this:
<img src="someIcon.png" data-google="Stednavn Sogn Amt" class="gSearch">
Once you've got all that in place, we can use that to push the value from the data atriibute straight into the Google Map to perform your Map search.
Thanks Chris,
It sounds easy ... let's see ...
I have doubts about how to write the query - could you please put in an example.
The HTML5 Data attribute Data, i don't know much about, so let's take that in the next round :)
It sounds easy ... let's see ...
I have doubts about how to write the query - could you please put in an example.
The HTML5 Data attribute Data, i don't know much about, so let's take that in the next round :)
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
I don't know the specific structure of your Db tables, but you're already running your query to build your HTML table at around line 421 of your code, so if the info you need is from the same table (i.e. not joined to another table), then just use that info. For the icon column, just use columns from your table to build the string. General idea is this:
<ing src="someIcon.png" data-google="<?php echo $row["column1"] ?> <?php echo $row["column2"] ?> <?php echo $row["column3"] ?> " class="gSearch" />
<ing src="someIcon.png" data-google="<?php echo $row["column1"] ?> <?php echo $row["column2"] ?> <?php echo $row["column3"] ?> " class="gSearch" />
It is the the info from the same table I need. But now I have moved the php code, including the query, to an external file (ajaxListHtml.php). Does that change anything?
The structure of my table is this (not using the Lating column at this moment)
The structure of my table is this (not using the Lating column at this moment)
Doesn't matter if the code is in an external file or not - all you're doing at this point is building your HTML table - exactly the same as you already are except for the addition of the clickable icon ... and all you're doing there is adding some information that you've already queried for. Quick example:
<table>
<?php while ($row = mysqli_fetch_array($raw_results): ?>
<tr>
<td><?php echo $row['column1'] ?></td>
<td><?php echo $row['column2'] ?></td>
<td><?php echo $row['column3'] ?></td>
<td><img src="someIcon.png" class="gSearch" data-google="<?php echo $row['column4'] ?> <?php echo $row['column5'] ?> <?php echo $row['column6'] ?>" /></td>
</tr>
<?php endwhile: ?>
</table>Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Thanks,
I'll work on it, and get back to you.
I'll work on it, and get back to you.
The last link that you posted also don't work...
@Leonidas,
I don't understand why the link not is working for you. It is working here, and there is no access restrictions attached to the page, so it should work.
Try this: https://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
I don't understand why the link not is working for you. It is working here, and there is no access restrictions attached to the page, so it should work.
Try this: https://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
@Chris,
I have some problems adding the line to the build the clickable link.
1. The syntax you use is another than the syntax I use in the code, and I have difficulties to adapt the line into my code. Could you give an example on how to adapt the line into my way of writing the code?
2. The icon is actually not an image, but a sign like this ℹ️. How do I adress that in the line?
My code building the table looks like this:
I have some problems adding the line to the build the clickable link.
1. The syntax you use is another than the syntax I use in the code, and I have difficulties to adapt the line into my code. Could you give an example on how to adapt the line into my way of writing the code?
2. The icon is actually not an image, but a sign like this ℹ️. How do I adress that in the line?
My code building the table looks like this:
$raw_results = mysqli_query($con, "SELECT * FROM stednavne
WHERE (`Stednavn` LIKE '%".$query."%') OR (`Sogn`='$query') OR (`Amt`='$query') OR (`Herred`='$query')") or die(mysql_error());
if(mysqli_num_rows($raw_results) > 0){
echo "<table><tr><th>Stednavn</th> <th>Sogn</th> <th>Herred</th> <th>Amt</th> <th>Vis kort</th> </tr> " .$results['Stednavn'];
//Vis tabel med overskrifter
while($row = $result=mysqli_fetch_array($raw_results)) {
echo "<tr><td>" . $row["Stednavn"]. "</td><td>";
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>" . $row["Kort"]. "<td>";
echo "</td></tr>";
}
echo "</table>";
}else{ // if there is no matching rows do following
echo "No results";
}
Peter in the code change the input submit button from this:
<input type="submit" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/><input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/> <script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
console.log(e.keyCode);
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
console.log(this.parentNode.childNodes[0]);
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
});
}
}
}
cellClick();
</script>
Here you go Peter. It make sense when you're coding like this to lay things out in an easy to read format, otherwise it just becomes a jumble of random code and it's difficult to see what's going on. Take a look at this:
echo "<table><tr><th>Stednavn</th><th>Sogn</th><th>Herred</th><th>Amt</th><th>Vis kort</th><th>Link</th></tr>";
while($row = mysqli_fetch_array($raw_results)) {
$searchTerm = sprintf("%s %s %s", $row["Stednavn"], $row["Sogn"], $row["Amt"]);
echo "<tr>";
echo "<td>" . $row["Stednavn"] . "</td>";
echo "<td>" . $row["Sogn"] . "</td>";
echo "<td>" . $row["Herred"] . "</td>";
echo "<td>" . $row["Amt"] . "</td>";
echo "<td>" . $row["Kort"] . "</td>";
echo "<td><a href='#' data-google='" . $searchTerm . "' class='gSearch'>i</a></td>";
echo "</tr>";
}Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Hey - we are almost there :)
Everything works. And the searchstring goes into the searchfield of the map, but it des not fire.
Perhaps it should also go into the primary searchfield to be fired from there.
If we can fix that, we are done :)
Everything works. And the searchstring goes into the searchfield of the map, but it des not fire.
Perhaps it should also go into the primary searchfield to be fired from there.
If we can fix that, we are done :)
Thanks Chris ,
I am trying my best to be better to make the code easy readable. But I am fully aware that I am not there yet :)
Well - anyway it seems that Leonidas are very close to have solved both issues - so I will just wait for his next response.
Thanks for your help :)
I am trying my best to be better to make the code easy readable. But I am fully aware that I am not there yet :)
Well - anyway it seems that Leonidas are very close to have solved both issues - so I will just wait for his next response.
Thanks for your help :)
Once you've got your clickable link in place, then you just need to add the event handler to your script to set the search input and then trigger the 'enter' key press:
$('#list_items').on('click', '.gSearch', function(e) {
e.preventDefault();
var input = $('#g_map').get(0);
input.value = $(this).data('google');
google.maps.event.trigger(input, 'focus')
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
});
});EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Adding this ti the script does not seem to make any changes ...
OK Peter. As you seem to be pursuing 2 different solutions here, they're probably clashing. I'll let you carry on with Leonidas' code to save any confusion.
If you want to post a link to your working page I'll take a look
If you want to post a link to your working page I'll take a look
This is the page where I have added your code to the script.
http://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
http://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
That page doesn't seem to work at all. The search button seems to have disappeared !!
It is working :) Just use the Enter button. Try with Allinge in the searchfield and hit Enter. The try to click one of the icons in the list.
I have hidden the search button since we are really not using it anyway.
I have hidden the search button since we are really not using it anyway.
OK. That seems to search your database and the google map (which I've already pointed out could lead to confusion). You haven't implemented my code regarding the link and data attributes, so any jQuery code I've sent you won't work. You've also just dropped the jQuery code into a completely different function so there's no way it'll work.
If you're close to a working solution with Leonidas, then go with that.
If you're close to a working solution with Leonidas, then go with that.
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Right. As I said earlier, I will just wait for Leonidas next post before I do anything else.
I'll get back to all your valuable input later if needed. Thanks a lot :)
I'll get back to all your valuable input later if needed. Thanks a lot :)
@Leonidas:
One more little thing in addition to this
That is that when clicking an icon it should only influence the map, and not the database query. I believe it is influencing the database query now because if I go to the searchfield in the map after having clicked an icon, and navigates to far right of this searchfield, the same search string shows in the main searchfield, and when hitting the Enter key it performs a search against the database which makes no sense at all, while it at the same time performs the correct search against the map.
One more little thing in addition to this
Everything works. And the searchstring goes into the searchfield of the map, but it des not fire.
Perhaps it should also go into the primary searchfield to be fired from there.
If we can fix that, we are done :)
That is that when clicking an icon it should only influence the map, and not the database query. I believe it is influencing the database query now because if I go to the searchfield in the map after having clicked an icon, and navigates to far right of this searchfield, the same search string shows in the main searchfield, and when hitting the Enter key it performs a search against the database which makes no sense at all, while it at the same time performs the correct search against the map.
Sorry Peter about my answers time...For some reason the links doesn't work.If it is easy for you to repost a valid link to debug the code so it is more easy for me to see what is going on
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Try this:
http://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
Or try it with the https:// prefix. It is working and other can access it :)
http://kroweb.dk/gfdev/stednavne/leon_stednavne3.php
Or try it with the https:// prefix. It is working and other can access it :)
The same result...:(
I simply don't understand why you are forbidden to access the site.
I have tried to move it to this location:
http://navnpaasted.dk/stednavne/leon_stednavne3.php
Hope this works better
I have tried to move it to this location:
http://navnpaasted.dk/stednavne/leon_stednavne3.php
Hope this works better
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
It's Ok!!!! this
Check Peter the following script (replace the old one)
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
console.log(e.keyCode);
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
console.log(this.parentNode.childNodes[0]);
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
input_2.focus();
input_2.value=Stednavn+' '+Sogn+' '+Amt;
});
}
}
}
cellClick();
</script>
Perfect that you can see what we are doing now :)
This change in the script does not make any visible changes.
You can see, if you try to put Allinge in the searchfield, and then click on one of the icons in the list, that there is two query strings, which there should not be (I am dumping the 'query') and which probably is creating the "nonsense" query against the database.
Anyway it still does not fire the map.
This change in the script does not make any visible changes.
You can see, if you try to put Allinge in the searchfield, and then click on one of the icons in the list, that there is two query strings, which there should not be (I am dumping the 'query') and which probably is creating the "nonsense" query against the database.
Anyway it still does not fire the map.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Peter replace the input element that is type submit and value=Nulstil with this:
<input type="button" id="submit_1" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/> <script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('submit_1');
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
});
input_2.addEventListener('keyup',function(){
input_1.value=this.value;
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
});
}
}
}
cellClick();
</script>
Changing the Reset button from type "submit" to type "button"only mens that is not working as a reset button which is its genereal purpose :)
The serachbutton I have hidden because we really don't use it. We use the Enter key in stead which I believe users are OK familiar with, so I believe that we don't have to worry more about a searchbutton.
Changing the script brings us a little further down the path towards succes :)
Now we don't get the "nonsense" query against the database, and the initial query is not disturbed when clicking an icon.
I can also see that we are trying to fire the searchstring in the map, but it doesn't actually fire, and if I go into the maps searchstring, and navigate to the far right and press Enter, it fires, but then we get this "nonsense" query against the database again.
The serachbutton I have hidden because we really don't use it. We use the Enter key in stead which I believe users are OK familiar with, so I believe that we don't have to worry more about a searchbutton.
Changing the script brings us a little further down the path towards succes :)
Now we don't get the "nonsense" query against the database, and the initial query is not disturbed when clicking an icon.
I can also see that we are trying to fire the searchstring in the map, but it doesn't actually fire, and if I go into the maps searchstring, and navigate to the far right and press Enter, it fires, but then we get this "nonsense" query against the database again.
So...I hope that we are at the end of the road :)
If you want to keep the Nullstil button as Submit type and reset functionality change the type from button to submit..
And add this script
If you want to keep the Nullstil button as Submit type and reset functionality change the type from button to submit..
<input type="submit" id="submit_1" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>And add this script
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
console.log(res);
cellClick();
});
}
});
});
}
}
}
cellClick();
</script>EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
I believe that we are close now.
There is not significant changes with the latest script.
I think the easiest is that you test it your self.
Tru with "Nygade" in the searchfield, an click on one fo the icons.
At the first search it is now generating two query strings against the database, and it is still not firing the search against the map search field.
There is not significant changes with the latest script.
I think the easiest is that you test it your self.
Tru with "Nygade" in the searchfield, an click on one fo the icons.
At the first search it is now generating two query strings against the database, and it is still not firing the search against the map search field.
@Leonidas,
I've got an idea.
Could we change the scope a bit. I thought that if we could use the initial search only, we could drop the icon-click thing.
So - is it possible that the initial search could be content of the searchstring + content of the column "Amt?
If we can do that, and get it working, we can drop the icon-thing that gives us a some problems.
Let me hear your opinion on that :)
I've got an idea.
Could we change the scope a bit. I thought that if we could use the initial search only, we could drop the icon-click thing.
So - is it possible that the initial search could be content of the searchstring + content of the column "Amt?
If we can do that, and get it working, we can drop the icon-thing that gives us a some problems.
Let me hear your opinion on that :)
Forget the post above. It is not a good idea. Because many places with similar names exist in several "Amt" - and which "Amt" should you choose ...
So - we have to travel a couple of miles more on our present path :)
Sorry for the confusion.
So - we have to travel a couple of miles more on our present path :)
Sorry for the confusion.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Don't worry.The most fascinating thing in programming is the debugging..(for me)
Pls add the
Pls add the
console.log(res);}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
console.log(res);
cellClick();
});
When I typed eg Nygade I have this screen results.
As we see the first searchinput element that we have started type has the string "Nygade" and the second searchinput (inside the map) has also the string and the map results.
Then I hit the enter and we see this:
In this img the map is setting a marker into the map because it has get only one place.You can see it in the console with the yellow mark that the we have only one location.
Now when I click in the first i icon we have this screen image:
In this case I have a double query get result without double fire click event.In the map we don't have any other search results but when I clicked at the second i icon we have this image:
In this image we note the map's searchinput is activated and it produce results..That means that the search in map works normally.For some reason it can't find the first location (see previous image) so it didn't post results.
Now in the case that we clicked in the first i row...We have this image:
The response that I have seems in the console.And it is one response.
I think hat something is going wrong with the php code and queries...
As we see the first searchinput element that we have started type has the string "Nygade" and the second searchinput (inside the map) has also the string and the map results.Then I hit the enter and we see this:
In this img the map is setting a marker into the map because it has get only one place.You can see it in the console with the yellow mark that the we have only one location.Now when I click in the first i icon we have this screen image:
In this case I have a double query get result without double fire click event.In the map we don't have any other search results but when I clicked at the second i icon we have this image:
In this image we note the map's searchinput is activated and it produce results..That means that the search in map works normally.For some reason it can't find the first location (see previous image) so it didn't post results.Now in the case that we clicked in the first i row...We have this image:
The response that I have seems in the console.And it is one response.I think hat something is going wrong with the php code and queries...
I have added the line in the script as you request.
I don't think there is anything wrong with the php code - it has been working up until now.
The code is here:
I don't think there is anything wrong with the php code - it has been working up until now.
The code is here:
<?php
if ((isset($_POST['query'])) && (trim($_POST['query'])!="")) {
$con=mysqli_connect(db credentials") or die("Error connecting to database: ".mysql_error());
mysqli_select_db($con,"genealogiskforum_dk_db5");
/* the name of database we'are working in */
mysqli_set_charset($con,"utf8");
// This is an example of config.php
?>
<?php
$query = trim($_POST['query']);
//print "query=".$query;
// gets value sent over search form
$min_length = 2;
// you can set minimum length of the query if you want
if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
$query = htmlspecialchars($query,ENT_QUOTES,"utf-8");
// changes characters used in html to their equivalents, for example: < to >
$query = mysqli_real_escape_string($con, $query);
// makes sure nobody uses SQL injection
$raw_results = mysqli_query($con, "SELECT * FROM stednavne
WHERE (`Stednavn` LIKE '%".$query."%') OR (`Sogn`='$query') OR (`Amt`='$query') OR (`Herred`='$query')") or die(mysql_error());
var_dump($query);
if(mysqli_num_rows($raw_results) > 0){
echo "<table><tr><th>Stednavn</th> <th>Sogn</th> <th>Herred</th> <th>Amt</th> <th>Vis kort</th> </tr> " .$results['Stednavn'];
//Vis tabel med overskrifter
while($row = $result=mysqli_fetch_array($raw_results)) {
echo "<tr><td>" . $row["Stednavn"]. "</td><td>";
//if ($row["Lating"]=="")
echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>" . $row["Kort"]. "<td>";
//else
//echo $row["Sogn"]. "<td>" . $row["Herred"]. "<td>" . $row["Amt"]. "<td>". "<a href=\""."\"target=\"_blank\">" . $row["Kort"]. "<td>". "<td>". "</a>";
echo "</td></tr>";
}
echo "</table>";
}else{ // if there is no matching rows do following
echo "No results";
}
}else{ // if query length is less than minimum
echo "Minimum antal tegn er ".$min_length;
}
mysqli_close($con);
}
?> EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Instead of where condition loop set if(){...} line 29 php code.
Lol we just have 58 post already :) To clear the all problem.Do you want after the click at icon to execute a sequential search the google Map until it returns valid places?
I'm not sure that I quite understand what you are saying above here.
The WHERE condition is a SQL condition - I can't replace that with if() ..... If I change the while condition in line 39, there is no loop, and the first result that meets the search condition is shown in the list - and that is not what I need.
And yes - I want that the map is executing a search of its own when clicking an icon - a search that is not affecting the database query.
Anyway - the map is making no search at all as it is now. So entering a searchstring in the main searchfield (or in the maps searchfield) and pressing Enter only have effect on the database query right now.
"Nygade" is perhaps not a good choice. Use "Allinge" as searchstring for test in stead.
The WHERE condition is a SQL condition - I can't replace that with if() ..... If I change the while condition in line 39, there is no loop, and the first result that meets the search condition is shown in the list - and that is not what I need.
And yes - I want that the map is executing a search of its own when clicking an icon - a search that is not affecting the database query.
Anyway - the map is making no search at all as it is now. So entering a searchstring in the main searchfield (or in the maps searchfield) and pressing Enter only have effect on the database query right now.
"Nygade" is perhaps not a good choice. Use "Allinge" as searchstring for test in stead.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
I don't understand why the map is not working at all anymore - and that goes for the map in all versions that we have worked with. And I mean that it is not working at all
IF - and it does not happen every time - something (most aften not relevant to the input in the searchstring) is drilling down in the maps searchfield when entering something, and I choose it from the drill down, I go the middle of the Pacific Ocean.
Is this a Google Maps problem or is it a problem that we can deal with.
IF - and it does not happen every time - something (most aften not relevant to the input in the searchstring) is drilling down in the maps searchfield when entering something, and I choose it from the drill down, I go the middle of the Pacific Ocean.
Is this a Google Maps problem or is it a problem that we can deal with.
Check the google Map API if has exceed limit usage Google Map key limits.
Also check the console for a relative warning
Also check the console for a relative warning
It says that we have exeeded the limit of 25.000 map loads per 24 hours. For me that is not understandable - something must be generating map loads automatically, otherwise it is quite impossible for us to reach 25.000 loads per day. That I believe we can do something about. Could you check the scripting - it is the only place this could come from.
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Maybe is the autocomplete searches (places service limits)
Where is that scr dump from?
I get this at this page: https://developers.google.com/maps/documentation/javascript/usage
I get this at this page: https://developers.google.com/maps/documentation/javascript/usage
OK - I see it - on that same page a little further down the page ....
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
OK - I have now set up a billing plan which allows up to 150.000 requests per day. And the map seems to be working again.
But we need to get solution this working right. If you have doubts that it is possible using your methods, please say so, because then I will try to solve the problem another way.
But we need to get solution this working right. If you have doubts that it is possible using your methods, please say so, because then I will try to solve the problem another way.
Peter I think that we are close enough..
Replace and test the script.When you are clicking in the icon then the table is removing.And then it doesn't make query search in you database until you type in the search input 1.
Replace and test the script.When you are clicking in the icon then the table is removing.And then it doesn't make query search in you database until you type in the search input 1.
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var scopeVar;
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
cellClick();
});
});
input_1.addEventListener('keyup',function(){
scopeVar='';
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
$('#list_items > table').remove();
scopeVar='GOOGLE';
});
}
}
}
cellClick();
</script>
It still does not fire the request in the map.
And I really need that the table should stay there when clicking an icon
And I really need that the table should stay there when clicking an icon
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
... at least I need the line that we have clicked a link in to remain on the page when clicking the icon ....
Remove line 123 in the script
Done.
Now the table stays there, but the request does still not fire in the map.
Now the table stays there, but the request does still not fire in the map.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Does the map not search for any choice we make in the field?When I choose some cities, it appears below the input map field a multipule selection field.
The Map seaeches when we enter a searcgstring in the primary searchfield and hit Enter. So far so good.
The map doesn't search when we click an icon - and that's not so good :)
Yes - it might show some choices in a drop-down, but the searchstring is NOT fired in the map.
The map doesn't search when we click an icon - and that's not so good :)
Yes - it might show some choices in a drop-down, but the searchstring is NOT fired in the map.
Has the map searchinput this results when you clicked on icon?
Do you think that is the cause that the map doesn't fire the searchinput accordion element?
Do you think that is the cause that the map doesn't fire the searchinput accordion element?
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
No - it looks looks this
Or like this:
And if I go into the searchfield on the map and fires this request manually, it looks like this (which is what I need it to look when the icon is clicked)
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Peter change this function cellClick() with this:
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
scopeVar='GOOGLE';
});
}
}
}
Thanks Leonidas.
It seems to be working just fine now :)
Just one more little thing. Is it possible, in the script to make a hover function to the cell with the icon, so it is more obvious that tihs cell is clickable?
It seems to be working just fine now :)
Just one more little thing. Is it possible, in the script to make a hover function to the cell with the icon, so it is more obvious that tihs cell is clickable?
Well - I still get that an "You have exeeded your daily quota for this API" in the console.
I have mad a billing plan, and the quota of 150.00 daily requests can not be exeeded ....
Do you have any ideas on what to do about that?
I have mad a billing plan, and the quota of 150.00 daily requests can not be exeeded ....
Do you have any ideas on what to do about that?
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
For mouseover event..I tested and I don't recommend this method because it doesn't fire the search in the map always (you must click again to get the fire event), and if someone mouseover between multiple elements then it forcing the database and the page to do multiple searches in a tiny time intervals. So I suggest to keep the click event.
For the second question
How much visitors and searches do you plan to have the page per day?
For the second question
How much visitors and searches do you plan to have the page per day?
OK - we'll keep it at the click event :)
I don't know haw many visitors I will have per day on this page, but it can easily exeed the 100 text searches (corresponding to 1.000 requests) per day that I see to have now. What I don't understand is, that my billing plan apparently does not work.
I wonder if I have to tie the project together with the billing plan, but I can't figure out how to do that.
I don't know haw many visitors I will have per day on this page, but it can easily exeed the 100 text searches (corresponding to 1.000 requests) per day that I see to have now. What I don't understand is, that my billing plan apparently does not work.
I wonder if I have to tie the project together with the billing plan, but I can't figure out how to do that.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
That's exactly what I allready have done.
Now I have created another project, but how do I attatch the project to the actual project we are working with??
Now I have created another project, but how do I attatch the project to the actual project we are working with??
Check this youtube video. It shows you how to enable billing.
Will do :) Thanks
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Thanks Leonidas,
I have got it working now - not too easy to set up, but now it works :)
Thanks for all your help with this project. It has been a great help, and I am very happy with the solution.
I have got it working now - not too easy to set up, but now it works :)
Thanks for all your help with this project. It has been a great help, and I am very happy with the solution.
ASKER CERTIFIED SOLUTION
membership
Log in or create a free account to see answer.
Signing up is free and takes 30 seconds. No credit card required.
Thanks to Leonidas for a very fine working Solution
Hi @Leonidas,
Would it be much trouble if we need to activate the Search (name="soeg", id="Sog") button again?
I know I took it out od the equation my self at one point (made it hidden), but it seems that my users are requesting it anyway.
I have tried to unhide it for testing, but it does not work at all. Do you think that it is possible to make this button active again?
Would it be much trouble if we need to activate the Search (name="soeg", id="Sog") button again?
I know I took it out od the equation my self at one point (made it hidden), but it seems that my users are requesting it anyway.
I have tried to unhide it for testing, but it does not work at all. Do you think that it is possible to make this button active again?
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Remove the hidden attr and then check the functionality.What exactly do you want to do with this button?If you see the javascript code we use input_1 id and gmap to do the all work.
I did remove the hide attriubute, and the button does not do anything at all right now.
What I want it to do, is to execute precisely the same that is executed when hitting Enter after having put in a search string in the search field.
I am not trained in javascripting, so I am a little worried about doing to much in there my self - I could make a lot af damage I'm sure :)
What I want it to do, is to execute precisely the same that is executed when hitting Enter after having put in a search string in the search field.
I am not trained in javascripting, so I am a little worried about doing to much in there my self - I could make a lot af damage I'm sure :)
So you want the Sog button to do the search function and the nustil the reset?And keeping the map functionality as it is?
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Yes precisely. The Sog button should perform the search against the database and the map, ad the Nulstil does the reset (it actually fires an empty searchstring, which is fine). As for the map we keep the functionality as it is for now.
Replace the two input button with these:
And the javascript code with that:
<input type="button" id="Sog" title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:5px;padding-right:10px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" value="Søg">
<input type="button" id="nustil" style="margin-left:5px;height:25px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>And the javascript code with that:
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nustil');
var scopeVar;
var map;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.6736841, lng: 12.568147100000033},
zoom: 15,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat:55.6736841, lng:12.568147100000033});
map.setZoom(15);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
});
}
}
}
cellClick();
Thanks Leonidas,
I have been out today. I will work on it tomorrow, and get back to you.
I have been out today. I will work on it tomorrow, and get back to you.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Hey Leonidas,
Keeping the "Nulstil" button as type submit, and changing the rest after your recommendations works beautifully. Thanks a lot.
I might have another question regarding map - and related - functionality , but I am not quite ready for that yet, so I hope that you takt a look look into this thread once in a while :)
Keeping the "Nulstil" button as type submit, and changing the rest after your recommendations works beautifully. Thanks a lot.
I might have another question regarding map - and related - functionality , but I am not quite ready for that yet, so I hope that you takt a look look into this thread once in a while :)
Anytime you need me post it here or send me a private message
Hi Leonidas,
Now I am ready to take the next step :)
So everything we have made so far os working beautifully (have one minor thing, but we can get back to that later), and what I need now should execute after execution of everything we have made so far.
I have added a viewer holding 48 images below the Google Map, and it is this viewer this is about.
You can see it here: https://navnpaasted.dk/
What I need is that specific numbers are fired in the input field with the id: "my-page-input" under specific conditions.
To start with the end, I need the "Nulstil" (Reset) button to fire the number 1 in the input input field with the id: "my-page-input"
The next thing should be executed when a list is present on the screen and when the user clicks on the icon in the 5th column (same one that we are clicking to activate the map search with "Stednavn Sogn Amt"). Here i want to "sniff" to the name in the column "Amt", and I want to fire the corresponding number in the input field with id: "my-page-input". Names in the column "Amt" and their corresponding numbers are listed in the table below.
I put in the code for the image viewer so you can see what I have done here:
Hope that you will give this a shot too :)
Now I am ready to take the next step :)
So everything we have made so far os working beautifully (have one minor thing, but we can get back to that later), and what I need now should execute after execution of everything we have made so far.
I have added a viewer holding 48 images below the Google Map, and it is this viewer this is about.
You can see it here: https://navnpaasted.dk/
What I need is that specific numbers are fired in the input field with the id: "my-page-input" under specific conditions.
To start with the end, I need the "Nulstil" (Reset) button to fire the number 1 in the input input field with the id: "my-page-input"
The next thing should be executed when a list is present on the screen and when the user clicks on the icon in the 5th column (same one that we are clicking to activate the map search with "Stednavn Sogn Amt"). Here i want to "sniff" to the name in the column "Amt", and I want to fire the corresponding number in the input field with id: "my-page-input". Names in the column "Amt" and their corresponding numbers are listed in the table below.
I put in the code for the image viewer so you can see what I have done here:
<!-- Navigator for pages -->
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: site-width;
height: 60px;
background-color: #666666;
margin-bottom:20px
border-bottom: 1px solid #f6f6f6;
margin-top: 0px;
justify-content: center;
}
.flex-item {
background-color: #666666;
height: 45px;
color: #f6f6f6;
margin-top: 13px;
}
</style>
<!-- My own buttons before -->
<div class= "flex-container">
<!-- -1 page -->
<div class="flex-item">
<input type= "button" button title= "1 side tilbage" style= "width: 110px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none; margin-left: 20px; font-family: robot; font-size: 26px;" id= "oneminus" onclick= "minusOne()" value= " ◀️">
</div>
<script>
function minusOne() {
document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
}
</script>
<!-- Input field for page search -->
<div class="flex-item">
<input type="text" style="width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;"; id="my-page-input" value= "1">
</div>
<!-- My own buttons after -->
<!-- +1 page -->
<div class="flex-item">
<input type="button" button title="1 side frem"style="width: 105px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: robot; font-size: 26px;";id="oneplus"; onclick="plusOne()" value=" ▶️️️">
</div>
<script>
function plusOne() {
document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
}
</script>
</div>
<div id="openseadragon1" style= "width: site-width; height:500px; border: 1px solid #666666;background-color:#f6f6f6";"margin: auto;">
</div>
<!-- OSD -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
//showNavigator: true,
navigatorId: "navigatorDiv",
//navigatorPosition: "ABSOLUTE",
//navigatorTop: "900px",
//navigatorLeft: "750px",
//navigatorHeight: "120px",
//navigatorWidth: "100px",
//navigatorPosition: "BOTTOM_RIGHT",
//navigatorHeight: "100px",
//navigatorWidth: "60px",
sequenceMode: true,
preserveViewport: true,
//showReferenceStrip: true,
referenceStripScroll: 'horizontal',
defaultZoomLevel: 0.7,
visibilityRatio: 0.5,
constrainDuringPan: true,
//showRotationControl: true,
//zoomInButton: "zoom-in",
//zoomOutButton: "zoom-out",
//homeButton: "home",
//fullPageButton: "full-page",
//nextButton: "next",
//previousButton: "previous",
showZoomControl: false,
showHomeControl: false,
showSequenceControl: false,
showFullpageControl: true,
tileSources: [
{
type: "zoomifytileservice",
width: 7000, // change width and height according your image size
height: 7000,
tilesUrl: "/Zoomify_images/Hele landet/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring/"
},
{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring, solo/"
},
{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aalborg/"
}, <!---..... 48 images--->
]
});
<!-- Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side -->
var input = document.getElementById('my-page-input');
input.addEventListener('keypress', function(event) {
if (event.which === 13) { // Return key
viewer.goToPage(parseInt(input.value, 10)-1);
}
});
<!-- Kigger efter at opdatere sidetallet i sidenummerboksen -->
<!-- og kigger efter at opdatere url til en individuel url -->
viewer.addHandler("page", function (data) {
input.value = ( data.page + 1 );
});
</script>
</div>
</div>Hope that you will give this a shot too :)
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
So Peter for the first part...(Nustil function).First define the input and viewer variable inside the script that I posted to you (lines 402 -538).
Then replace the NustilButton function with this (line 335):
HTML
JS (line 516-524)
And at the line 630 reove the var define from viewer.
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map;Then replace the NustilButton function with this (line 335):
HTML
<input type="button" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>JS (line 516-524)
NustilButton.addEventListener('click',function (){
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
}); And at the line 630 reove the var define from viewer.
Thanks Leonidas,
Nulstil button works nicely with these changes :)
But I don't really understand from where you get the linenumbers that you are rererring to - I mean I have only posted a fragment of the total code :) :)
Anyway - here is the total working code, so we can keep a common track of line numbers.
Nulstil button works nicely with these changes :)
But I don't really understand from where you get the linenumbers that you are rererring to - I mean I have only posted a fragment of the total code :) :)
Anyway - here is the total working code, so we can keep a common track of line numbers.
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
//$groupswithaccess="PUBLIC";
//require_once("../slpw/sitelokpw.php");
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-image: url("baggrund5.jpg");
background-repeat: no-repeat;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
/* nye her */
/*nye slut her */
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
table, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 16px;
font-weight: bold;
text-align: left;
}
table, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: arial;
font-size: 11px;
font-weight: bolder;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
.message {
margin-top: 7px;
font-family: arial;
font-size: 12px;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
table tr td:nth-child(5):hover { background-color: #739cbf; }
/*table td:hover {background-color: cornflowerblue;} */
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
/*.message.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message.error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }*/
.message.success { background-color: lightgreen; border: 1px solid #666666; color: #666666;}
.message.error { background-color: red; border: 1px solid lightgrey; color: white; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<!-- Page Header end-->
<!-- Top Menubar start-->
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:50%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;">
<!-- Søge felt til steder -->
<form action="" form title="Skriv evt. bare en del af det sted du søger. Hvis du søger et Sogn (eller Herred eller Amt) skal du skrive HELE navnet" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg sted eller sogn (tryk Enter for at søge)" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query" />
<input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="button" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
</form>
<div id="list_items"></div>
<div class="w3-row" style="width:100%;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-container w3-mobile" style="width:75%; margin-top: 15px; margin-left: 0px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">
<form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="post">
<h5> Tilføj stednavn</h5>
<div class="w3-container">
<div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, og Amt skal udfyldes</div>
</div>
<hr style= "margin-left: 15px; width: 90%; border-color: #9F5584;">
<?php if (isset($_SESSION['response'])): ?>
<?php
$response = json_decode($_SESSION['response']);
unset($_SESSION['response']);
?>
<div class="message <?php echo $response->success ? "success" : "error" ?>">
<?php echo $response->message; ?>
</div>
<?php endif ?>
<input type="hidden" name="id" value="">
<input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= "" style= "color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Kort" name= "kort" id="Kort" value="Kort ℹ️Klik️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>
<input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Tilføj">
</form>
</div>
<br>
<div class="w3-row" style="width:100%; height:650px;"> <!-- for content inside this column -->
<!-- DB update form start-->
<!-- DB update form end-->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px;">
<input id="g_map" class="controls" type="search" pplaceholder="" style=" margin-top: 5px; margin-left: 200px; height:31px; width:175px; background-color:rgba(223,230,230,0.0); color: rgba(159,85,132,0.0); border: none; border-radius: 5px; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="" >
<div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:20px; padding-top:20px; border: 2px solid #cccccc;"></div>
<script>
var input_1 = document.getElementById('input_1');
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
});
}
}
}
cellClick();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places&callback=initAutocomplete"
async defer></script>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
<div class="w3-row">
<!-- OSD start -->
<!-- Navigator for pages -->
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: site-width;
height: 60px;
background-color: #666666;
margin-bottom:20px
border-bottom: 1px solid #f6f6f6;
margin-top: 0px;
justify-content: center;
}
.flex-item {
background-color: #666666;
height: 45px;
color: #f6f6f6;
margin-top: 13px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- My own buttons before -->
<div class= "flex-container">
<!-- -1 page -->
<div class="flex-item">
<input type= "button" button title= "1 side tilbage" style= "width: 40px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none; margin-left: 20px; font-family: FontAwesome; font-size: 26px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); " id= "oneminus" onclick= "minusOne()" value= "️">
</div>
<script>
function minusOne() {
document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
}
</script>
<!-- Input field for page search -->
<div class="flex-item">
<input type="text" style=" margin-top:5px; width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;"; id="my-page-input" value= "1">
</div>
<!-- My own buttons after -->
<!-- +1 page -->
<div class="flex-item">
<input type="button" button title="1 side frem"style="width: 40px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: FontAwesome; font-size: 26px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); ";id="oneplus"; onclick="plusOne()" value= "">
</div>
<script>
function plusOne() {
document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
}
</script>
</div>
<div id="openseadragon1" style= "width: site-width; height:500px; border: 1px solid #666666;background-color:#f6f6f6";"margin: auto;">
</div>
<!-- OSD -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
//showNavigator: true,
navigatorId: "navigatorDiv",
//navigatorPosition: "ABSOLUTE",
//navigatorTop: "900px",
//navigatorLeft: "750px",
//navigatorHeight: "120px",
//navigatorWidth: "100px",
//navigatorPosition: "BOTTOM_RIGHT",
//navigatorHeight: "100px",
//navigatorWidth: "60px",
sequenceMode: true,
preserveViewport: true,
//showReferenceStrip: true,
referenceStripScroll: 'horizontal',
defaultZoomLevel: 0.7,
visibilityRatio: 0.5,
constrainDuringPan: true,
//showRotationControl: true,
//zoomInButton: "zoom-in",
//zoomOutButton: "zoom-out",
//homeButton: "home",
//fullPageButton: "full-page",
//nextButton: "▶️",
//previousButton: "previous",
showZoomControl: false,
showHomeControl: true,
showSequenceControl: false,
showFullpageControl: true,
tileSources: [
{
type: "zoomifytileservice",
width: 7000, // change width and height according your image size
height: 7000,
tilesUrl: "/Zoomify_images/Hele landet/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring/"
},
{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring, solo/"
},
{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aalborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Aalborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Thisted/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Thisted, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Viborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Viborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ringkøbing/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Ringkøbing, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Randers/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Randers, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Bornholm/"
}
]
});
<!-- Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side -->
var input = document.getElementById('my-page-input');
input.addEventListener('keypress', function(event) {
if (event.which === 13) { // Return key
viewer.goToPage(parseInt(input.value, 10)-1);
}
});
<!-- Kigger efter at opdatere sidetallet i sidenummerboksen -->
<!-- og kigger efter at opdatere url til en individuel url -->
viewer.addHandler("page", function (data) {
input.value = ( data.page + 1 );
});
</script>
</div>
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-light-grey" style="border-top: 1px solid #f6f6f6; padding-bottom:10px;">
<div class="w3-row" >
<div class="w3-col w3-mobile" style=" width: 100%; padding-top: 12px; padding-left: 10px;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
Oh - I see now that you have made some refactoring of the code. I have tried to load that code, but it does not work well, so I think it is better to take your refactoring issues one-by- one and work them into the well working code above. Could we do that in stead?
I have posted the list with names and corresponding numbers as raw text and in a text file.
I have posted the list with names and corresponding numbers as raw text and in a text file.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
For the second issue:
In the script that I made add these :
And check the functionality.The only reason that I refactored the code is that the var input (line 429) was null because the input element was not exist in the document at the moment that the script was executing.
In the script that I made add these :
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map;
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,
Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,
Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,
Roskilde:42,Frederiksborg:44,København:46,Bornholm:48
};
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]);
input.value=columnAmt[arg];
}
}
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();And check the functionality.The only reason that I refactored the code is that the var input (line 429) was null because the input element was not exist in the document at the moment that the script was executing.
Thanks Leonidas,
I am heading out for a while now, but I will be back later :)
I am heading out for a while now, but I will be back later :)
Hi Leonidas,
It works just perfect :)
One more little thing down this alley.
Is it possible to do as described en the scanario below:
- We have made a search and we have a list on the screen.
- We want the lower map to fire the number in the input field that corresponds to the "Amt" in the very first row in the list.
- And then - of course - we still want the functionality that you have just made when clicking in other rows in the list.
I hope this is possible too :)
When this is done, I have two things regarding the Google Map, but let's take that afterwards.
It works just perfect :)
One more little thing down this alley.
Is it possible to do as described en the scanario below:
- We have made a search and we have a list on the screen.
- We want the lower map to fire the number in the input field that corresponds to the "Amt" in the very first row in the list.
- And then - of course - we still want the functionality that you have just made when clicking in other rows in the list.
I hope this is possible too :)
When this is done, I have two things regarding the Google Map, but let's take that afterwards.
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Replace and the script with this:
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map;
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,
Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,
Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,
Roskilde:42,Frederiksborg:44,København:46,Bornholm:48
};
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]);
input.value=columnAmt[arg];
}
}
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();
Thanks Leonidas,
We are almost there.
Just one little problem. The lower map displays the number in the inputbox +1, where ist should display the map corresponding to the number in the input box. For example when I write Blistrup in the search field it should show map 44, but it actually shows map 45. It is the number 44 that is present in the input field, but it is the map with number 45 that is displayed. You can check it yourself bt toggling a little with the forward/backward buttons in the lower map.
This behaviour goes for both clicking in the list and when performing an initial search.
We are almost there.
Just one little problem. The lower map displays the number in the inputbox +1, where ist should display the map corresponding to the number in the input box. For example when I write Blistrup in the search field it should show map 44, but it actually shows map 45. It is the number 44 that is present in the input field, but it is the map with number 45 that is displayed. You can check it yourself bt toggling a little with the forward/backward buttons in the lower map.
This behaviour goes for both clicking in the list and when performing an initial search.
Cheers and Beers.
I seem to have fixed this my self by editing this line with -1:
I seem to have fixed this my self by editing this line with -1:
viewer.goToPage(columnAmt[arg]-1);Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Replce the finction lines 15-20:
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]-1);
input.value=columnAmt[arg];
}
}
Yep that was exactly what I did :)
And now to the last thing about this.
Is it possible to add route direction to the Google Map?
If this is hard to do, we will not do it, but if it is "piece of cake" it would be a great help for my users to have this feature too.
And now to the last thing about this.
Is it possible to add route direction to the Google Map?
If this is hard to do, we will not do it, but if it is "piece of cake" it would be a great help for my users to have this feature too.
We will try.What is the origin place that you want to start the route and what is the destination?I syppose that the destination point is the place that you click on it?
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
I believe that I would prefer that the point clicked is the starting point.
Mot important is it that the other point (not matter if it start or destination) can be chosen by the user - not from a pre-defined list, but quite freely from Google Maps places.
Basically I need the solution to be able to show a route by foot and to calculate distance between two points, but if it is possible it would be an advantage if more than two points were possible.
Mot important is it that the other point (not matter if it start or destination) can be chosen by the user - not from a pre-defined list, but quite freely from Google Maps places.
Basically I need the solution to be able to show a route by foot and to calculate distance between two points, but if it is possible it would be an advantage if more than two points were possible.
Do you want to this in the same map that we worked before?or to set up a new map for this?How do you imagine the appear of the map?
I imagine that a button or a sign of some kind in connection to the present map could reveal two inputfields (could be shown outside the map, or the tricker could display a whole new map in a modal that have the route direction function and input fields) where the user can put in the from and to destinations. By second thought this function does not need to have coherence with the other search functions we have made. So the best thing would be if this function was a "stand-alone" function, and the other functions that is allready working is left completely untouched. So a new map with route direction function in a modal would be the best solution I believe.
I hope this make sense. And again - if this is too hard to make then please let me know, then we will not do it.
I hope this make sense. And again - if this is too hard to make then please let me know, then we will not do it.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Peter check this code initially and we are going to make changes:
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style>
body {
background-image: url("baggrund5.jpg");
background-repeat: no-repeat;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
/* nye her */
/*nye slut her */
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
table, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 16px;
font-weight: bold;
text-align: left;
}
table, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: arial;
font-size: 11px;
font-weight: bolder;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
.message {
margin-top: 7px;
font-family: arial;
font-size: 12px;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
table tr td:nth-child(5):hover { background-color: #739cbf; }
/*table td:hover {background-color: cornflowerblue;} */
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
/*.message.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
.success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
.message.error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }*/
.message.success { background-color: lightgreen; border: 1px solid #666666; color: #666666;}
.message.error { background-color: red; border: 1px solid lightgrey; color: white; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width: 752px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="map_2" style="width:700px; height:500px;"></div>
<input type="text" id="start" placeholder="Start Point" style="width:200px; float: left;">
<input type="text" id="end" placeholder="End Point" style="width:200px; float: left;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<!-- Page Header end-->
<!-- Top Menubar start-->
<!-- Top Menubar end-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click here to see Modal window
</button>
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:50%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;">
<!-- Søge felt til steder -->
<form action="" form title="Skriv evt. bare en del af det sted du søger. Hvis du søger et Sogn (eller Herred eller Amt) skal du skrive HELE navnet" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg sted eller sogn (tryk Enter for at søge)" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query" />
<input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="button" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
</form>
<div id="list_items"></div>
<div class="w3-row" style="width:100%;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-container w3-mobile" style="width:75%; margin-top: 15px; margin-left: 0px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">
<form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="post">
<h5> Tilføj stednavn</h5>
<div class="w3-container">
<div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, og Amt skal udfyldes</div>
</div>
<hr style= "margin-left: 15px; width: 90%; border-color: #9F5584;">
<input type="hidden" name="id" value="">
<input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= "" style= "color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Kort" name= "kort" id="Kort" value="Kort ℹ️Klik️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>
<input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Tilføj">
</form>
</div>
<br>
<div class="w3-row" style="width:100%; height:650px;"> <!-- for content inside this column -->
<!-- DB update form start-->
<!-- DB update form end-->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px;">
<input id="g_map" class="controls" type="search" pplaceholder="" style=" margin-top: 5px; margin-left: 200px; height:31px; width:175px; background-color:rgba(223,230,230,0.0); color: rgba(159,85,132,0.0); border: none; border-radius: 5px; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="" >
<div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:20px; padding-top:20px; border: 2px solid #cccccc;"></div>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
<div class="w3-row">
<!-- OSD start -->
<!-- Navigator for pages -->
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: site-width;
height: 60px;
background-color: #666666;
margin-bottom:20px
border-bottom: 1px solid #f6f6f6;
margin-top: 0px;
justify-content: center;
}
.flex-item {
background-color: #666666;
height: 45px;
color: #f6f6f6;
margin-top: 13px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- My own buttons before -->
<div class= "flex-container">
<!-- -1 page -->
<div class="flex-item">
<input type= "button" button title= "1 side tilbage" style= "width: 40px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none; margin-left: 20px; font-family: FontAwesome; font-size: 26px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); " id= "oneminus" onclick= "minusOne()" value= "️">
</div>
<script>
function minusOne() {
document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
}
</script>
<!-- Input field for page search -->
<div class="flex-item">
<input type="text" style=" margin-top:5px; width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;"; id="my-page-input" value= "1">
</div>
<!-- My own buttons after -->
<!-- +1 page -->
<div class="flex-item">
<input type="button" button title="1 side frem"style="width: 40px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: FontAwesome; font-size: 26px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); ";id="oneplus"; onclick="plusOne()" value= "">
</div>
<script>
function plusOne() {
document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
}
</script>
</div>
<div id="openseadragon1" style= "width: site-width; height:500px; border: 1px solid #666666;background-color:#f6f6f6";"margin: auto;">
</div>
<!-- OSD -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
async defer></script>
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map,map_2;
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,
Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,
Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,
Roskilde:42,Frederiksborg:44,København:46,Bornholm:48
};
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]);
input.value=columnAmt[arg];
}
}
function initAutocomplete() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
map_2 = new google.maps.Map(document.getElementById('map_2'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 10,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
directionsDisplay.setMap(map_2);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('keyup',function (e){
if(e.keyCode == 13){ console.log('sas');onChangeHandler();e.preventDefault();}
});
document.getElementById('end').addEventListener('keyup',function (e){
if(e.keyCode == 13){console.log('sas'); onChangeHandler();e.preventDefault();}
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
//function firstLoadMap(){
// var rows=document.getElementsByTagName('tr');
// var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
// if(Amt){
// seaDragonInp(Amt);
// }
//}
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();
</script>
<script>
$(document).ready(function(){
$('#myModal').on('shown.bs.modal',function(){
google.maps.event.trigger(map_2, "resize");
});
});
</script>
<script type="text/javascript">
viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
//showNavigator: true,
navigatorId: "navigatorDiv",
//navigatorPosition: "ABSOLUTE",
//navigatorTop: "900px",
//navigatorLeft: "750px",
//navigatorHeight: "120px",
//navigatorWidth: "100px",
//navigatorPosition: "BOTTOM_RIGHT",
//navigatorHeight: "100px",
//navigatorWidth: "60px",
sequenceMode: true,
preserveViewport: true,
//showReferenceStrip: true,
referenceStripScroll: 'horizontal',
defaultZoomLevel: 0.7,
visibilityRatio: 0.5,
constrainDuringPan: true,
//showRotationControl: true,
//zoomInButton: "zoom-in",
//zoomOutButton: "zoom-out",
//homeButton: "home",
//fullPageButton: "full-page",
//nextButton: "▶️",
//previousButton: "previous",
showZoomControl: false,
showHomeControl: true,
showSequenceControl: false,
showFullpageControl: true,
tileSources: [
{
type: "zoomifytileservice",
width: 7000, // change width and height according your image size
height: 7000,
tilesUrl: "/Zoomify_images/Hele landet/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring/"
},
{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring, solo/"
},
{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aalborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Aalborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Thisted/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Thisted, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Viborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Viborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ringkøbing/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Ringkøbing, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Randers/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Randers, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Bornholm/"
}
]
});
console.log(viewer);
<!-- Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side -->
input.addEventListener('keypress', function(event) {
if (event.which === 13) { // Return key
viewer.goToPage(parseInt(input.value, 10)-1);
}
});
<!-- Kigger efter at opdatere sidetallet i sidenummerboksen -->
<!-- og kigger efter at opdatere url til en individuel url -->
viewer.addHandler("page", function (data) {
input.value = ( data.page + 1 );
});
</script>
</div>
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-light-grey" style="border-top: 1px solid #f6f6f6; padding-bottom:10px;">
<div class="w3-row" >
<div class="w3-col w3-mobile" style=" width: 100%; padding-top: 12px; padding-left: 10px;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
Thansk Leonidas,
It does not show any map at all :)
Could you sepcify where in the code you have made changes, so I don't need to replace the full code evert time?
It does not show any map at all :)
Could you sepcify where in the code you have made changes, so I don't need to replace the full code evert time?
Set your API key Peter (line 520)
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
That definately helped :)
I get this when trying to make a route direction
I get this when trying to make a route direction
Hi Leonidas,
I have made so much rework on the code that we have to base the route direction on the reworked code.
I paste in the total code here, but it would be an absolute advantage if you could separately post the sections you change and give directions accordingly. So I will paste them in and test it and post code back when necessary.
Could we do it that way?
I have made so much rework on the code that we have to base the route direction on the reworked code.
I paste in the total code here, but it would be an absolute advantage if you could separately post the sections you change and give directions accordingly. So I will paste them in and test it and post code back when necessary.
Could we do it that way?
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
//$groupswithaccess="PUBLIC";
//require_once("../slpw/sitelokpw.php");
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<!--<script>
$(document).ready(function(){
$('#tdata').DataTable();
});
</script> -->
<style>
body {
background-image: url("baggrund5.jpg");
background-repeat: no-repeat;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
/* nye her */
/*nye slut her */
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
#tdata, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 16px;
font-weight: bold;
text-align: left;
}
#tdata, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Arial;
font-size: 12px;
font-weight: normal;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 16px;
resize: none;
}
.message {
margin-top: 7px;
font-family: arial;
font-size: 12px;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
table tr td:nth-child(5):hover { background-color: #739cbf; }
table tr td:nth-child(5) {font-family: FontAwesome; font-size: 18px; color: #fe7569; text-align: center;}
/*table td:hover {background-color: cornflowerblue;} */
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message.success { background-color: lightgreen; border: 1px solid #666666; color: #666666;}
.message.error { background-color: red; border: 1px solid lightgrey; color: white; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<!-- Page Header end-->
<!-- Top Menubar start-->
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:50%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;">
<!-- Søge felt til steder -->
<form action="" form title="Skriv evt. bare en del af det sted du søger. Hvis du søger et Sogn (eller Herred eller Amt) skal du skrive HELE navnet" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg bredt (tryk Enter for at søge)" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query" />
<input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="submit" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
</form>
<div id="list_items"></div>
<div class="w3-row" style="width:100%;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-container w3-mobile" style="width:75%; margin-top: 15px; margin-left: 0px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">
<form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="post">
<h5> Tilføj stednavn</h5>
<div class="w3-container">
<div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, og Amt skal udfyldes</div>
</div>
<hr style= "margin-left: 15px; width: 90%; border-color: #9F5584;">
<?php if (isset($_SESSION['response'])): ?>
<?php
$response = json_decode($_SESSION['response']);
unset($_SESSION['response']);
?>
<div class="message <?php echo $response->success ? "success" : "error" ?>">
<?php echo $response->message; ?>
</div>
<?php endif ?>
<input type="hidden" name="id" value="">
<input type="date" name="Dato" value="<?php echo date("Y-m-d");?>"hidden>
<input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= "" style= "color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Kort" name= "kort" id="Kort" value="  ️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>
<input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Tilføj">
</form>
</div>
<br>
<div class="w3-row" style="width:100%; height:650px;"> <!-- for content inside this column -->
<!-- DB update form start-->
<!-- DB update form end-->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px;">
<input id="g_map" class="controls" type="search" pplaceholder="" style=" margin-top: 5px; margin-left: 200px; height:31px; width:175px; background-color:rgba(223,230,230,4.4); color: rgba(159,85,132,10.10); border: none; border-radius: 5px; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="" >
<div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:20px; padding-top:20px; border: 2px solid #cccccc;"></div>
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map;
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26, Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40, Roskilde:42,Frederiksborg:44,København:46,Bornholm:48,
};
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]-1);
input.value=columnAmt[arg];
}
}
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
//$('#list_items').append(res);
$('#list_items').html(res);
$('#tdata').DataTable({searching: false, paging: false, info: false, order: []});
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
//$('#list_items').append(res);
$('#list_items').html(res);
$('#tdata').DataTable({searching: false, paging: false, info: false, order: []});
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
//debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.cells[0].innerHTML;
var Sogn=this.parentNode.cells[1].innerHTML;
var Amt=this.parentNode.cells[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
//debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places&callback=initAutocomplete"
async defer></script>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
<div class="w3-row">
<!-- OSD start -->
<!-- Navigator for pages -->
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: site-width;
height: 60px;
background-color: #666666;
margin-bottom:20px
border-bottom: 1px solid #f6f6f6;
margin-top: 0px;
justify-content: center;
}
.flex-item {
background-color: #666666;
height: 45px;
color: #f6f6f6;
margin-top: 13px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- My own buttons before -->
<div class= "flex-container">
<!-- -1 page -->
<div class="flex-item">
<input type= "button" button title= "1 side tilbage" style= "width: 40px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none; margin-left: 20px; font-family: FontAwesome; font-size: 26px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); " id= "oneminus" onclick= "minusOne()" value= "️">
</div>
<script>
function minusOne() {
document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
}
</script>
<!-- Input field for page search -->
<div class="flex-item">
<input type="text" style=" margin-top:5px; width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;"; id="my-page-input" value= "1">
</div>
<!-- My own buttons after -->
<!-- +1 page -->
<div class="flex-item">
<input type="button" button title="1 side frem"style="width: 40px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: FontAwesome; font-size: 26px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); ";id="oneplus"; onclick="plusOne()" value= "">
</div>
<script>
function plusOne() {
document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
}
</script>
</div>
<div id="openseadragon1" style= "width: site-width; height:500px; border: 1px solid #666666;background-color:#f6f6f6";"margin: auto;">
</div>
<!-- OSD -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>
<script type="text/javascript">
OpenSeadragon.setString('Tooltips.Home', 'Standard Zoom');
OpenSeadragon.setString('Tooltips.FullPage', 'Se fuldskærm');
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
//showNavigator: true,
navigatorId: "navigatorDiv",
//navigatorPosition: "ABSOLUTE",
//navigatorTop: "900px",
//navigatorLeft: "750px",
//navigatorHeight: "120px",
//navigatorWidth: "100px",
//navigatorPosition: "BOTTOM_RIGHT",
//navigatorHeight: "100px",
//navigatorWidth: "60px",
sequenceMode: true,
preserveViewport: true,
//showReferenceStrip: true,
referenceStripScroll: 'horizontal',
defaultZoomLevel: 0.7,
visibilityRatio: 0.5,
constrainDuringPan: true,
//showRotationControl: true,
//zoomInButton: "zoom-in",
//zoomOutButton: "zoom-out",
//homeButton: "home",
//fullPageButton: "full-page",
//nextButton: "▶️",
//previousButton: "previous",
showZoomControl: false,
showHomeControl: true,
showSequenceControl: false,
showFullpageControl: true,
tileSources: [
{
type: "zoomifytileservice",
width: 7000, // change width and height according your image size
height: 7000,
tilesUrl: "/Zoomify_images/Hele landet/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring/"
},
{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring, solo/"
},
{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aalborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Aalborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Thisted/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Thisted, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Viborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Viborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ringkøbing/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Ringkøbing, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Randers/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Randers, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Bornholm/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Bornholm/"
}
]
});
<!-- Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side -->
var input = document.getElementById('my-page-input');
input.addEventListener('keypress', function(event) {
if (event.which === 13) { // Return key
viewer.goToPage(parseInt(input.value, 10)-1);
}
});
<!-- Kigger efter at opdatere sidetallet i sidenummerboksen -->
<!-- og kigger efter at opdatere url til en individuel url -->
viewer.addHandler("page", function (data) {
input.value = ( data.page + 1 );
});
</script>
</div>
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-light-grey" style="border-top: 1px solid #f6f6f6; padding-bottom:10px;">
<div class="w3-row" >
<div class="w3-col w3-mobile" style=" width: 100%; padding-top: 12px; padding-left: 10px;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
Peter look at this code.I added comments with the date and changes.In fact the changes are very few.The modal map is working to me with my API key.
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Add the following line 25 Oct 17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<!--<script>
$(document).ready(function(){
$('#tdata').DataTable();
});
</script> -->
<style>
body {
background-image: url("baggrund5.jpg");
background-repeat: no-repeat;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
/* nye her */
/*nye slut her */
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
#tdata, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 16px;
font-weight: bold;
text-align: left;
}
#tdata, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Arial;
font-size: 12px;
font-weight: normal;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 16px;
resize: none;
}
.message {
margin-top: 7px;
font-family: arial;
font-size: 12px;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
table tr td:nth-child(5):hover { background-color: #739cbf; }
table tr td:nth-child(5) {font-family: FontAwesome; font-size: 18px; color: #fe7569; text-align: center;}
/*table td:hover {background-color: cornflowerblue;} */
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message.success { background-color: lightgreen; border: 1px solid #666666; color: #666666;}
.message.error { background-color: red; border: 1px solid lightgrey; color: white; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Add the following line 25 Oct 17 -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width: 752px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="map_2" style="width:700px; height:500px;"></div>
<input type="text" id="start" placeholder="Start Point" style="width:200px; float: left;">
<input type="text" id="end" placeholder="End Point" style="width:200px; float: left;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Button to open Modal-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click here to see Modal window
</button>
<!-- Button to open Modal-->
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<!-- Page Header end-->
<!-- Top Menubar start-->
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:50%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;">
<!-- Søge felt til steder -->
<form action="" form title="Skriv evt. bare en del af det sted du søger. Hvis du søger et Sogn (eller Herred eller Amt) skal du skrive HELE navnet" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg bredt (tryk Enter for at søge)" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query" />
<input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="submit" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
</form>
<div id="list_items"></div>
<div class="w3-row" style="width:100%;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-container w3-mobile" style="width:75%; margin-top: 15px; margin-left: 0px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">
<form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="post">
<h5> Tilføj stednavn</h5>
<div class="w3-container">
<div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, og Amt skal udfyldes</div>
</div>
<hr style= "margin-left: 15px; width: 90%; border-color: #9F5584;">
<?php if (isset($_SESSION['response'])): ?>
<?php
$response = json_decode($_SESSION['response']);
unset($_SESSION['response']);
?>
<div class="message <?php echo $response->success ? "success" : "error" ?>">
<?php echo $response->message; ?>
</div>
<?php endif ?>
<input type="hidden" name="id" value="">
<input type="date" name="Dato" value="<?php echo date("Y-m-d");?>"hidden>
<input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= "" style= "color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Kort" name= "kort" id="Kort" value="  ️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>
<input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Tilføj">
</form>
</div>
<br>
<div class="w3-row" style="width:100%; height:650px;"> <!-- for content inside this column -->
<!-- DB update form start-->
<!-- DB update form end-->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px;">
<input id="g_map" class="controls" type="search" pplaceholder="" style=" margin-top: 5px; margin-left: 200px; height:31px; width:175px; background-color:rgba(223,230,230,4.4); color: rgba(159,85,132,10.10); border: none; border-radius: 5px; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="" >
<div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:20px; padding-top:20px; border: 2px solid #cccccc;"></div>
<!-- I changed the scripts 25-10-17 -->
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map,map_2;
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,
Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,
Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,
Roskilde:42,Frederiksborg:44,København:46,Bornholm:48
};
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]);
input.value=columnAmt[arg];
}
}
function initAutocomplete() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
map_2 = new google.maps.Map(document.getElementById('map_2'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 10,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
directionsDisplay.setMap(map_2);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('keyup',function (e){
if(e.keyCode == 13){ console.log('sas');onChangeHandler();e.preventDefault();}
});
document.getElementById('end').addEventListener('keyup',function (e){
if(e.keyCode == 13){console.log('sas'); onChangeHandler();e.preventDefault();}
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();
</script>
<script>
$(document).ready(function(){
$('#myModal').on('shown.bs.modal',function(){
google.maps.event.trigger(map_2, "resize");
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places&callback=initAutocomplete"
async defer></script>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
<div class="w3-row">
<!-- OSD start -->
<!-- Navigator for pages -->
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: site-width;
height: 60px;
background-color: #666666;
margin-bottom:20px
border-bottom: 1px solid #f6f6f6;
margin-top: 0px;
justify-content: center;
}
.flex-item {
background-color: #666666;
height: 45px;
color: #f6f6f6;
margin-top: 13px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- My own buttons before -->
<div class= "flex-container">
<!-- -1 page -->
<div class="flex-item">
<input type= "button" button title= "1 side tilbage" style= "width: 40px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none; margin-left: 20px; font-family: FontAwesome; font-size: 26px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); " id= "oneminus" onclick= "minusOne()" value= "️">
</div>
<script>
function minusOne() {
document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
}
</script>
<!-- Input field for page search -->
<div class="flex-item">
<input type="text" style=" margin-top:5px; width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;"; id="my-page-input" value= "1">
</div>
<!-- My own buttons after -->
<!-- +1 page -->
<div class="flex-item">
<input type="button" button title="1 side frem"style="width: 40px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: FontAwesome; font-size: 26px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); ";id="oneplus"; onclick="plusOne()" value= "">
</div>
<script>
function plusOne() {
document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
}
</script>
</div>
<div id="openseadragon1" style= "width: site-width; height:500px; border: 1px solid #666666;background-color:#f6f6f6";"margin: auto;">
</div>
<!-- OSD -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>
<script type="text/javascript">
OpenSeadragon.setString('Tooltips.Home', 'Standard Zoom');
OpenSeadragon.setString('Tooltips.FullPage', 'Se fuldskærm');
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
//showNavigator: true,
navigatorId: "navigatorDiv",
//navigatorPosition: "ABSOLUTE",
//navigatorTop: "900px",
//navigatorLeft: "750px",
//navigatorHeight: "120px",
//navigatorWidth: "100px",
//navigatorPosition: "BOTTOM_RIGHT",
//navigatorHeight: "100px",
//navigatorWidth: "60px",
sequenceMode: true,
preserveViewport: true,
//showReferenceStrip: true,
referenceStripScroll: 'horizontal',
defaultZoomLevel: 0.7,
visibilityRatio: 0.5,
constrainDuringPan: true,
//showRotationControl: true,
//zoomInButton: "zoom-in",
//zoomOutButton: "zoom-out",
//homeButton: "home",
//fullPageButton: "full-page",
//nextButton: "▶️",
//previousButton: "previous",
showZoomControl: false,
showHomeControl: true,
showSequenceControl: false,
showFullpageControl: true,
tileSources: [
{
type: "zoomifytileservice",
width: 7000, // change width and height according your image size
height: 7000,
tilesUrl: "/Zoomify_images/Hele landet/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring/"
},
{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Hjørring, solo/"
},
{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aalborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Aalborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Thisted/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Thisted, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Viborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Viborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ringkøbing/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Ringkøbing, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Randers/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "/Zoomify_images/Randers, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Århus, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Skanderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Vejle, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Ribe, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Haderslev, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Aabenraa, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sønderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Tønder, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Odense, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Svendborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Maribo, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Præstø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Sorø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Holbæk, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Roskilde, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Frederiksborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/København, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Bornholm/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "/Zoomify_images/Bornholm/"
}
]
});
<!-- Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side -->
var input = document.getElementById('my-page-input');
input.addEventListener('keypress', function(event) {
if (event.which === 13) { // Return key
viewer.goToPage(parseInt(input.value, 10)-1);
}
});
<!-- Kigger efter at opdatere sidetallet i sidenummerboksen -->
<!-- og kigger efter at opdatere url til en individuel url -->
viewer.addHandler("page", function (data) {
input.value = ( data.page + 1 );
});
</script>
</div>
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-light-grey" style="border-top: 1px solid #f6f6f6; padding-bottom:10px;">
<div class="w3-row" >
<div class="w3-col w3-mobile" style=" width: 100%; padding-top: 12px; padding-left: 10px;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div> Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Thanks Leonidas,
1. It starts with the modal window opened.
2. The route search is still giving this error:
I have worked your changes into my reworked code, so could we use the code pasted in below as we move ahead?
1. It starts with the modal window opened.
2. The route search is still giving this error:
I have worked your changes into my reworked code, so could we use the code pasted in below as we move ahead?
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements-->
//$groupswithaccess="PUBLIC";
//require_once("../slpw/sitelokpw.php");
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Stednavne</title>
<meta charset="utf-8">
<script type="text/javascript">
var blabfolderpath="/slpw/plugin_blab/"
</script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript" src="/slpw/plugin_blab/sarissa.js"></script>
<script type="text/javascript" src="/slpw/plugin_blab/blab.js"></script>
<link rel="stylesheet" type="text/css" href="/slpw/plugin_blab/blab.css">
<script type="text/javascript">
var memberprofilepage=1
</script>
<?php
if (function_exists('startwhoisonline'))
startwhoisonline('profileimage,name');
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<!--<script>
$(document).ready(function(){
$('#tdata').DataTable();
});
</script> -->
<style>
body {
background-image: url("baggrund5.jpg");
background-repeat: no-repeat;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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 {
margin: 10px 10px 0 0;
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 {
padding-bottom: 12px;
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 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
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;
padding: 6px 12px;
}
/* nye her */
/*nye slut her */
/* unvisited link */
a:link {
color: ;
}
/* visited link */
a:visited {
color: ;
}
/* mouse over link */
a:hover {
color: cornflowerblue;
}
/* selected link */
a:active {
color: ;
}
#tdata, th {
border-bottom: 1px #666666;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-style: solid;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Serif;
font-size: 16px;
font-weight: bold;
text-align: left;
}
#tdata, td {
border: 1px #f6f6f6;
border-style: none;
border-collapse: collapse;
padding-top:10px;
padding-left:20px;
color:black;
font-family: Arial;
font-size: 12px;
font-weight: normal;
text-align: left;
}
h3 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 18px;
text-align: center;
}
h4 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #f6f6f6;
font-weight: normal;
font-family: Robotto ;
font-size: 18px;
text-align: center;
}
h5 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
color: #9F5584;
font-weight: normal;
font-family: Arial ;
font-size: 15px;
text-align: center;
}
h6 {
margin-top: 0px;
padding-top:0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
color: #666666;
font-weight: normal;
font-family: Helvetica ;
font-size: 14px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 30px;
padding: 2px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 12px;
resize: none;
}
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-family: arial;
font-size: 16px;
resize: none;
}
.message {
margin-top: 7px;
font-family: arial;
font-size: 12px;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
table tr td:nth-child(5):hover { background-color: #739cbf; }
table tr td:nth-child(5) {font-family: FontAwesome; font-size: 18px; color: #fe7569; text-align: center;}
/*table td:hover {background-color: cornflowerblue;} */
.w3-black,.w3-hover-black:hover{color:#ccc!important;background-color:#000!important}
.w3-hover-text-blue:hover{color:#66CCFF!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#666666!important}
</style>
<!-- Check for message requirements-->
<style type="text/css">
.message.success { background-color: lightgreen; border: 1px solid #666666; color: #666666;}
.message.error { background-color: red; border: 1px solid lightgrey; color: white; }
</style>
<script>
$(document).ready(function(){
$(".message").fadeOut(8000);
$(".message2").fadeOut(8000);
$(".success").fadeOut(8000);
$(".error").fadeOut(8000);
});
</script>
</head>
<body>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width: 752px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="map_2" style="width:700px; height:500px;"></div>
<input type="text" id="start" placeholder="Start Point" style="width:200px; float: left;">
<input type="text" id="end" placeholder="End Point" style="width:200px; float: left;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Button to open Modal-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click here to see Modal window
</button>
<!-- Button to open Modal-->
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Page header start-->
<!-- Page Header end-->
<!-- Top Menubar start-->
<!-- Top Menubar end-->
<!-- Main page start 4 columns incl. right sidebar-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:50%; margin-top: 30px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;">
<!-- Søge felt til steder -->
<form action="" form title="Skriv evt. bare en del af det sted du søger. Hvis du søger et Sogn (eller Herred eller Amt) skal du skrive HELE navnet" style="padding-top:10px; padding-bottom:10px;" method="POST" >
<input type="search" id="input_1" placeholder= "Søg bredt (tryk Enter for at søge)" style="width: 300px; height: 35px; border: 1px solid #666666;border-radius:2px;color:#666666; color: #9F5584; font-weight: ligther; font-size: 13px; padding-left:10px;" name="query" />
<input type="button" submit title="Klik her, eller tast Enter, for at aktivere søgningen." style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" name="soeg" id="Sog" value="Søg"/>
<input type="submit" id="nulstil" style="margin-left:15px; height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);" value="Nulstil"/>
</form>
<div id="list_items"></div>
<div class="w3-row" style="width:100%;"> <!-- for content inside this column -->
<br>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
</div>
<div class="w3-container w3-mobile" style="width:75%; margin-top: 15px; margin-left: 0px; background-color:#f6f6f6; border: solid 1px #cccccc; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">
<form id="myForm" style=" padding-top: 12px; padding-bottom: 0px;" action="insert_sted.php" method="post">
<h5> Tilføj stednavn</h5>
<div class="w3-container">
<div class="w3-center" style="font-size:11px; font-family:arial;"> Stednavn, og Amt skal udfyldes</div>
</div>
<hr style= "margin-left: 15px; width: 90%; border-color: #9F5584;">
<?php if (isset($_SESSION['response'])): ?>
<?php
$response = json_decode($_SESSION['response']);
unset($_SESSION['response']);
?>
<div class="message <?php echo $response->success ? "success" : "error" ?>">
<?php echo $response->message; ?>
</div>
<?php endif ?>
<input type="hidden" name="id" value="">
<input type="date" name="Dato" value="<?php echo date("Y-m-d");?>"hidden>
<input type="text" placeholder="Stednavn" name="stednavn" id="Stednavn" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Sogn" name= "sogn" id=" Sogn" value= "" style= "color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Herred" name= "herred" id="Herred" value="" style="color: #9F5584; font-weight: bold;">
<input type="text" placeholder= "Amt" name= "amt" id="Amt" value="" style="color: #9F5584; font-weight: bold;" required>
<input type="text" placeholder= "Kort" name= "kort" id="Kort" value="  ️" style="color: #9F5584; font-weight: bold; width: 20%; text-align:center;" hidden>
<input type="submit" style= "margin-top: 10px; font-family: arial; font-size: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:#cccccc;" value="Tilføj">
</form>
</div>
<br>
<div class="w3-row" style="width:100%; height:650px;"> <!-- for content inside this column -->
<!-- DB update form start-->
<!-- DB update form end-->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile w3-hide-small" style="width:45%; height: 400px; margin-top:20px;">
<input id="g_map" class="controls" type="search" pplaceholder="" style=" margin-top: 5px; margin-left: 200px; height:31px; width:175px; background-color:rgba(223,230,230,4.4); color: rgba(159,85,132,10.10); border: none; border-radius: 5px; font-weight: ligther; font-size: 11.5px; padding-left:10px;" value="" >
<div id="map" style="width:100%; height:100%; margin-left: 0px; margin-top:20px; padding-top:20px; border: 2px solid #cccccc;"></div>
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map;
//changed by Peter
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26, Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40, Roskilde:42,Frederiksborg:44,København:46,Bornholm:48,
};
//chabged by Peter
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]-1);
input.value=columnAmt[arg];
}
}
//Changed bye Leonidas
function initAutocomplete() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
map_2 = new google.maps.Map(document.getElementById('map_2'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 10,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
//Changed by Leonidas
directionsDisplay.setMap(map_2);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('keyup',function (e){
if(e.keyCode == 13){ console.log('sas');onChangeHandler();e.preventDefault();}
});
document.getElementById('end').addEventListener('keyup',function (e){
if(e.keyCode == 13){console.log('sas'); onChangeHandler();e.preventDefault();}
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
//Chabged by Peter
$('#list_items').html(res);
$('#tdata').DataTable({searching: false, paging: false, info: false, order: []});
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
//Changed by Peter
$('#list_items').html(res);
$('#tdata').DataTable({searching: false, paging: false, info: false, order: []});
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
//debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
//Changed by Peter
var Stednavn=this.parentNode.cells[0].innerHTML;
var Sogn=this.parentNode.cells[1].innerHTML;
var Amt=this.parentNode.cells[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
//debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();
</script>
<!-- changed by Leonidas -->
<script>
$(document).ready(function(){
$('#myModal').on('shown.bs.modal',function(){
google.maps.event.trigger(map_2, "resize");
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtYQi0i92CeKiXu4oqY8XTT_qliZbWQ5g&libraries=places&callback=initAutocomplete"
async defer></script>
<hr style= "margin-left: 10px; width: 95%; border-color: #9F5584;">
<div class="w3-row">
<!-- OSD start -->
<!-- Navigator for pages -->
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: site-width;
height: 60px;
background-color: #666666;
margin-bottom:20px
border-bottom: 1px solid #f6f6f6;
margin-top: 0px;
justify-content: center;
}
.flex-item {
background-color: #666666;
height: 45px;
color: #f6f6f6;
margin-top: 13px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- My own buttons before -->
<div class= "flex-container">
<!-- -1 page -->
<div class="flex-item">
<input type= "button" button title= "1 side tilbage" style= "width: 40px; margin-right: 30px; text-align: center; color: #f6f6f6; background-color: #666666; border: none; margin-left: 20px; font-family: FontAwesome; font-size: 26px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); " id= "oneminus" onclick= "minusOne()" value= "️">
</div>
<script>
function minusOne() {
document.getElementById("oneminus").innerHTML = viewer.goToPage(Math.max(0, viewer.currentPage() - 1)); // 1 pages before;
}
</script>
<!-- Input field for page search -->
<div class="flex-item">
<input type="text" style=" margin-top:5px; width: 75px; text-align:center; color: #666666; background-color:#f6f6f6; border: 1px solid black; margin-left:0px; font-family: roboto; font-size: 14px; font-weight: bold;"; id="my-page-input" value= "1">
</div>
<!-- My own buttons after -->
<!-- +1 page -->
<div class="flex-item">
<input type="button" button title="1 side frem"style="width: 40px; margin-right:3px; text-align:center; color: #f6f6f6; background-color:#666666; margin-left:25px; border:none; font-family: FontAwesome; font-size: 26px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); ";id="oneplus"; onclick="plusOne()" value= "">
</div>
<script>
function plusOne() {
document.getElementById("oneplus").innerHTML = viewer.goToPage(Math.min(viewer.tileSources.length - 1, viewer.currentPage() + 1)); // 1 pages after;
}
</script>
</div>
<div id="openseadragon1" style= "width: site-width; height:500px; border: 1px solid #666666;background-color:#f6f6f6";"margin: auto;">
</div>
<!-- OSD -->
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/openseadragon.min.js">
</script>
<script type="text/javascript">
OpenSeadragon.setString('Tooltips.Home', 'Standard Zoom');
OpenSeadragon.setString('Tooltips.FullPage', 'Se fuldskærm');
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
//showNavigator: true,
navigatorId: "navigatorDiv",
//navigatorPosition: "ABSOLUTE",
//navigatorTop: "900px",
//navigatorLeft: "750px",
//navigatorHeight: "120px",
//navigatorWidth: "100px",
//navigatorPosition: "BOTTOM_RIGHT",
//navigatorHeight: "100px",
//navigatorWidth: "60px",
sequenceMode: true,
preserveViewport: true,
//showReferenceStrip: true,
referenceStripScroll: 'horizontal',
defaultZoomLevel: 0.7,
visibilityRatio: 0.5,
constrainDuringPan: true,
//showRotationControl: true,
//zoomInButton: "zoom-in",
//zoomOutButton: "zoom-out",
//homeButton: "home",
//fullPageButton: "full-page",
//nextButton: "▶️",
//previousButton: "previous",
showZoomControl: false,
showHomeControl: true,
showSequenceControl: false,
showFullpageControl: true,
tileSources: [
{
type: "zoomifytileservice",
width: 7000, // change width and height according your image size
height: 7000,
tilesUrl: "../Zoomify_images/Hele landet/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Hjørring/"
},
{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Hjørring, solo/"
},
{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Aalborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Aalborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Thisted/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Thisted, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Viborg/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Viborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Ringkøbing/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Ringkøbing, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Randers/"
},{
type: "zoomifytileservice",
width: 2800, // change width and height according your image size
height: 2800,
tilesUrl: "../Zoomify_images/Randers, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Århus/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Århus, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Skanderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Skanderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Vejle/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Vejle, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Ribe/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Ribe, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Haderslev/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Haderslev, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Aabenraa/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Aabenraa, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Sønderborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Sønderborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Tønder/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Tønder, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Odense/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Odense, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Svendborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Svendborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Maribo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Maribo, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Præstø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Præstø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Sorø/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Sorø, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Holbæk/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Holbæk, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Roskilde/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Roskilde, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Frederiksborg/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Frederiksborg, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/København/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/København, solo/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Bornholm/"
},{
type: "zoomifytileservice",
width: 3400, // change width and height according your image size
height: 3400,
tilesUrl: "../Zoomify_images/Bornholm/"
}
]
});
<!-- Sikrer at vi kan bruge Enter tast til at søge efter en bestemt side -->
var input = document.getElementById('my-page-input');
input.addEventListener('keypress', function(event) {
if (event.which === 13) { // Return key
viewer.goToPage(parseInt(input.value, 10)-1);
}
});
<!-- Kigger efter at opdatere sidetallet i sidenummerboksen -->
<!-- og kigger efter at opdatere url til en individuel url -->
viewer.addHandler("page", function (data) {
input.value = ( data.page + 1 );
});
</script>
</div>
</div>
<!-- Column3 end-->
<!-- Column4 start-->
<!-- Right sidebar start-->
<!-- Right sidebar end-->
<!-- Column4 end-->
</div>
<!-- Main page end-->
</div>
<!-- Page content end-->
<!-- Footer start-->
<footer class="w3-container w3-light-grey" style="border-top: 1px solid #f6f6f6; padding-bottom:10px;">
<div class="w3-row" >
<div class="w3-col w3-mobile" style=" width: 100%; padding-top: 12px; padding-left: 10px;">
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: bold; font-size: 20px;" > Peter Kroman
</div>
<div class="w3-container" style="text-align: center; font-family: palatino; font-weight: lighter; font-size: 14px;" > <a href="mailto:peter_kroman@genealogiskforum.dk" target="_top">peter_kroman@genealogiskforum.dk</a>
</div>
</div>
</html>
Yes.You can use this code.Paste it and we are going to test it on line.I want to see what is going wrong.See below how it works for me
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Add after line 27 the following
<!-- Add the following line 25 Oct 17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Sorry. I missed that line.
It is fixed now, but I still get this error when trying to get route directions:
It is fixed now, but I still get this error when trying to get route directions:
Go to Google Developer Console and enable these API's that are with the yellow markings.To do this click on the link that I show with the red arrow and search the API's. Directions,Distance and Geocoding
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
As I see you fix it!!!Now..You can set the modal blue button wherever you want (lines 348-350).
Fantastic :) It is working beautifully now :) :)
Just a couple of small things:
1. Is it possible to show the distance between the points on the map
2. is it possible to show that it is walking symbol and the estimated walking time
Just a couple of small things:
1. Is it possible to show the distance between the points on the map
2. is it possible to show that it is walking symbol and the estimated walking time
I will search for this.Give me some time and we will fix that.
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Thanks Leonidas :)
Replace modal (lines 319-344)
And script (lines 463-862)
<!-- Modal content-->
<div class="modal-content" style="width: 752px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="map_2" style="width:700px; height:500px;"></div>
</div>
<div class="modal-footer">
<input type="text" id="start" placeholder="Start Point" style="width:180px; float: left;">
<input type="text" id="end" placeholder="End Point" style="width:180px; float: left;" >
<input type="text" id="distance" placeholder="Distance" style="width:100px; float: left; display:none;">
<input type="text" id="duration" placeholder="duration" style="width:140px; float: left; display:none;" >
<img class="icon icons8-Walking" width="28" height="28" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADHUlEQVRoQ9WZj61NQRCHf68CVIAKUAEqQAWoABWgAlSAClABKkAFqAAVkC85m2zG7O7s2TnJu5PcvPfy9p473+xv/uzeMx1vdyU9knRr+6hPkp5L4ueynS0/of+A15IeNJYA8Wz1848EIPLvBg7eXt2JIwGQyM0BwOdKWrs240iAv0GPlnxYevPAwZMHiEjogyRyZbcduQMnn8RElTL59FTLaPGbBgZIqUhUHv4+iUa2W9vRNx6ZA1EfltZlA1zc5p7Hkvi9tt+Snkh6s+SxeXMWQM9xC3HpPAFEHa99vifpfRbE3h3Y43jxebl51fB7ABiPXzganwkqMiInlm0W4IqkLw3n/2zSuB/wimR+GVg3XDIL8NEZf3EcZ3hdl8SakX2VdGO0KPL/GQBKI9Kp7dXWVYsceqOD9QcAQJYsCuBJxzuMRCbQ4jDwBGXJogBWOsgGufwwn/6rk9w4zOG+GLtGSV2aiSIAnnS8JGSXvnfCSeUB+IJZAwDd+e2erYgA2Ki2zrGUV24hPPspCUASvd6Fei1w5BB9IlxiIwA8rEStJR0cIYqtElqaFw2QLtw77E/NTBEAIkvkeDARag1jyIcoe2bvgDgjIM07HdlcdXLsv+URgKg0e4f41v0PwATF27lzBTAaHZAWO8ILuYZLbOYOkISXG9uVNjrY52cC9G4hyB86r+0bUXk212UBIIGS5K1bCKoPjSvVsgCoUiQjEL1+kHqYIRJZAFQgBjOqTQ8CCSGlcKMabVcGADMRZwQsAkEfeThyLPr/DAArmQgEACm3ExkA3nxTNyEvJ5BQyu1EBgDyQUbFvGHPg0jZhVWAWv8FoOWYHfYYo0n6JVsBoPYT/XqAY1q1N3LFQQ82NO/0CFcA+ALPfjkxkgUJfq1yKDzztCD2AninNE5Ura9Uy+fbXFhO5j0AnhS+bdctowaFvOyxcrRr3RyZBcABDvh11UH3HFCiVySpyTwL4H3zPhvB1GSeAfBqeUT3ngTSknkGwN5ORHXvAaQl8wxAfeKa1b2FsMnc6x9pSUzNJwFHtxPRzsrzmKPKeXjXcPcPf6iyMR1dGTwAAAAASUVORK5CYII=">
<button type="button" id="close_button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal --> And script (lines 463-862)
<script>
var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('g_map');
var SogButton=document.getElementById('Sog');
var NustilButton=document.getElementById('nulstil');
var input = document.getElementById('my-page-input');
var viewer;
var scopeVar;
var map,map_2;
var directionsDisplay;
var columnAmt={Hjørring:2,Aalborg:4,Thisted:6,Viborg:8,Ringkøbing:10,Randers:12,Århus:14,
Skanderborg:16,Vejle:18,Ribe:20,Haderslev:22,Aabenraa:24,Sønderborg:26,
Tønder:28,Odense:30,Svendborg:32,Maribo:34,Præstø:36,Sorø:38,Holbæk:40,
Roskilde:42,Frederiksborg:44,København:46,Bornholm:48
};
function seaDragonInp(arg){
if(arg in columnAmt){
viewer.goToPage(columnAmt[arg]);
input.value=columnAmt[arg];
}
}
function initAutocomplete() {
var directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 8,
mapTypeId: 'hybrid'
});
map_2 = new google.maps.Map(document.getElementById('map_2'), {
center: {lat: 55.3290605, lng: 10.23529080000003},
zoom: 10,
mapTypeId: 'hybrid'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('g_map');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
scopeVar=places[0].scope;
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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.
markers.push(new google.maps.Marker({
map: map,
icon: 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);
});
directionsDisplay.setMap(map_2);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('keyup',function (e){
if(e.keyCode == 13){ console.log('sas');onChangeHandler();e.preventDefault();}
});
document.getElementById('end').addEventListener('keyup',function (e){
if(e.keyCode == 13){console.log('sas'); onChangeHandler();e.preventDefault();}
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'WALKING',
}, function(response, status) {
if (status === 'OK') {
console.log(response);
directionsDisplay.setDirections(response);
$('#distance').val(response.routes["0"].legs["0"].distance.text).show();
$('#duration').val(response.routes["0"].legs["0"].duration.text).show();
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
$('#close_button').on('click',function(){
directionsDisplay.set('directions', null);
$('#distance,#duration').val('').hide();
$('#start,#end').val('');
});
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').append(res);
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.childNodes[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();
cellClick();
});
}
});
NustilButton.addEventListener('click',function (){
debugger;
$('#list_items > table').remove();
console.log(map);
map.setCenter({lat: 55.3290605, lng: 10.23529080000003});
map.setZoom(8);
input.value=1;
viewer.goToPage(0);
});
function cellClick(){
var rows=document.getElementsByTagName('tr');
if(rows.length>0){
for(var i=1;i<rows.length;i++){
rows[i].cells[4].addEventListener('click',function(){
var Stednavn=this.parentNode.childNodes[0].innerHTML;
var Sogn=this.parentNode.childNodes[1].innerHTML;
var Amt=this.parentNode.childNodes[3].innerHTML;
input_1.value=Stednavn+' '+Sogn+' '+Amt;
input_2.value=Stednavn+' '+Sogn+' '+Amt;
input_2.focus();
google.maps.event.trigger(input_2, 'keydown', { keyCode: 13 });
debugger;
seaDragonInp(Amt);
});
}
}
}
cellClick();
</script>
Thanks Leonidas,
Could you please specify which lines/sections in the script lines you have edited?
Could you please specify which lines/sections in the script lines you have edited?
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
I posted before
modal (lines 319-344)
And script (lines 463-862)
modal (lines 319-344)
And script (lines 463-862)
But I can't just change the entire script because I have mad a lot of rework in the scriptlines because of other functionalities. This is why I need to know which scriptlines you have edited, if possible :)
Add after 471
var directionsDisplay;directionsDisplay = new google.maps.DirectionsRenderer;document.getElementById('start').addEventListener('keyup',function (e){
if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
});
document.getElementById('end').addEventListener('keyup',function (e){
if(e.keyCode == 13){onChangeHandler();e.preventDefault();}
});
}function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'WALKING',
}, function(response, status) {
if (status === 'OK') {
console.log(response);
directionsDisplay.setDirections(response);
$('#distance').val(response.routes["0"].legs["0"].distance.text).show();
$('#duration').val(response.routes["0"].legs["0"].duration.text).show();
} else {
window.alert('Directions request failed due to ' + status);
}
});
}$('#close_button').on('click',function(){
directionsDisplay.set('directions', null);
$('#distance,#duration').val('').hide();
$('#start,#end').val('');
});EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Thanks Leonidas,
It now shows the route and the walking distance, but it also starts up with the modal open, and I can't close it :)
It now shows the route and the walking distance, but it also starts up with the modal open, and I can't close it :)
Hi Leonidas,
I have managed to fix it :)
I will now test it, and if there is more details I will get back to you. Is that OK?
I have managed to fix it :)
I will now test it, and if there is more details I will get back to you. Is that OK?
Hi Leonidas,
You have made a fantastic job here. The solution works correctly, fast, and without any problems at all.
Thanks a lot for all your efford, getting the integration with both Google Maps and Open SeaDragon up and running. It has been a huge help for me.
Thanks again.
You have made a fantastic job here. The solution works correctly, fast, and without any problems at all.
Thanks a lot for all your efford, getting the integration with both Google Maps and Open SeaDragon up and running. It has been a huge help for me.
Thanks again.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Thank you very much for your good words. If you need my help again, do not hesitate to ask me.By the way...Could you post the original page link to see how it works and to test it?
Hi again,
Here is the page where the solution is in "production"
https://genealogiskforum.dk/arkivalier/stednavne/
Here is the page where the solution is in "production"
https://genealogiskforum.dk/arkivalier/stednavne/
Hi,
I have mede this radio button in order to make variation in the search conditions.
What I need a little help to do, is to put in an "if-else" statement in the script below. It should access the ajaxListHtml.php file if the radio id "broad" is checked and the ajacListHtlm2.php file if the radio "exact" is checked.
I have mede this radio button in order to make variation in the search conditions.
<form style="color:#9F5584; ">
<input type="radio" id="broad" style="margin-top:5px; position:relative; margin-left: 50px;" checked="checked" name="radio1" value="bredt" label="Søg bredt"/> Søg bredt
<input type="radio" id:="exact" style="margin-top:5px; position: relative;" name="radio1" value="eksakt"/> Søg eksakt
</form>
What I need a little help to do, is to put in an "if-else" statement in the script below. It should access the ajaxListHtml.php file if the radio id "broad" is checked and the ajacListHtlm2.php file if the radio "exact" is checked.
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
(function (){
var rows=document.getElementsByTagName('tr');
var Amt=rows[1].cells[4].parentNode.cells[3].innerHTML;
if(Amt){
seaDragonInp(Amt);
}
})();EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Add this function in script:
function radioBtn(){
var linkPhp;
if($("#broad").is(":checked")) {
linkPhp='ajaxListHtml.php';
return linkPhp;
}else{
linkPhp='ajaxListHtml2.php';
return linkPhp;
}
} input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13 && scopeVar!=='GOOGLE'){
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').append(res);
cellClick();
});
}
});
Thanks Leonidas,
As usual, it works perfectly. And I have added a third radiobutton, and edited the script like this:
And it works like heaven :)
Thanks a lot :)
As usual, it works perfectly. And I have added a third radiobutton, and edited the script like this:
function radioBtn(){
var linkPhp;
if($("#broad").is(":checked")) {
linkPhp='ajaxListHtml.php';
return linkPhp;
}else if($("#exact").is(":checked")){
linkPhp='ajaxListHtml2.php';
return linkPhp;
}else{
linkPhp='ajaxListHtml3.php';
return linkPhp; }
}And it works like heaven :)
Thanks a lot :)
Hi,
I have this script, made from the script we have created in this thread, but just addressing another database.
Everything works fine when using the "Søg" button, including the radio buttons.
Nothing works when hitting the "Enter" key in the searchfield.
You can see the page here: http://kroweb.dk/gfdev/kirkeboeger_raw/
Type e.g. "Ringe" in the searchfield.
What Am I doing wrong.
Here is my script:
I have this script, made from the script we have created in this thread, but just addressing another database.
Everything works fine when using the "Søg" button, including the radio buttons.
Nothing works when hitting the "Enter" key in the searchfield.
You can see the page here: http://kroweb.dk/gfdev/kirkeboeger_raw/
Type e.g. "Ringe" in the searchfield.
What Am I doing wrong.
Here is my script:
<script>
//Variable to be used in the scripts
var input_1 = document.getElementById('input_1'); //main searchfield
var input_2 = document.getElementById('input_2'); //hidden searchfield
var SogButton=document.getElementById('Sog'); //"Søg" buttin
var NustilButton=document.getElementById('nulstil'); //"Nulstil" button
function radioBtn(){
var linkPhp;
if($("#broad").is(":checked")) {
linkPhp='ajaxSognHtml.php';
return linkPhp;
}else if($("#exact").is(":checked")){
linkPhp='ajaxSognHtml2.php';
return linkPhp;
}
}
// "Søg" button function
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
input_2.focus();
});
});
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
// Return key search function
input_2.addEventListener('keyup',function(e){
input_1.value=this.value;
if(e.keyCode===13){
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
input_2.focus();
});
}
});
//"Nulstil" button
NustilButton.addEventListener('click',function (){
$('#list_items > table').remove();
});
</script>Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
This is a logical error, because when you press a key in the input_1 element then is executing this code:
So to do your job you must use this code for input_1 element:
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});So to do your job you must use this code for input_1 element:
input_1.addEventListener('keyup',function(e){
if(e.keyCode===13){
// write your code here
}
});
Now I have this code, and it is still not working:
// Return key search function
input_1.addEventListener('keyup',function(e){
if(e.keyCode===13){
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items > table').remove();
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
});
}
});
Peter you have some script no load errors.One of these is the datatable.js:
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
I Have now removed the script load errors. Still the same. It works with the "Søg" buttton. It is not working with the "Enter" key.
Remove this code from script
input_1.addEventListener('keyup',function(){
input_2.focus();
input_2.value=this.value;
});
Hi Leonidas,
I have done that. No change.
But If I do like this:
If I do like this, I get the same result as described above:
I leave the page with this code, so that you can see how it reacts.
I have done that. No change.
But If I do like this:
// Return key search function
input_1.addEventListener('keyup',function(e){
/*if(e.keyCode===13){ */
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
});
/* } */
});If I do like this, I get the same result as described above:
// Return key search function
input_1.addEventListener('keyup',function(e){
if(e.keyCode!==13){
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
});
}
});I leave the page with this code, so that you can see how it reacts.
Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
When you hit enter the browser tries to submit the form. So to resolve this problem add in the form tag
onsubmit="return false;"// Return key search function
input_1.addEventListener('keyup',function(e){
if(e.keyCode===13){
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
});
}
});
Thanks Leonidas,
That helped on that problem, but caused another.
The "Nulstil" button is now clearing the content of the table but not the table itself and the form.
it has this code:
That helped on that problem, but caused another.
The "Nulstil" button is now clearing the content of the table but not the table itself and the form.
it has this code:
//"Nulstil" button
NustilButton.addEventListener('click',function (){
$('#list_items > table').remove();
});
Instead of remove() method use the empty():
$('#list_items > table').empty();EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
That makes no difference at all.
What I need is that the "Nulstil" button resets the table (id: "list_items) and the searchfield (input_1, tag: "query")completely, and right now it does not do any of those :)
What to do?
What I need is that the "Nulstil" button resets the table (id: "list_items) and the searchfield (input_1, tag: "query")completely, and right now it does not do any of those :)
What to do?
I have manged to clear the searchfield by changing the input type of the "Nulstil" button to "Reset".
But I still have these "left-overs" from the table when ressetting
But I still have these "left-overs" from the table when ressetting
Peter put the input_1 element outside of the form and use these script:
//Variable to be used in the scripts
var input_1 = document.getElementById('input_1'); //main searchfield
var input_2 = document.getElementById('input_2'); //hidden searchfield
var SogButton=document.getElementById('Sog'); //"Søg" buttin
var NustilButton=document.getElementById('nulstil'); //"Nulstil" button
function radioBtn(){
var linkPhp;
if($("#exact").is(":checked")) {
linkPhp='ajaxSognHtml2.php';
return linkPhp;
}else if($("#broad").is(":checked")){
linkPhp='ajaxSognHtml.php';
return linkPhp;
}
}
// "Søg" button function
SogButton.addEventListener('click',function (){
$('#list_items > table').remove();
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
});
});
// Return key search function
input_1.addEventListener('keyup',function(e){
console.log(e.keyCode);
if(e.keyCode===13){
$.ajax({
url: 'ajaxListHtml.php',
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
console.log(res);
$('#list_items').html(res);
$('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
});
}
});
//"Nulstil" button
NustilButton.addEventListener('click',function (){
input_1.value='';
$('#list_items > table').empty();
});onsubmit="return false;"Get a FREE t-shirt when you ask your first question.
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Thanks Leonidas,
I have managed to solve it this way:
I have managed to solve it this way:
//"Nulstil" button
NustilButton.addEventListener('click',function (){
document.getElementById("exact").checked = true;
document.getElementById("broad").checked = false;
$.ajax({
url: radioBtn(),
data: {query:input_1.value},
method:'POST',
dataType: 'html'
}).done(function (res){
$('#list_items').html(res);
$('#tdata').DataTable({searching: false, paging: false, info: false, "dom": '<"top"<if>', order: []});
$('#list_items > table').remove();
});
});JavaScript
--
Questions
--
Followers
Top Experts
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.