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 meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (70117)
  2. XMLHttpRequest object (3555)
  3. Get and change IFrame content through a JavaScript script created in another IFrame (9474)
  4. Follow the mouse cursor with a DIV inside a Parent (3538)
  5. AJAX with GET and PHP (6164)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1391)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1361)
  3. Contact page - CoursesWeb (1342)
  4. Tabs effect with CSS (1342)
  5. Insert, Select and Update NULL value in MySQL (844)