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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Show Google Map image with Geolocation JavaScript object

Last accessed pages

  1. Convert XML to JSON in JavaScript (19155)
  2. PHP MySQL - UPDATE (3402)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (48112)
  4. SHA512 Encrypt hash in JavaScript (11663)
  5. Send POST data with file_get_contents (720)

Popular pages this month

  1. Contact page - CoursesWeb (1639)
  2. Tabs effect with CSS (1625)
  3. Insert, Select and Update NULL value in MySQL (823)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)