Capítulo 7

Mostrar mapa dinâmico da posição do dispositivo de usuário

CSS

<style>
#mapa {
	width:820px;
	height:820px;
	margin-top:20px;
	display:none;
	}
</style>

JavaScript

<script>
var infowindow = new google.maps.InfoWindow();
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");
	mapa.style.display = "block";
	var opcoes = {
		zoom: 15,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById("mapa"), opcoes);
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	var local = new google.maps.LatLng(latitude,longitude);
	contentString = "
Legal! Achei você usando a funcionalidade
 Geolocation do W3C e o Google Maps.";
	map.setCenter(local);
	infowindow.setContent(contentString);
	infowindow.setPosition(local);
	infowindow.open(map);
}
</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>
	<div id="mapa"></div>
</section>