Get Postal code using latitude and longitude

Working Demo.

$(function() {
    var lat = 13.0826802;
    var longt = 80.27071840000008;
    var keyVal = "AIzaSyDm6BvPpVO0Fc2JRcXuRuafyX6mBr31nwM";
    $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + longt + '&key=' + keyVal,
        type: "GET",
        dataType: 'json',
        async: false,
        success: function(data) {
            var results = data.results;
            var postalCode = getPostalCode(results);

            alert(postalCode);
        }
    });

    function getPostalCode(place) {
        for (var k = 0; k < place.length; k++) {
            for (var i = 0; i < place[k].address_components.length; i++) {
                for (var j = 0; j < place[k].address_components[i].types.length; j++) {
                    if (place[k].address_components[i].types[j] == "postal_code") {
                        return place[k].address_components[i].long_name;
                    }
                }
            }
        }
    }
});

Advertisements

Google – Get Direction

This example gives you a direction from origin to destination. First adds a search box to a map, using the Google Place Autocomplete feature. People can enter geographical searches. The search box will return a pick list containing a mix of places and predicted search terms. Then sending the search values to google “directionsService” you can get the direction. Then send the api response to “directionsDisplay” to draw the route. DEMO

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.8688,
            lng: 151.2195
        },
        zoom: 13,
        mapTypeId: 'roadmap'
    });
    directionsDisplay.setMap(map);

    // Create the search box and link it to the UI element.
    var inputO = document.getElementById('pac-input-origin');
    var inputD = document.getElementById('pac-input-dest');
    searchBoxO = new google.maps.places.SearchBox(inputO);
    searchBoxD = new google.maps.places.SearchBox(inputD);

    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBoxO.addListener('places_changed', function() {
        onChangeHandler();
    });
    searchBoxD.addListener('places_changed', function() {
        onChangeHandler();
    });

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var placesO = searchBoxO.getPlaces();
    var placesD = searchBoxD.getPlaces();
    if (!placesO || !placesD || placesO.length == 0 || placesD.length == 0) {
        return;
    }
    directionsService.route({
        origin: {
            lat: placesO[0].geometry.location.lat(),
            lng: placesO[0].geometry.location.lng()
        },
        destination: {
            lat: placesD[0].geometry.location.lat(),
            lng: placesD[0].geometry.location.lng()
        },
        travelMode: 'DRIVING'
    }, function(response, status) {
        console.log(response);
        document.getElementById("distLen").value = response.routes[0].legs[0].distance.text;
        document.getElementById("timeLen").value = response.routes[0].legs[0].duration.text;
        if (status === 'OK') {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

Google – Places search box

This example adds a search box to a map, using the Google Place Autocomplete feature. People can enter geographical searches. The search box will return a pick list containing a mix of places and predicted search terms. This example requires the Places library. Include the libraries=places parameter when you first load the API. For example:

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">. 

DEMO

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13,
    mapTypeId: 'roadmap'
  });

  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location
      }));

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });