Capítulo 7

Mostrar mapa estático da posição do dispositivo de usuário

CSS

<style>
#mapa {
	width:420px;
	height:420px;
	display:none;
	}
</style>

JavaScript

<script>
function mostrarMapa() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(sucesso,erro);
	} else {
		alert("Este navegador não suporta a funcionalidade Geolocation");
	}
}
function erro(err) {
	switch (err.code) {
		case 1 : 
			var mensagemErro = "A permissão para obter a sua posição foi negada.";
		break;
		case 2 : 
			var mensagemErro = "Não foi possível estabelecer uma conexão para obter a sua posição.";
		break;
		case 3 : 
			var mensagemErro = "Tempo esgotado.";
		break;
		default:
			var mensagemErro = "Não foi possível obter sua posição.";
		}
	var codigoErro = err.code;
	var mensagem = "Ocoreu um erro na determinação da posição: 
";
	mensagem += "Código do erro: " + codigoErro + "
";
	mensagem += "Mensagem: " + mensagemErro;
	document.getElementById('msg').innerHTML = mensagem;
}
function sucesso(position) {
	var mapa = document.getElementById("mapa"); 
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	var url = "http://maps.google.com/maps/api/staticmap?center=";
	url += latitude +","+ longitude;
	url += "&zoom=15&size=400x400";
	url += "&markers=color:red|"+latitude +","+longitude;
	url += "&sensor=true"
	mapa.src = url;
	mapa.style.display = "block";
}
</script>

HTML

<section>	
	<p><input type=button value="Clique para mostrar sua posição no mapa" onclick="mostrarMapa()></p>
<p id="msg" class="dest"></p>
</section>
<section>
	<img id="mapa" />
</section>