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 adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (1419)
  2. Golf Putt It In (739)
  3. Disable button and Enable it after specified time (5129)
  4. Flash Games - Free online Games (22975)
  5. Move image from an element /tag to another (1637)

Popular pages this month

  1. Qwop (3219)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2547)
  3. Get the value of the selected /checked checkboxes in a form (1608)
  4. Insert, Select and Update NULL value in MySQL (1423)
  5. Add, Change, and Remove Attributes with jQuery (1301)