autocomplete the data for Reverse Geocoding without manual input

Question

this is the Reverse Geocoding from google api maps.My question is.. It is possible to remove Or HIDE the <div id="panel"> and get the data from current user location,without user need to press the button to Reverse Geocoding? I want only to show the address of the user and NO the altitude & longitude.. thank you

 <!DOCTYPE html>
        <html>
          <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
            <meta charset="utf-8">
            <title>Reverse Geocoding</title>
            <style>
              html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
              }
              #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
              }
            </style>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
            <script>
        var geocoder;
        var map;
        var infowindow = new google.maps.InfoWindow();
        var marker;
        function initialize() {
          geocoder = new google.maps.Geocoder();
          var latlng = new google.maps.LatLng(40.730885,-73.997383);
          var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: 'roadmap'
          }
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function codeLatLng() {
          var input = document.getElementById('latlng').value;
          var latlngStr = input.split(',', 2);
          var lat = parseFloat(latlngStr[0]);
          var lng = parseFloat(latlngStr[1]);
          var latlng = new google.maps.LatLng(lat, lng);
          geocoder.geocode({'latLng': latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[1]) {
                map.setZoom(11);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
              } else {
                alert('No results found');
              }
            } else {
              alert('Geocoder failed due to: ' + status);
            }
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

            </script>
            <style>
              #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                width: 350px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
              }
              #latlng {
                width: 225px;
              }
            </style>
          </head>
          <body>


     <div id="panel">
              <input id="latlng" type="text" value="40.714224,-73.961452">
              <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
            </div>
            <div id="map-canvas"></div>


          </body>
        </html>

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Yes you can.

I hope you're aware of HTML5 Geolocation, which will help you to get the current position of user.

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         revereGeoCode(position.coords.latitude, position.coords.longitude);
     });
 } else {
  // make sure to handle the failure
 }

Using this apply you concept and get rid of the manually obtaining the lat and lng.

Complete code will be like below

 var geocoder;
 var map;
 var marker;
 var infowindow = new google.maps.InfoWindow();

 function initializeMap() {

     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             revereGeoCode(position.coords.latitude, position.coords.longitude);
         });
     } else {
         console.log("er")
         // make sure to handle the failure
     }

     var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(40.730885, -73.997383),
         mapTypeId: 'roadmap'
     }
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 }

 function revereGeoCode(lat, lng) {
     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]) {
                 // place your marker coding
                 map.setZoom(11);
                 marker = new google.maps.Marker({
                     position: latlng,
                     map: map
                 });
                 infowindow.setContent(results[1].formatted_address);
                 infowindow.open(map, marker);
             } else {
                 alert('No results found');
             }
         } else {
             alert('Geocoder failed due to: ' + status);
         }
     });
 }

 google.maps.event.addDomListener(window, 'load', initializeMap);

JSFiddle

thank you i have make a copy of the above code and give me error on the **function initializeMap();** in the first line — johnnyB, Aug 07 '14 at 13:00

autocomplete the data for Reverse Geocoding without manual input

1 Answers1

JSFiddle