GeoLocation Static- See your Current Position on Map (Sattelite, Roadmap and Hybrid)

Written by @m_k_amin 23 May 2013

HTML5 has amazing capability to say where do you sit down on the PC. Yes! It can find you easily unless you don't let it. This really surprises me as 10 years programmer. So now you can have more communication with people around the world in your site. It gives you a picture of street of his living. One of my friend said that, it has 10 degree deviation from the real place for preventing rocketing purpose. It was true about me and showed me in my neighbor's home some distance far away, not mine! The following code help you to add the GeoLocation map statically to your page with three different views: satellite, road-map and hybrid. Just copy the code and enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
                                                
                                                <!-- this script is provided by http://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->

<p>
	<select name="Select1" style="width: 102px" onchange="ShowAll()" id="type">
	<option selected="selected" value=" ">Select One</option>
	<option>satellite</option>
	<option>roadmap</option>
	<option>hybrid</option>	
	</select><br>
</p>

<div id="Msg"></div>

<table style="width: 100%">
	<tr>
		<td id="M1">&nbsp;</td>
	</tr>
</table>
<script>

var msg=document.getElementById("Msg")
function ShowAll(){
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(AllMaps,Error)
   	msg.innerHTML= "The GeoLocation loaded successfully!"
   	firsttime= false
    }
  else
  	msg.innerHTML="This browser doesn't support GeoLocation. Try another one . . ."
  	
}

function AllMaps(pos)
{
  var lat= pos.coords.latitude + "," + pos.coords.longitude
  var ind= document.getElementById("type").selectedIndex
  if (ind==0){
  	alert("Select a One Type of Maps") 
  	return
  }
  var type= document.getElementById("type").options[ind].text
  var img1="http://maps.googleapis.com/maps/api/staticmap?center="
  +lat+"&zoom=17&size=390x170&maptype="+type+"&markers=color:blue%7Clabel:S%7C"+lat+"&sensor=false"
  +"&key=AIzaSyCLbNEbY6nNsNTtRe1_dbFxeaoJ1xQ4ioQ";
  document.getElementById("M1").innerHTML= "<img src='"+img1+"'>"

}

function Error(error)
{
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      msg.innerHTML="You don't have permission to view the Map."
      break;
    case error.POSITION_UNAVAILABLE:
      msg.innerHTML="Your location was not undestood."
      break;
    case error.TIMEOUT:
      msg.innerHTML="The procedure took longer than usual."
      break;
    case error.UNKNOWN_ERROR:
      msg.innerHTML="<< Unknown Error >>"
      break;
    }
}
</script>

<div style="text-align: center"><br><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>                                                
                                            <a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300