Question

I currently have some code which when you press the submit button, a marker should be placed on a map according to the value that is in a drop down list box. I have made it so that the value in the drop down box will go into the URL via a GET form method for the PHP code and will also pass the value via parameter to the javascript function.

The problem I am having is that I have to press the submit button twice so that the marker will appear on the map. This is less then ideal and I am looking for some help to try fix this problem. Thanks.

This is the javascript function 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);
                }
            });
        }

This is my html form:

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

Answer 1

This should actually work, provided that your values are all within proper ranges. In testing a reduced version of this, I can type an address, click submit and markers show up right where they should be.

I have a few theories as to why you are clicking twice before seeing a result.

(1) Lookup latency: make sure to track geocoder states and give it ample time to perform.

(2) Glitch: In some map renderers, you sometimes need to cycle maps for a marker. For example, this set of successive calls: marker.setMap( null ); marker.setMap( map ); will hide/show a marker and sometimes unglitch the display.

(3) Submit interruption: If the interface is more complex than you have stated and is possibly interfering, your form submit (#) probably needs to be prevented from submitting. In other words, you must stop the browser from going to the # address after clicking submit so you can let JavaScript/ajax do its work.

Here’s a reduced version of the form; note the return(false) part – it prevents browser address from changing to #.

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

Note that I simplified this address to text; in my actual test I sent data this way:

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