Hallo Leute,
folgendes Script soll Longitude und Latitude einer DropDownBox-Städteauswahl angeben und die Angabe dann in GoogleMaps anzeigen. Die Anzeige funktioniert soweit reibungslos. Allerdings werden in etwa einem von fünf Versuchen völlig willkürlich die Longitude/Latitude-Angaben nicht in die Readonly Inputfelder übernommen. Warum ist dem so?
Wie könnte das Script verbessert werden?
folgendes Script soll Longitude und Latitude einer DropDownBox-Städteauswahl angeben und die Angabe dann in GoogleMaps anzeigen. Die Anzeige funktioniert soweit reibungslos. Allerdings werden in etwa einem von fünf Versuchen völlig willkürlich die Longitude/Latitude-Angaben nicht in die Readonly Inputfelder übernommen. Warum ist dem so?
Wie könnte das Script verbessert werden?
Javascript:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title> JQUERY und Google </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" integrity="sha256-sEFM2aY87nr5kcE4F+RtMBkKxBqHEc2ueHGNptOA5XI=" crossorigin="anonymous"></script>
<style>
#ort{
background-color:yellow;
position:absolute;
top:100px;
right:775px;
border:2px solid #73AD21;
}
a{
color:red
}
</style>
</head>
<body>
<div id="uhr"></div>
<center><h3>Searching for places</center></h3>
<p>Dieses AJAX-Script findet eingegegebene Plätze ihrer Wahl und zeigt diese auf einer Karte an</p>
<input id="ort" class="bez", placeholder="Hier den Ort eingeben" type="text"><br><br>
<input id="send" type="submit"><br><br>
<div id="ergebnis">
<label>latitude</label><input id="lat" readonly="readonly">
<label>longitude</label><input id="lng" readonly="readonly">
<a id="map" href='https://www.youtube.com/watch?v=SvnBbmfUCMQ'>Map</a>
</div>
<?php
?>
<script>
//Dieser Code initialisert die Uhr
function ticken(){
var stunden, minuten, sekunden;
var StundenZahl, MinutenZahl, SekundenZahl;
var heute;
heute = new Date();
StundenZahl = heute.getHours();
MinutenZahl = heute.getMinutes();
SekundenZahl = heute.getSeconds();
stunden = StundenZahl+":";
if (MinutenZahl < 10)
minuten = "0" + MinutenZahl + ":";
else
minuten = MinutenZahl + ":";
if (SekundenZahl < 10)
sekunden = "0" + SekundenZahl + " ";
else
sekunden = SekundenZahl + " ";
zeit = stunden + minuten + sekunden + " Uhr";
uhr.innerHTML = zeit;
window.setTimeout("ticken();", 1000);
}//End of ticken
window.onload = ticken;
//Dieser Code initialisert Google map(über Longitude/Latitude)
$(document).ready(function(){
var url = 'http://maps.googleapis.com/maps/api/geocode/xml?address=';
var suf = '&sensor=true_or_false';
$.ajaxSetup(
{
type: "GET", //es hat sich zur Regel gemacht, die Methoden GET und POST groß zu schreiben
dataType: "xml", // festlegen auf XML, automatisch parsen lassen
// Daten -> responseXML
contentType: "text/xml"
//garantiert das Parsen nach Erhalt
}
);
$('#send').click(function(){
//erst testen, ob gültige Eingabe
var ort = $('#ort');
if (ort.val().length == 0){
$('#lat').val('');
$('#lng').val('');
alert("Bitte einen gültigen Ort eingeben");
return;
}else
alert("Longitude und Latitude wird neu initialisiert.\nÜber den roten Link wird "+ort.val()+" auf der Karte angezeigt...");
$.ajax({//type: "GET",
url: url + ort.val() + suf,
//dataType: "xml",
success:function(xml){
var loc = $(xml).find('location');
$('#lat').val(loc.find('lat').text());
$('#lng').val(loc.find('lng').text());
$('#map').attr('href','https://www.google.de/maps/@'
+ $('#lat').val()
+ ','
+ $('#lng').val()
+ ',12z');
}
});//END of ajax
});//END of onclick
});//END of ready
</script>
<script>
$(document).ready(function(){ //idealerweise sollten diese Werte aus einer Datenbank kommen
var cities = ['Augsburg','Athen','Berlin','Brüssel','Cellle','Charleston','Düsseldorf','Dublin','Essen','Exeter','Frankfurt','Faro','Giesen','Göteborg','Hannover','Haugesund',
'Jena','Jakobstad','Kappeln','Kalkutta','Laatzen','London','München','Montreal','Neustadt','Narvik','Oldenburg','Ostrava','Potsdam','Porto','Quickborn','Quimper','Ravensburg','Rom','Sindelfingen','Salzburg ',
'Tübingen','Turin','Ulm','Ube','Verle','Valencia','Würzburg','Wien','Xanten','Xiamen','Yokohama','Yaoundé','Zuffenhausen','Zabol','Öpfingen','Ötzingen','Üttfeld','Ühlingen-Birkendorf'];
$('#ort').autocomplete({
source:cities
});//END of complete
});//END of ready
</script>
</body>
</html>
Zuletzt bearbeitet:
