How to use html5 Geo location code with Google maps

How to use html5 Geo location code with Google maps

<!DOCTYPE html>
<html>
 <head>
    <title>IP Demo</title>
    
  </head>
<body>
<section id="wrapper">
Click the allow button to let the browser find your location.
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '600px';
  document.querySelector('article').appendChild(mapcanvas);
  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });
}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
</section>
</body>
</html>

output below:

Click the allow button to let the browser find your location.

By: Unknown On 1:53 PM

Continue Reading

HTML5 JavaScript code to find the current location in map

<!DOCTYPE html>
<html>
 <head>
    <title>Geolocation Demo</title>
    <script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
  }

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
  </head>
<body>
<p id="demo"><font size="7" face="Georgia, Arial" color="maroon">Find Your Current Location In Map</font></p>
<script language="JavaScript">
         getLocation();
      </script>

<div id="mapholder"></div>

</body>
</html>

output below:

----------------------------------------

Using HTML5 Geolocation to show current location with Google
How To Use HTML5 GeoLocation API With Google Maps
HTML5 Geolocation API Tutorial Latitude/Longitude API
How to find nearby hospitals using google map api and javascript
javascript - Easiest way to get city name using geolocation?
Build a Location-Based Mobile App With HTML5 and Javascript

Find Your Current Location In Map

By: Unknown On 1:48 PM

Continue Reading