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.
<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>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net