GeoLocation Dynamic- Dynamically View, Zoom in and Zoom out Your Position

Written by @m_k_amin 24 May 2013

Statistic maps are not interesting a lot, because the information you have given are fixed. By dynamic feature of GeoLocation you can see your place on the map (by your authorization) and also have capability to zoom in, zoom out and move in other places. Like the static GeoLocation, here you have also three types of the maps, i. e. Roadmap, Satellite and Hybrid. Choose one of the map types below and see this amazing feature of HTML5 . . .

Code Snippet:

                                                
                                                <!-- this script is provided by https://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><div id="M1"></div></td>
	</tr>
</table>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<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)
{
  lat=pos.coords.latitude
  lon=pos.coords.longitude
  var ind= document.getElementById("type").selectedIndex
    if (ind==0){
  	alert("Select a One Type of Maps") 
  	return
  }  
  latlon=new google.maps.LatLng(lat, lon)
  M1=document.getElementById('M1')
  M1.style.height='170px'
  M1.style.width='390px'

  myOptions= new Array()
  myOptions[1]={
  center:latlon,zoom:17,
  mapTypeId:google.maps.MapTypeId.SATELLITE,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.DEFAULT}  }  
  myOptions[2]={
  center:latlon,zoom:17,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:true,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}  }
  myOptions[3]={
  center:latlon,zoom:17,
  mapTypeId:google.maps.MapTypeId.HYBRID,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.ZOOM_PAN}  }

  var map1=new google.maps.Map(document.getElementById("M1"),myOptions[ind])
  var marker1=new google.maps.Marker({position:latlon,map:map1,title:"You are here!"})
}

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='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