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') ;
}
}
}
<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>