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. Me and the Key 3 (480)
  2. Happy Farm (499)
  3. Register and show online users and visitors (21149)
  4. Cake Shop (657)
  5. SHA512 Encrypt hash in JavaScript (9327)

Popular pages this month

  1. Flash Games - Free online Games (1360)
  2. Qwop (1158)
  3. Tunnel Rush (1062)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)
  5. Drag Racer V3 (758)