Code download available at the bottom of the post
In this tutorial we will use Jquery,Goople Api and HTML5 to capture geolocation
Browser used:Google Chrome
Step 1:
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
Step 2:
<div id="long"></div>
Step 3:
//using navigator (Html 5 feature) to get the Geolocation
x = navigator.geolocation;
x.getCurrentPosition(sucess,failure);
'getCurrentPosition' method has 2 argument, one when the function success and other for failure
If the browser supports HTML5 success method is invoked else the failure method is invoked.
In the failure method we will show a warning message to user as shown below..
function failure()
{
//Using Jquery we will display the warning message in the lat DIV element.
$('#lat').html("<p>It din't work, co-ordinated not available</p>")
}
Step 4:
//Fetch the co-ordinates
var mylat=position.coords.latitude;
var mylong = position.coords.longitude;
//Display the co-ordinates in the mylat and mylong DIV elements respectively
$('#lat').html(mylat)
$('#long').html(mylong)
Open up Google chrome, you will see the longitude and latitude if successful or the error message in case of unsupported browsers.
Step 5:
var coords = new google.maps.LatLng(mylat,mylong);
//Setting up our Google Map
We are going to specify three different parameters
i. Zoom,
ii.Co-ordinates
iii.Type of map (In this case we will define a road map)
var mapOptions = {zoom:16,
center:coords,
mapTypeId:google.maps.MapTypeId.ROADMAP}
//Creating a map
We will feed in 2 arguments, one the element which we want to override and fill our Map div element
Argument 1: document.getElementById("map") //get the div map element
Argument 2: Map settings which we defined earlier
var map=new google.maps.Map(document.getElementById("map"),mapOptions);
Step 6:
#map
{
height: 400px;width: 400px;
In this tutorial we will use Jquery,Goople Api and HTML5 to capture geolocation
Browser used:Google Chrome
Step 1:
Include the Jquery and Goople maps API as shown below<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
Step 2:
Add a place holder for the Map<div id="map"> </div>
Using HTML5 feature we will display the latitude and longitude, so add placeholders for latitude and longitude.<div id="lat"></div>
<div id="long"></div>
Step 3:
Start writing code to capture the Geolocation<script>
//using navigator (Html 5 feature) to get the Geolocation
x = navigator.geolocation;
x.getCurrentPosition(sucess,failure);
'getCurrentPosition' method has 2 argument, one when the function success and other for failure
If the browser supports HTML5 success method is invoked else the failure method is invoked.
In the failure method we will show a warning message to user as shown below..
function failure()
{
//Using Jquery we will display the warning message in the lat DIV element.
$('#lat').html("<p>It din't work, co-ordinated not available</p>")
}
Step 4:
We will implement the Success method to display the GeolocationWe use the position variable in the success method to get the latitude and longitude
//Fetch the co-ordinates
var mylat=position.coords.latitude;
var mylong = position.coords.longitude;
//Display the co-ordinates in the mylat and mylong DIV elements respectively
$('#lat').html(mylat)
$('#long').html(mylong)
Open up Google chrome, you will see the longitude and latitude if successful or the error message in case of unsupported browsers.
Step 5:
Now using the google API we will display the map//Declare the coords variable to hold the co-ordinates
var coords = new google.maps.LatLng(mylat,mylong);
//Setting up our Google Map
We are going to specify three different parameters
i. Zoom,
ii.Co-ordinates
iii.Type of map (In this case we will define a road map)
var mapOptions = {zoom:16,
center:coords,
mapTypeId:google.maps.MapTypeId.ROADMAP}
//Creating a map
We will feed in 2 arguments, one the element which we want to override and fill our Map div element
Argument 1: document.getElementById("map") //get the div map element
Argument 2: Map settings which we defined earlier
var map=new google.maps.Map(document.getElementById("map"),mapOptions);
Step 6:
Add some styles to the div element to view the map properly<style type="text/css">
#map
{
height: 400px;width: 400px;
}
</style>
Step 7:
//Create a marker
var marker = new google.maps.Marker({ map: map, position: coords });
Save and open the page in Google Chrome
Note: Please change the browser setting to allow the application to access the geolocations
Browser Setting -> Advance Settings -> Privacy Settings -> Content settings -> Location ........
</style>
Step 7:
Add marker to specify the exact location
var marker = new google.maps.Marker({ map: map, position: coords });
Save and open the page in Google Chrome
Note: Please change the browser setting to allow the application to access the geolocations
Browser Setting -> Advance Settings -> Privacy Settings -> Content settings -> Location ........
