<div id="map-canvas"></div>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
google.maps.event.addDomListener(window, 'load', mapInitialize);
function mapInitialize() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition( set_position_in_google_map );
} else {
alert("Tu navegador no soporta el API de geolocalización. Actualiza a un navegador más moderno.");
}
}
function set_position_in_google_map( position ) {
var crds = position.coords;
var mapPosition = new google.maps.LatLng(crds.latitude, crds.longitude);
var mapOptions = {
zoom: 15,
center: mapPosition
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
var infowindow = new google.maps.InfoWindow({
map: map,
position: mapPosition,
content: 'Localización encontrada utilizando Geolocation API.'
});
}
This Pen doesn't use any external CSS resources.