Javascript Course

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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. Editing, Changing XML - E4X (1382)
  2. SHA1 Encrypt data in JavaScript (19879)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (58537)
  4. Using the Bone Tool (3438)
  5. JavaScript code and PHP (31329)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (84)
  2. Read Excel file data in PHP - PhpExcelReader (65)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (55)
  4. SHA1 Encrypt data in JavaScript (53)
  5. Create simple Website with PHP (47)