The code snippet presented in this page can be used to add a google map image in web page with the location of the visitor's internet connection, using the geolocation JavaScript object.

Script code

- Click on the code to select it.
Click on this button to show a map with geolocation of your internet connection.<br>
<button id="get_geoloc">Show Geolocation</button>
<div id="geoloc_resp"></div>
<script>
function showGeoLoc(){
  var geoloc_resp = document.getElementById('geoloc_resp');  //element to add geolocation response

  //if the browser not support geolocation, show message
  if(!navigator.geolocation){
    geoloc_resp.innerHTML ='Geolocation is not supported by your browser';
    return;
  }

  geoloc_resp.innerHTML ='LOADING...';

  //get latitude and longitude position
  navigator.geolocation.getCurrentPosition(function(position){
    var latt = position.coords.latitude;
    var long = position.coords.longitude;
    var img_size = {w:400, h:350};  //image size

    //add in #geoloc_resp google map image with location
    geoloc_resp.innerHTML ='Latitude is: '+ latt +'<br>Longitude is: '+ long +'<br><img src="https://maps.googleapis.com/maps/api/staticmap?center='+ latt +','+ long +'&zoom=14&size='+ img_size.w +'x'+ img_size.h +'&markers=color:red|size:mid|'+ latt +','+ long +'" alt="Google map location" width="'+ img_size.w +'" height="'+ img_size.h +'" />';
  }, function(err){
    //in case or error, show error message and its code
    geoloc_resp.innerHTML ='Unable to retrieve your location.<br>Error code: '+ err.code +'<br>Error message: '+ err.message;
  });
}

//register click event to button to call showGeoLoc() function
var get_geoloc = document.getElementById('get_geoloc');
if(get_geoloc) get_geoloc.addEventListener('click', showGeoLoc);
</script>

Demo

Click on this button to show a map with geolocation of your internet connection.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. Sending data with GET and POST in the same request (3603)
  2. Node.js Move and Copy file (3518)
  3. Get the value of the selected /checked checkboxes in a form (37630)
  4. Read Excel file data in PHP - PhpExcelReader (56711)
  5. Get and Modify content of an Iframe (12777)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (448)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)