Posición Mapa

Localizat tu posicion

by Edgar Martinez

HTML

<p>Get Location Using Navigator Object</p>
<input id="GetInfo" type="button" value="Click AQUI" />
<p id="Result"></p>
<div id="MapHolderDiv"></div>
<br>
<div id="city"></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;
        
        getCiudad(position.coords.latitude,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";
    console.log(img_url);
    document.getElementById("MapHolderDiv").innerHTML = "<img src='" + img_url + "'>";
}


function getCiudad(lat,long){

    var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng="
       +lat+","+long+"&sensor=false";
    $.get(url).success(function(data) {
       var loc1 = data.results[0];
       var county, city;
         $.each(loc1, function(k1,v1) {
            if (k1 == "address_components") {
               for (var i = 0; i < v1.length; i++) {
                  for (k2 in v1[i]) {
                     if (k2 == "types") {
                        var types = v1[i][k2];
                        if (types[0] =="sublocality_level_1") {
                            county = v1[i].long_name;
                            //alert ("county: " + county);
                        } 
                        if (types[0] =="locality") {
                           city = v1[i].long_name;
                           //alert ("city: " + city);
                       } 
                     }

                  }          

               }

            }

         });
         $('#city').html(city); 
    }); 


}