onlyforbopi
9/25/2018 - 8:26 AM

JS.Geolocate.GeoLocateMe101

JS.Geolocate.GeoLocateMe101

style.css
content_copyfile_download
body, html{
  font-family:sans-serif;
}
#btnX{
  border:0.2em solid steelBlue;
  border-radius:0.6em;
  background-color:lightBlue;
  color:steelBlue;
  font-weight:bold;
  padding:0.5em;
}

#coordX{
  border:0.2em solid darkGreen;
  background-color:lightGreen;
  color:darkGreen;
  margin:0.5em 0 0.5em 0;
  padding:0.4em;
  width:25em;
}

#mapL{
  border:0.2em solid goldenRod;
  background-color:moccasin;
  color:goldenRod;
  margin:0.5em 0 0.5em 0;
  padding:0.4em;
  width:25em;
}
script.js
content_copyfile_download
var dispC=document.querySelector('#coordX');

var gMap=document.querySelector('#mapL');

function getLocation(){
  if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(showPosition);
  navigator.geolocation.getCurrentPosition(showMaps);
  } else {
    dispC.innerHTML='GeoLocation is not supported by your browser.';
  }//end of if
}//end of getLocation

function showPosition(position){
  dispC.innerHTML='Latitude: ' + position.coords.latitude + '<br>Longitude: ' + position.coords.longitude;
  var latlon=position.coords.latitude + ',' + position.coords.longitude;
  var img_url='https://maps.googleapis.com/maps/api/staticmap?center=' + latlon + '&zoom=16&size=400x300&sensor=false';
  
  var marker=new google.maps.Marker({
    position:latlon,
    map:gMap,
    title:'You are here'
  });
  gMap.innerHTML='<img src='+img_url+'/>'
}//end of showPosition
js-geolocate-geolocateme101.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Geolocate.GeoLocateMe101

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<html lang='en'>
  <head charset='utf-8'>
    <title>myGeoLocation</title>
  </head>
  <body onload='init();'>
    <script src='https://maps.google.com/maps/api/js?sensor=false'></script>
    <button id='btnX' onclick='getLocation();'>Find Me!</button>
    <div id='coordX'></div>
    <div id='mapL'></div>
  </body>
</html>