AJAX / GoogleMap inkonsequent

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

tklustig

Erfahrenes Mitglied
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?
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:
Ich konnte es ein paar Mal reproduzieren und bekam im Fehlerfall ein "over query limit" im Statusfeld. Wenn ich das, was man im Netz dazu findet, richtig verstehe, tritt dieser Fehler auf, wenn zu viele Anfragen gleichzeitig beim Server eintreffen. Empfohlene Abhilfe:
  • Die Abfrage nach kurzer Zeit, etwa einige 100 ms, wiederholen.
  • Die Ergebnisse cachen. Wahrscheinlich gerade in deinem Fall angebracht, weil die Zahl der Orte begrenzt ist und sich das Ergebnis der Abfrage nicht ändert.
 
Also liegts nicht am Code. Dachte ich mir bereits. Das dumme ist, dass ich eine Wiederholung eigentlich niemandem zumuten kann. Der User drückt auf den Button, nix passiert und geht dann verärgert wieder...
 
Nein, so war das nicht gemeint, sondern eine automatische Wiederholung durch das Skript und die Funktion setTimeout. Wenn es sich um einige 100 ms handelt, würde der Benutzer kaum etwas davon mitbekommen. Besser noch wäre, die Ergebnisse zu cachen, dann hättest Du sie auf dem eigenen Server und der Zugriff wäre relativ schnell.
Das Problem wird hier diskutiert und ein Lösung mit setTimeout angegeben, allerdings für die Javascript-API und nicht die Abfrage per URL:
https://stackoverflow.com/questions/9805529/geocoding-api-over-query-limit
 
Besser noch wäre, die Ergebnisse zu cachen, dann hättest Du sie auf dem eigenen Server und der Zugriff wäre relativ schnell.
Wie macht man den sowas? Das geht doch nur am Client oder nicht ?
Ich habe eine Api die Ip-Adressen zu der Stadt raussucht. Das Ergebniss auf den Server zu cachen wäre supi!
Wie kann man sowas erreichen ?
 
Wie soll denn das gehen, eine IP zu einer Stadt zu suchen?? Eine IP-Adresse gibt es doch nur für Rechner innerhalb eines Netzes, nicht für Städte. Der DNS-Server löst dann die Domain in eine IP-Adresse auf und umgekehrt....
 
Das kenne ich auch so in der art. Der Zeigt einen die Stadt an wo dessen Server steht oder o ähnlich. Ist aber auch ungenau.Ich komme aus Minden und es steht beim Paderborn. Ca 80 km daneben.
EDIT: hier geht das https://www.geoplugin.com/
Nur das zu cachen ist auch schwachsinnig. Erstens geht es doch schnell mit der Api und außerdem kann man auch für die Datenbank die Daten runterladen. Aber sollte jeder selber wissen
 
Zuletzt bearbeitet:
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück