Geocoding API form submit

Question

So I have a form that the user completes and I'm trying to submit the geocoded object with the form so google maps API can plot it.

HTML:

<form name="add" onsubmit="submits()" action="index.php" method="post">
    Resource Name: <textarea name="name" type="text"></textarea><br><br>
    Resource Type: <textarea name="type" type="text"  ></textarea><br><br>
    Street Number: <input type="number" id = "streetnum" name="streetnum"><br> 
    Street Name: <input type="text" id="streetnam" name="streetnam"><br> 
    City: <input type="text" id="city" name="city"> 
    State: <input type="text" id="state" name= "state"> <br><br>
    Resource Start Date: <input type="date" name="start" id="start"/> <br>
    Resource End Date: <input type="date" name="end" id="end">
    <input type="text" name="addressobject" id="addressobject" style="display:none" >
    <input type= "checkbox" name="annual" id= "annual" value="annual">Annual<br><br>
    <div id="new">
    </div>
    Details: <textarea name="details" rows=5  type="text" ></textarea>
    <input name="submit" type="submit" value="Create Event"/>

    <button type="button" onclick="addNew()">Add more date fields</button>
    <button type="button" onclick="deleteAtt()">Delete a date field</button>
</form>

Javscript:

<script>
function submits(){
    var address= document.getElementById("streetnum").value + " " + document.getElementById("streetnam").value+ ", " + document.getElementById("city").value+", " + document.getElementById("state").value;
    var JSONobject;
    var geocoder = new google.maps.Geocoder();
    if(geocoder){
        geocoder.geocode({'address':address}, function(results,status){
            if(status==google.maps.GeocoderStatus.OK){
                if(status!=google.maps.GeocoderStatus.ZERO_RESULTS){
                    JSONobject = window.JSON.stringify(results);
                    document.getElementById("addressobject").value = JSONobject;
                }else{
                    alert("No results found");
                }
            }else{
                alert("Geocode was not successful for the following reason: " +status);
            }
        });
    }   
}
</script>

For some reason when I call submits() from the console it works but when I actually use the button I get the error:

GEOCODE was not successful for the following reasons :ERROR

Answer 1

1. the result of JSON.stringify(results) will not be portable across versions of the API. The "internal property" names ("k", "j", "Aa", "ra", etc) of the google.maps objects can and do change with new releases of the API:

   "[{"address_components":[{"long_name":"532","short_name":"532","types":["street_number"]},{"long_name":"Beacon Street","short_name":"Beacon St","types":["route"]},{"long_name":"Back Bay West","short_name":"Back Bay West","types":["neighborhood","political"]},{"long_name":"Boston","short_name":"Boston","types":["locality","political"]},{"long_name":"Suffolk County","short_name":"Suffolk County","types":["administrative_area_level_2","political"]},{"long_name":"Massachusetts","short_name":"MA","types":["administrative_area_level_1","political"]},{"long_name":"United States","short_name":"US","types":["country","political"]},{"long_name":"02215","short_name":"02215","types":["postal_code"]}],"formatted_address":"532 Beacon Street, Boston, MA 02215, USA","geometry":{"location":{"k":42.3505906,"A":-71.0911074},"location_type":"ROOFTOP","viewport":{"Aa":{"k":42.3492416197085,"j":42.3519395802915},"ra":{"j":-71.09245638029154,"k":-71.08975841970846}}},"partial_match":true,"types":["street_address"]}]"
   

2. The geocoder is asynchronous, the results of the geocode operation are not returned immediately, you don't want to submit the form until the results are back from the Google server (in the callback routine). Something like this:

   function submits(){
     var address= document.getElementById("streetnum").value + " " + document.getElementById("streetnam").value+ ", " + document.getElementById("city").value+", " + document.getElementById("state").value;
     var JSONobject;
     var geocoder = new google.maps.Geocoder();
     if(geocoder){
        geocoder.geocode({'address':address}, function(results,status){
          if(status==google.maps.GeocoderStatus.OK){
            if(status!=google.maps.GeocoderStatus.ZERO_RESULTS){
              JSONobject = window.JSON.stringify(results);
              document.getElementById("addressobject").value = JSONobject;
              // submit the form now that all the data is available.
              document.getElementById("add").submit();
            }else{
              alert("No results found");
            }
          }else{
           alert("Geocode was not successful for the following reason: " +status);
          }
        });
     }
     return false;   
   }