Lalitha Parameswari
asked on
Geographic center of a pincode
Hi I need to find the distance between 2 pin codes. For that i would like to find the center point within each pincode and calculate distance between them. This is for my internship project. So how to find the center point within each pin code?
here is a solution that i created for you, BUT THERE IS A BUG IN MY CODE !!! (!after the second click starts to search and makes the route!)
-create a new API key and paste in
-you will need to enable from Google Console the Map API + GeoCoding API
screenshot:
-create a new API key and paste in
-you will need to enable from Google Console the Map API + GeoCoding API
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying Text Directions With setPanel()</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map {
margin-right: 400px;
}
#floating-panel {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
@media print {
#map {
height: 500px;
margin: 0;
}
#right-panel {
float: none;
width: auto;
}
}
</style>
<!--async defer-->
<script
src="https://maps.googleapis.com/maps/api/js?key=PASTE_YOUR_API_KEY">
</script>
</head>
<body onload="initMap()">
<div id="floating-panel">
<form onsubmit="codeAddress(); return false" action="#">
<strong>Start:</strong>
<input id="start" size="30" type="text" value="403503" />
<br>
<strong>End:</strong>
<input id="end" size="30" type="text" value="788003" />
<input type="submit" value="GO!">
<input type="button" onclick="clear()" value="Clear markers" />
</form>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script>
var map;
var directionsDisplay;
var directionsService;
var firstAddress;
var secondAddress;
var geocoder;
function initMap() {
directionsDisplay = new google.maps.DirectionsRenderer;
directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
/*geocoder = new google.maps.Geocoder();*/
/*var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('searchBtn').addEventListener('click', onChangeHandler);*/
// document.getElementById('end').addEventListener('change', onChangeHandler);
}
function clear()
{
map.clearOverlays();
firstAddress="";
secondAddress="";
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = firstAddress;
var end = secondAddress;
alert('Start:' + firstAddress + ' End: '+secondAddress);
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function codeAddress() {
var zip1 = document.getElementById('start').value;
var zip2 = document.getElementById('end').value;
/*firstAddress="";
secondAddress="";*/
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': zip1}, function(results1, status1) {
if (status1 == google.maps.GeocoderStatus.OK) {
/*map.setCenter(results[0].geometry.location);
if(marker)
marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true
});
google.maps.event.addListener(marker, "dragend", function() {
document.getElementById('lat').value = marker.getPosition().lat();
document.getElementById('lng').value = marker.getPosition().lng();
});
document.getElementById('lat').value = marker.getPosition().lat();
document.getElementById('lng').value = marker.getPosition().lng();*/
firstAddress=results1[0].geometry.location;
alert();
} else {
alert('Geocode Zipcode 1 was not successful for the following reason: ' + status);
}
});
geocoder.geocode( { 'address': zip2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
/*map.setCenter(results[0].geometry.location);
if(marker)
marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true
});
google.maps.event.addListener(marker, "dragend", function() {
document.getElementById('lat').value = marker.getPosition().lat();
document.getElementById('lng').value = marker.getPosition().lng();
});
document.getElementById('lat').value = marker.getPosition().lat();
document.getElementById('lng').value = marker.getPosition().lng();*/
secondAddress=results2[0].geometry.location;
} else {
alert('Geocode Zipcode 2 was not successful for the following reason: ' + status);
}
});
/*directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);*/
calculateAndDisplayRoute(directionsService, directionsDisplay);
}
</script>
<!--async defer-->
<!--<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBchnwGqUTVCOQUSdUE_eCU1JCS5K6_ahE&callback=initMap">
</script>-->
</body>
</html>
screenshot:
i get the codes from this site:
IndiaPost Find Pincodes
IndiaPost Find Pincodes
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Definition: The pincode in india is a six digit system in which the first two digits indicate state, next two digits represent the district in which the place is located and the last two digits indicate the place.