Guest User

Google Maps Geocoding example

a guest
Sep 20th, 2018
332
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.77 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.     <title>Geolocation test</title>
  8.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  9.     <script>
  10.         function initialize() {
  11.             var address = (document.getElementById('my-address'));
  12.             var autocomplete = new google.maps.places.Autocomplete(address);
  13.             autocomplete.setTypes(['geocode']);
  14.             google.maps.event.addListener(autocomplete, 'place_changed', function () {
  15.                 var place = autocomplete.getPlace();
  16.                 if (!place.geometry) {
  17.                     return;
  18.                 }
  19.  
  20.                 var address = '';
  21.                 if (place.address_components) {
  22.                     address = [
  23.                         (place.address_components[0] && place.address_components[0].short_name || ''),
  24.                        (place.address_components[1] && place.address_components[1].short_name || ''),
  25.                        (place.address_components[2] && place.address_components[2].short_name || '')
  26.                    ].join(' ');
  27.                 }
  28.             });
  29.         }
  30.         function codeAddress() {
  31.             geocoder = new google.maps.Geocoder();
  32.             var address = document.getElementById("my-address").value;
  33.             geocoder.geocode({ 'address': address }, function (results, status) {
  34.                 if (status == google.maps.GeocoderStatus.OK) {
  35.  
  36.                     alert("Latitude: " + results[0].geometry.location.lat());
  37.                     alert("Longitude: " + results[0].geometry.location.lng());
  38.                 }
  39.  
  40.                 else {
  41.                     alert("Geocode was not successful for the following reason: " + status);
  42.                 }
  43.             });
  44.         }
  45.         google.maps.event.addDomListener(window, 'load', initialize);
  46.     </script>
  47. </head>
  48.  
  49. <body>
  50.     <input type="text" id="my-address">
  51.     <button id="getCords" onClick="codeAddress();">getLat&Long</button>
  52.    <script>
  53.        function initialize() {
  54.            var address = (document.getElementById('my-address'));
  55.             var autocomplete = new google.maps.places.Autocomplete(address);
  56.             autocomplete.setTypes(['geocode']);
  57.             google.maps.event.addListener(autocomplete, 'place_changed', function () {
  58.                 var place = autocomplete.getPlace();
  59.                 if (!place.geometry) {
  60.                     return;
  61.                 }
  62.  
  63.                 var address = '';
  64.                 if (place.address_components) {
  65.                     address = [
  66.                         (place.address_components[0] && place.address_components[0].short_name || ''),
  67.                        (place.address_components[1] && place.address_components[1].short_name || ''),
  68.                        (place.address_components[2] && place.address_components[2].short_name || '')
  69.                    ].join(' ');
  70.                 }
  71.             });
  72.         }
  73.         function codeAddress() {
  74.             geocoder = new google.maps.Geocoder();
  75.             var address = document.getElementById("my-address").value;
  76.             geocoder.geocode({ 'address': address }, function (results, status) {
  77.                 if (status == google.maps.GeocoderStatus.OK) {
  78.  
  79.                     alert("Latitude: " + results[0].geometry.location.lat());
  80.                     alert("Longitude: " + results[0].geometry.location.lng());
  81.                 }
  82.  
  83.                 else {
  84.                     alert("Geocode was not successful for the following reason: " + status);
  85.                 }
  86.             });
  87.         }
  88.         google.maps.event.addDomListener(window, 'load', initialize);
  89.     </script>
  90. </body>
  91.  
  92. </html>
Add Comment
Please, Sign In to add comment