Example how to use jQuery and Google Geolocation Module API in HTML forms.

Get Google API Key from their sign-up page.

Notice 22. October 2008. For some reason this isn't working currently. I'm working on it...

Live example

Home city:

Source

JavaScript (Direct download)


<script type="text/javascript" src="_PATH_TO_JQUERY_.js"></script>

<script type="text/javascript" language="javascript" src="http://www.google.com/jsapi?key=_YOUR_GOOGLE_API_KEY_HERE_"></script>

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
       // If input is empty and google can found location...
                
        if( $("input#city").attr("value") == "" && google.loader.ClientLocation.address.city) {        
            // Set suggested city

            var locationCity = google.loader.ClientLocation.address.city;

        	$("span#clientLocation_city_name").text(locationCity);

        	// Show question

            $("#clientLocation_city").show();

            // If user confirms

            $("a#clientLocation_city_confirm").click(function () {
                // Set input value

                $("input#city").attr("value",locationCity);

                // Hide question

                $("#clientLocation_city").fadeOut("slow");

                return false;
        	});
   		}
    });
</script>

HTML:


<label for="city">City</label> <input type="text" value="" name="city" id="city" />

<p id="clientLocation_city" style="display: hidden;">
    <small>
        Is <script language="javascript" type="text/javascript">document.write('<span id="clientLocation_city_name">'+google.loader.ClientLocation.address.city+'</span>');</script> your home city? 

        <a href="#" id="clientLocation_city_confirm">Yes</a>
    </small>
</p>

By. Mikael Korpela
www.ihminen.org
26. August 2008