geocoding.js
reverseGeocoding.js
default.html
myStyle.css
function initialize(lat, lng, address){ var latlng = new google.maps.LatLng(lat, lng) var mapOptions = { center: latlng, zoom: 4 }; var map = new google.maps.Map(document.getElementById("myMap"), mapOptions); var marker = new google.maps.Marker({ position: latlng, title: address, map: map, draggable: true }); var infotext = address + '
' + 'Latitude: '+lat+' Longitude: '+lng; var infowindow = new google.maps.InfoWindow(); infowindow.setContent(infotext); infowindow.setPosition(new google.maps.LatLng(lat, lng)); infowindow.open(map); } function getLatLng(){ var address = document.getElementById("txtAddress").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function(results, status){ if (status == google.maps.GeocoderStatus.OK){ var longaddress = results[0].address_components[0].long_name; initialize(results[0].geometry.location.lat(), results[0].geometry.location.lng(), longaddress); } else{ alert('Geocode error: ' + status); } }); }
function getAddress(lat, lng){ var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({ 'latLng': latlng }, function(results, status){ if (status == google.maps.GeocoderStatus.OK){ if (results[1]){ var address = results[1].formatted_address; alert(address); } else{ alert("No results found"); } } else { alert("Geocoder failed due to: " + status); } }); } function getLocation() { var x = document.getElementById("btnGetAddress"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { getAddress(position.coords.latitude, position.coords.longitude) }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Search Location</title> <link rel="stylesheet" type="text/css" href="Styles/myStyle.css" /> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="> </script> <script type="text/javascript" src="Scripts/geocoding.js"> </script> <script type="text/javascript" src="Scripts/reverseGeocoding.js"> </script> </head> <body onload="initialize(28.4990296, 77.06971279999993, 'Nagarro Software')"> <div style="width:1350px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;"></h1> <center> <h1 style="margin-bottom:0;">Location Provider</h1> </center> </div> <div id="left-column" style= "background-color:#FFD700;height:540px;width:155px;float:left;"> <a href="default.html">Geocoding</a><br /> <p><a href="#" onclick="getLocation()">Reverse Geocoding</a><br /></p> </div> <div id="content" style="background-color:#EEEEEE;float:left;style=" width:="" height:=""> <div style="width:500px;"> <input id="txtAddress" type="text" class="textbox" placeholder= "Enter address here..." /> <input id="btnGetLatLng" type="button" class="button" value="Submit" onclick="getLatLng();" /> </div> <div id="myMap" style="width: 1160px; height: 505px;"></div> </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> © Arjun sunel </div> </div> </body> </html>
body { background-color: gray; } input.button { background-color: blue; color:white; font-family: "Segoe UI"; border: 0px none; font-size: 100%; height: 2.142em; min-width: 6em; width:150px } input.textbox { border: 1px solid #BABABA; color: #212121; font-family: "Segoe UI"; font-size: 100%; padding: 4px 8px; width:325px; height:22px; z-index: 6 }