prueba esto
<p id="resultado"> Cual es tu lugar de residencia?</p>
<div id="areaMapa"></div>
Agrega este CSS..
#areaMapa
{
width: 600px;
height: 400px;
border: solid 1px black;
}
ahora bien
pon esto como un JS e importalo
var x=document.getElementById("demo");
function obtenerUbicacion()
{
if(navigator.geolocation)
{
mavigator.geolocation.getCurrentPosition(mostrarUb icacion);
}else
{
x.innerHTML="Caracteristicas no soportada";
}
}
function mostrarUbucacion(position)
{
x.innerHTML = "Latitude: "+position.coords.latitude+"<br/> Longitude: "+position.coords.longitude;
}
var resultado;
var mapa;
window.onload = function()
{
resultado = document.getElementById('resultado');
var opcionesDelMapa =
{
zoom:3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
mapa = new google.maps.Map(document.getElementById('areaMapa' ),opcionesDelMapa);
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(geolocali zacionCorrecta,geolocalizacionIncorrecta);
resultado.innerHTML = "iniciando busqueda.";
}else
{
resultado.innerHTML = "Geolocalizacion no soportada.";
}
}
function geolocalizacionCorrecta(position)
{
var ubicacion = new google.maps.LatLng(position.coords.latitude,positi on.coords.longitude);
mapa.setCenter(ubicacion);
var ventanaDeInformacion = new google.maps.InfoWindow();
ventanaDeInformacion.setContent("Tu estas aqui o algun lugar cercano.");
ventanaDeInformacion.setPosition(ubicacion);
ventanaDeInformacion.open(mapa);
resultado.innerHTML="Ya apárecesen el mapa";
}
function geolocalizacionIncorrecta()
{
if(positionError.code ==1)
{
resultado.innerHTML="ubicacion sin compartir";
}
else if(positionError.code ==2)
{
resultado.innerHTML="Red no disponible";
} else if(positionError.code ==3)
{
resultado.innerHTML="se a exedido el tiempo de respuesta";
}else
{
resultado.innerHTML="Error inesperado";
}
}
POR ULTIMO AGREGA ESTO
<script type ="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
los script como ya sabes en el head :)
Si todo reulto bien veras tu hubicacion :) Saludos