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

<h4>Example Google Map with Geolocation JavaScript</h4>
<p>Click on this button to show a map with geolocation of your internet connection.</p>

<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 in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. Execute JavaScript scripts loaded via AJAX (4807)
  2. Contact page - CoursesWeb (27710)
  3. Tabs effect with CSS (28382)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (34996)
  5. The Essene Gospel of Peace (1563)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1798)
  2. Contact page - CoursesWeb (1753)
  3. Tabs effect with CSS (1747)
  4. PHP getElementById and getElementsByTagName (826)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (702)