Link to home
Start Free TrialLog in
Avatar of Lalitha Parameswari
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?
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

I am guessing that you are referring to India's system of pin codes (like a US Zip Code)
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.
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
<!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>

Open in new window


screenshot:
User generated image
i get the codes from this site:
IndiaPost Find Pincodes
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members 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.