onlyforbopi
9/25/2018 - 8:26 AM

JS.Geolocate.GeolocationDemo.v1

JS.Geolocate.GeolocationDemo.v1

#map
{
  width:50vw ;
  height:50vh;
  margin:0 auto ;
  border:1px solid black ;
  text-align:center ;
}
#address
{
  width:50vw ;
  margin:0 auto ;
  border:1px solid black ;
  text-align:center ;
  font-size:25px;
}
var div,address ;
var map ;
var marker ;
var geocoder;
window.onload=init;
function init()
 {
   div=document.querySelector('#map') ;
   address=document.querySelector('#address') ;
   if(navigator.geolocation)
     {
       navigator.geolocation.getCurrentPosition(showOnMap);
     }
   else
     {
       console.log('Location is un-available') ;
     }
 }

function showOnMap(p)
{
  let pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude) ;
  map=new google.maps.Map(div,{zoom:10,center:pos});
marker=new google.maps.Marker({map:map,position:pos});
  geocoder=new google.maps.Geocoder(); 
  geocoder.geocode({'location':pos},reverseGeoCoder) ;
}

function reverseGeoCoder(results,status)
{

  if(status==='OK')
     {     
       if(results[1])
         {
           map.setZoom(25) ;
           
           address.innerHTML=results[0].formatted_address ;
         }
       else
         {
           console.log('No results') ;
         }
     }
}


JS.Geolocate.GeolocationDemo.v1

A Pen by Pan Doul on CodePen.

License.

<html>
   <head>
      <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
  </head>
  <body>
      <div id="map">
    </div>
    <div id="address">
    </div>
  </body>
</html>