Find Geo Location Using HTML5

Hello readers currently I ‘am working with HTML5 and its features. In this article am going to explain you how to create a application to find the Geo Location of the visitor using HTML5 and Google Map.

Geo Location using HTML5 and Google Map

The W3C developed the set of APIs to allow the client side devices like iphone 3G or conventional desktop browsers to retrieve the geographical information with JavaScript. This will get your latitude and longitude based on that Google will display the map of your location.

You can view demo and download the sample file below

Download FileDemo

function success(position) {
  var s = document.querySelector('#status');
  if (s.className == 'success') {
  //Message after tracing the location
  s.innerHTML = "Found your Location!";
  s.className = 'success';
  //Create div for showing map
  var mapcanvas = document.createElement('div'); = 'mapcanvas'; = '500px'; = '900px'; = '0px auto';
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"You are here!"

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');

Hope this will help you. using HTML5 and Jquery we can make lot of web applications,games and more. Will explain more about HTML5 later. keep updated with website to get the new articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>