Google map geocoding with form submit

Question

Problem: I have a form with some input fields, and i'm trying to convert the adress to geocode before it submits to my controller (using Spring MVC). But somehow my geolocation field is empty after the conversion... And for some reason the same code does work on a form without a submit. Can someone help me please? Thanks a lot!

Code:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="domain.Location"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Leuven Speaks</title>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
    </head>
    <body>
        <jsp:include page="header.jspf"/>
        <script type="text/javascript" src="<c:url value="/js/style.js" />"></script>

        <form name="addLocation" method="POST" action="addLocation.htm" commandName="location" onsubmit="changeAdress()">
            <table>
                <tr>
                    <td>Name</td>
                    <td><input type="text" name="name"/></td>
                </tr>
                <tr>
                    <td>Adres</td>
                    <td><input type="text" id="adress" name="adress"/></td>
                </tr>
                <tr>
                    <td><input type="text" id="geolocation" name="geolocation"/></td>
                </tr>
            </table>
                <input type="hidden" name="id" value="${location.id}"/>
                <input type="submit" name="action" value="Save"/>
                <input type="submit" name="action" value="Cancel"/>
        </form>
    </body> 

    <script type="text/javascript">
        function changeAdress(){
            var adres = document.getElementById("adress").value;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': adres}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    document.addLocation.geolocation.value = latitude + " " + longitude;
                } 
            });
            //geolocation is empty...
            alert(document.getElementById("geolocation").value);
            return true;
        }
    </script>
</html>

geocodezip · Accepted Answer · 2015-04-15T10:16:11.683

0

Geocoding is asynchronous, submit the form it the callback routine.

function changeAdress(){
    var adres = document.getElementById("adress").value;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': adres}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            document.addLocation.geolocation.value = latitude + " " + longitude;
            alert(document.getElementById("geolocation").value);
            document.addLocation.submit();
        } else alert("geocode failed:"+status); 

    });
    return false;
}

proof of concept fiddle

edited Apr 15 '15 at 10:16

answered Apr 15 '15 at 09:53

geocodezip

158,664
13
220
245

It's still not working. I have added alert("ok") before the geocoder.geocode function, and 1 after. Only ok before the function pops up, somehow it doesn't go to the geocode funciton... – Chen Chen Apr 15 '15 at 10:03
It puts the coordinates in the form for me. – geocodezip Apr 15 '15 at 10:16
for some reason i dont get the alert + it doesn't put the coordinates, and redirect me direcly to the error page... – Chen Chen Apr 15 '15 at 11:48

Google map geocoding with form submit

1 Answers1