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
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. PHP MySQL - WHERE and LIKE (18942)
  2. Add Pause in JavaScript script (9986)
  3. PHP Unzipper - Extract Zip, Rar Archives (2141)
  4. Working with HTML attributes in PHP (6209)
  5. Define Custom List-item Markers, Bullets for UL, OL Lists (3681)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (515)
  2. Read Excel file data in PHP - PhpExcelReader (430)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (319)
  4. PHP getElementById and getElementsByTagName (255)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (234)