Google Marker Platzierung

Question

Ich habe derzeit einige Code, die, wenn Sie die Schaltfläche Senden drücken, sollte eine Markierung auf einer Karte entsprechend dem Wert, der in einem Dropdown-Listenfeld ist platziert werden. Ich habe es so gemacht, dass der Wert in der Drop-Down-Box in die URL über eine GET-Form-Methode für den PHP-Code gehen und den Wert über Parameter an die Javascript-Funktion übergeben wird.

Das Problem, das ich habe, ist, dass ich zweimal auf den Submit-Button drücken muss, damit der Marker auf der Karte erscheint. Dies ist weniger als ideal und ich suche nach Hilfe, um dieses Problem zu beheben. Vielen Dank.

Dies ist die JavaScript-Funktion Code:

function placeMarker(address) 
     {  
      // ... Set up map code here 

      var map = new google.maps.Map(document.getElementById("universityMap"), myOptions); 

      <?php 
       $uniname = $_GET['uninames'];  

       //Get the Uni code according to the uni name 
       $queryUniID = $mysqli->prepare("SELECT IdCode FROM universityid WHERE UniName = ?"); 
       $queryUniID->bind_param('s', $uniname); 
       $queryUniID->execute(); 
       $queryUniID->bind_result($unicode); 
       $queryUniID->fetch(); 
       $queryUniID->close(); 

       //Load the question data into relevant variables 
       $queryQuestions = $mysqli->prepare("SELECT QuestionNo, Answered1, Answered2, Answered3, Answered4, Answered5 FROM nssdata WHERE UniID = ?"); 
      ?> 

      address = address + ", UK"; 
      geocoder.geocode({'address': address}, function(results, status) 
      { 
       if (status == google.maps.GeocoderStatus.OK) 
       { 
        marker = new google.maps.Marker(
        { 
         map: map, 
         position: results[0].geometry.location, 
         title: address, 
         draggable: false 
        }); 
       } 
       else 
       { 
        alert(status); 
       } 
      }); 
     } 

Das ist mein HTML-Formular:

 <form action="#" onsubmit="placeMarker(this.uninames.value)" method="get"> 

Answer 1

Dies sollte eigentlich funktionieren, vorausgesetzt, dass Ihre Werte alle in geeigneten Bereichen sind. Wenn ich eine reduzierte Version davon teste, kann ich eine Adresse eingeben, auf Senden klicken und die Markierungen erscheinen genau dort, wo sie sein sollten.

Ich habe ein paar Theorien, warum Sie zweimal klicken, bevor Sie ein Ergebnis sehen.

(1) Lookup-Latenz: Stellen Sie sicher, dass die Geocodierer-Zustände verfolgt werden und genügend Zeit für die Ausführung haben.

(2) Glitch: In einigen Map-Renderern müssen Sie manchmal Karten für einen Marker radfahren. Zum Beispiel wird diese Reihe von aufeinander folgenden Anrufen: marker.setMap(null); marker.setMap(map); wird eine Markierung verstecken und zeigen und manchmal die Anzeige glätten.

(3) Submit Unterbrechung: Wenn die Schnittstelle komplexer ist als Sie angegeben haben und möglicherweise stören, muss Ihr Formular absenden (#) wahrscheinlich verhindert werden. Mit anderen Worten, Sie müssen den Browser davon abhalten, nach dem Senden auf die # -Adresse zu wechseln, damit Sie JavaScript/ajax arbeiten lassen können.

Hier ist eine reduzierte Version des Formulars; Beachten Sie die Rückgabe (false) Teil - es verhindert, dass Browser-Adresse auf # ändern.

<form action="#" onsubmit="placeMarker('adr');return(false);" method="get"> 
    <input type="text" id="id_address" /> 
    <input type="submit" /> 
</form> 

Beachten Sie, dass ich diese Adresse zu Text vereinfachte; in meinem eigentlichen Test schickte ich Daten auf diese Weise:

placeMarker(document.getElementById('id_address').value);