Web Code Blog

In this article, I will try and explain how to obtain the latitude and longitude co-ordinates for an address using the Google Maps API.  The reason you will need the latitudes and longitudes for addresses is mainly so that you can store this information along with your address information in the event that you may want to show these addresses on a map (on your website for example).

So, first things first, if you have not already applied for a Google Maps API Key, make sure you do so by following this link (http://code.google.com/apis/maps/signup.html).

Now, create a simple ASP.NET web form.  On this web form’s aspx page, you will want to make a reference to Google Maps.  So place code like the below onto your page:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YabbaDabbaDoo" type="text/javascript"></script>

Note: You will want to replace the “YabbaDabbaDoo” with your own Google Maps API Key.

In the body of your web page, lets place some textboxes on the form so that we can enter the address details that we want to find the co-ordinates for (and a button to perform the co-ordinates calculation):

<div align="left"><b>Address Line 1:</b></div>
<div><asp:TextBox id="txtAddress1" TextMode="MultiLine" Rows="2" runat="server" MaxLength="50" ></asp:TextBox></div>
<div align="left"><b>Address Line 2:</b></div>
<div><asp:TextBox id="txtAddress2" TextMode="MultiLine" Rows="2" runat="server" MaxLength="50" ></asp:TextBox></div>
<div align="left"><b>Town:</b></div>
<div><asp:TextBox id="txtTown" runat="server" MaxLength="50"></asp:TextBox></div>
<div align="left"><b>Postcode:</b></div>
<div><asp:TextBox id="txtPostcode" runat="server" MaxLength="10"></asp:TextBox></div>
<div align="left"><b>Country:</b></div>
<div><asp:TextBox id="txtCountry" runat="server" MaxLength="50"></asp:TextBox></div> 

<div align="left"></div>
<div><input id="btnCalculateCoordinates" type="button" value="Calculate Coordinates"
            onclick="calculateCoordinates();" /></div>
<div align="left"><b>Latitude:</b></div>
<div><asp:TextBox id="txtLatitude" runat="server" Width="100px"></asp:TextBox></div>
<div align="left"><b>Longitude:</b></div>
<div><asp:TextBox id="txtLongitude" runat="server" Width="100px"></asp:TextBox></div> 

    

Now all that is left to do is to create the javascript function that will perform the calculation. So here it is:

<script type="text/javascript">

    function calculateCoordinates() {

        var txtAddress1 = document.getElementById('<%= txtAddress1.ClientID%>');
        var txtAddress2 = document.getElementById('<%= txtAddress2.ClientID%>');
        var txtTown = document.getElementById('<%= txtTown.ClientID%>');
        var txtPostcode = document.getElementById('<%= txtPostcode.ClientID%>');
        var txtCountry = document.getElementById('<%= txtCountry.ClientID%>');
        var txtLatitude = document.getElementById('<%= txtLatitude.ClientID%>');
        var txtLongitude = document.getElementById('<%= txtLongitude.ClientID%>');

        var address = txtAddress1.value + ', ';
        address += txtAddress2.value + ', ';
        address += txtTown.value + ', ';
        address += txtPostcode.value + ', ';
        address += txtCountry.value;

        var geocoder;
        geocoder = new GClientGeocoder();
        geocoder.getLatLng(address, function(latlng) {
            if (!latlng) {
                alert(address + ' not found');
            } else {
                txtLatitude.value = latlng.lat();
                txtLongitude.value = latlng.lng();
            }
        });

    }

</script> 

Hope this helps,

Stefan.

For more Web Code, ASP.NET, SQL Server and other development tips, please check back here at webcodeblog.com often.