• Get Latitude and Longitude from an Address

    Posted on May 29, 2012 by in Javascript, Other Programming

    Lookup latitude and longitude coordinates on Google Maps (Not API)

    To Lookup the geographic latitude and longitude coordinates of an address, you can follow the steps below

    1 – Type in the address in google maps
    2 – once you locate the address you want, just right click and select what’s here? in the menu
    3 – Click on the green arrow to get the coordinates

    Get latitude and longitude coordinates using Google Maps API

    You can retrieve the coordinates of an address using a Geocdoding API provided by google. Geocoding is the process of converting addresses (like “350 W 34th St, Manhattan, NY 10001”) into geographic coordinates (like latitude 40.748492 and longitude -73.985496), which you can use to place markers or position the map. The geocoding API also allows you to perform the converse operation (turning coordinates into addresses); this process is known as “reverse geocoding.”

    There is a limit on the number of requests for the API, Currently Google Geocoding API is subject to a query limit of 2,500 geolocation requests per day (User of Google Maps API for Business may perform up to 100,000 requests per day.)

    Note: You may pass either an address or a latlng to lookup. (If you pass a latlng, the geocoder performs what is known as a reverse geocode. See Reverse Geocoding for more information.)

    The code does a simple call,sending the address and retrieving the geographic coordinates

    	        var geocoder;
    	        geocoder = new google.maps.Geocoder();
    	        geocoder.geocode({ 'address': address }, function (results, status) {
    	            if (status == google.maps.GeocoderStatus.OK) {
    	                var latlng = results[0].geometry.location;
    	                $("#spnCoordinates").html("Coordinates for address provided, Latitude " + latlng.lat() + " , Longitude " + latlng.lng());
    	                placeMarker(latlng);
    	            } else {
    	                alert("Geocode was not successful for the following reason: " + status);
    	            }
    	        });  //geocoder
    
    

    Here is code for complete example

    <!DOCTYPE html>
    <html lang="en-US">
     <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<title>::Maps ::</title>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao"></script>
    	<script type="text/javascript">
    	    var map;
    	    $(document).ready(function () {
    	        var latlng = new google.maps.LatLng(40.748492, -73.985496);
    	        var myOptions = {
    	            zoom: 15,
    	            center: latlng,
    	            mapTypeId: google.maps.MapTypeId.ROADMAP
    	        };
    	        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    	        $("#btnGo").click(function () {
    	            getLatLangFromAddress($("#txtAddress").val());
    	        }); //$("#btnGo").click()
    
    	    });
    
    	    function getLatLangFromAddress(address) {
    	        var geocoder;
    	        geocoder = new google.maps.Geocoder();
    	        geocoder.geocode({ 'address': address }, function (results, status) {
    	            if (status == google.maps.GeocoderStatus.OK) {
    	                var latlng = results[0].geometry.location;
    	                $("#spnCoordinates").html("Coordinates for address provided, Latitude " + latlng.lat() + " , Longitude " + latlng.lng());
    	                placeMarker(latlng);
    	            } else {
    	                alert("Geocode was not successful for the following reason: " + status);
    	            }
    	        });  //geocoder
            }
    
            function placeMarker(latlng) {
                var location = new google.maps.LatLng(latlng.lat(), latlng.lng());
    
                var myOptions = {
                    zoom: 15,
                    center: location,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
    
            }
    	</script>
    	<style type="text/css">
    		html,body { height: 100%; margin: 0px; padding: 0px; }
    		#map_canvas {
    			width:1000px;
    			height:800px;
    		}
    		
    		.text 
    		{
    		    border:1px solid black;
    		    width:300px;
    		}
    		label 
    		{
    		    width:100px;
    		}
    	</style>
    </head>
    <body >
    <div>
        <label>Address : </label><input id="txtAddress" type="text" class="text" value="350 W 34th St, Manhattan, NY 10001" /> <input type="button" id="btnGo" value="Go" />
        <span id="spnCoordinates" style="color:Green;font-weight:bold;"></span>
    </div>
    <div id="map_canvas">
    
    </div>
    <!--main-->
    <div id="map_cord"></div>
    </body>	
    </html>
    

    Click the code below to see the code in action

    For downloading complete set google maps api examples, click the link below

    NOTE : If you download the source from the example, please do change the API KEY. If you do use the icons, please go to

    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    3 Responsesso far.

    1. Rupl says:

      latlng.Latitude seems undefined.so can not set the position on map..just click on view demo and check it

    Leave a Reply