Emplacement du marqueur Google

Question

J'ai actuellement un code qui, lorsque vous appuyez sur le bouton Soumettre, un marqueur doit être placé sur une carte en fonction de la valeur qui est dans une liste déroulante. J'ai fait en sorte que la valeur dans la liste déroulante ira dans l'URL via une méthode de formulaire GET pour le code PHP et passera également la valeur via le paramètre à la fonction javascript. Le problème que je rencontre est que je dois appuyer deux fois sur le bouton soumettre pour que le marqueur apparaisse sur la carte. C'est moins qu'idéal et je cherche de l'aide pour essayer de résoudre ce problème. Merci.

Ceci est le code de fonction javascript:

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); 
       } 
      }); 
     } 

Ceci est mon formulaire HTML:

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

Answer 1

Cela devrait en fait travailler, à condition que vos valeurs sont toutes dans des plages appropriées. En testant une version réduite de ceci, je peux taper une adresse, cliquer soumettre et les marqueurs apparaissent là où ils devraient être.

J'ai quelques théories expliquant pourquoi vous cliquez deux fois avant de voir un résultat.

(1) Lookup latence: assurez-vous de suivre les états du géocodeur et de lui laisser amplement le temps de fonctionner.

(2) Glitch: Dans certains moteurs de rendu de carte, vous avez parfois besoin de parcourir des cartes pour un marqueur. Par exemple, cet ensemble d'appels successifs: marker.setMap(null); marker.setMap(map); va cacher/afficher un marqueur et parfois déglacer l'affichage.

(3) Soumettre une interruption: Si l'interface est plus complexe que celle que vous avez indiquée et peut interférer, votre formulaire submit (#) doit probablement être empêché de soumettre. En d'autres termes, vous devez empêcher le navigateur de se rendre à l'adresse # après avoir cliqué sur Soumettre afin de permettre à JavaScript/ajax de faire son travail.

Voici une version réduite du formulaire; notez le return (false) part - il empêche l'adresse du navigateur de passer à #.

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

Notez que j'ai simplifié cette adresse en texte; dans mon test réel j'ai envoyé les données de cette façon:

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