<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.'
   });

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true