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
}
No comments:
Post a Comment