Lesson 9 HTML5 Geolocation

Using Geolocation you will be able to ask the user for there location in the script i give you there will be no failsafes to ensure the code works

		   <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
           <script>
var x=document.getElementById("demo");
 function getLocation()  //create a function to run when are button is clicked
      {
      if (navigator.geolocation)  //Check if Geolocation is supported


        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }If supported, run the getCurrentPosition() method. If not, display a message to the user
      else{x.innerHTML="Geolocation is not supported by this browser.";}
      }
 function showPosition(position)      //If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition )

      {
      x.innerHTML="Latitude: " + position.coords.latitude +  // The showPosition() function gets the displays the Latitude and Longitude
      "
Longitude: " + position.coords.longitude; 
      }
           
           
           
           </script>
		   

Creating Failsafes ensures our user knows whats going on after your script add this script.

 function showError(error) //creates function to display different errors to users
  {
  switch(error.code) // starts a switch case
    {
    case error.PERMISSION_DENIED: //if the user denied the request we send this error
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE: //if the users area is unavailable we tell them
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT: // if user doesnt do anything do this
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR: //unknown error case
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
            

Now we will be adding a static image of the map that shows our users location replace your current function show postion with this script

 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";//We use the returned latitude and longitude data to show the location in a Google map (using a static image).

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; // supplies the img that will be displayed
}    
 
   
     
     

Now if you want to have a map that can zoom in and out use this script instead

     function showPosition(position)
  {
  lat=position.coords.latitude;

  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder') //allows the mapholder to resize its window
  mapholder.style.height='250px';//defines the height of the container
  mapholder.style.width='500px';//defines the width of the container

  var myOptions={
  center:latlon,zoom:14,// sets the starting zoom for the map 
  mapTypeId:google.maps.MapTypeId.ROADMAP, // set the type of map that will be displayed
  mapTypeControl:false,// sets the map type control to false so users can't switch map types
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} // gives small navigation to the map 
  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 
  }// adds a marker to the map of your location