Show Your Current Location in Map

How to show your current location in map using Navigator Object.

by Alex Azuero

HTML

<p>Get Location Using Navigator Object</p>
<input id="GetInfo" type="button" value="Click Here To Print Location" />
<p id="Result"></p>
<div id="MapHolderDiv"></div>

CSS

body {
    font: 80%"Trebuchet MS", sans-serif;
}

JavaScript

$("#GetInfo").click(function () {
    GetInfo();
});

function GetInfo() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(ShowPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function ShowPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var x = "<b>Latitude: </b>" + position.coords.latitude +
        "<br><b>Longitude: </b>" + position.coords.longitude;
    document.getElementById("Result").innerHTML = x;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";
    document.getElementById("MapHolderDiv").innerHTML = "<img     src='" + img_url + "'>";
}