estoy generando una pagina donde me indique mi ubicación en la que me encuentro con la API de geolocalización de Google
, ademas que me muestra las cafeterías mas cercanas a mi ubicación, e encontrado varios ejemplos y me funcionan pero no me muestra mi ubicación en la que me encuentro tiene como diferencia 1km mas o menos, saben a que se debe, necesito de su ayuda ya que he probado con todo y no me queda, se los agradezco de corazón.... Les dejo el codigo en el que me estoy basando....
function success(position) {
var status = document.querySelector('#status');
status.innerHTML = "¡ESTA ES SU UBICACIÓN!";
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '300px';
mapcanvas.style.width = '100%';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Usted está aquí."
});
}
function error(msg) {
var status = document.getElementById('status');
status.innerHTML= "Error [" + error.code + "]: " + error.message;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});
} else {
error('Actualiza el navegador web para usar el API de localización');
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- CSS de Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet" type='text/css'>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<link rel="shortcut icon" href="imagenes/logo-mapa.png" />
<script src="js/script.js" type="text/javascript"></script>
<div class="mapa">
<div id="contenedor">
<p id="status">Buscando su localización…</p>
<div id="map"></div>
</div>
<br/>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
</div>
</footer>
</body>
</html>