He pasado tu código a stack snippet. Quité algunas líneas que no se requiren en stack snippet y cambié
<%-- <li><a href="#">Page 3</a></li>--%>
por
<!-- <li><a href="#">Page 3</a></li>-->
y
<%= Session["0"].ToString()%>
por
<!-- <%= Session["0"].ToString()%> -->Cadena
Los errores que muestra la consola son
Failed to load resource: the server responded with a status of 404 (Not Found)
Estos ocurren por las direcciones relativas. Por lo demás, aparentemente no hay problema con el código, así que lo más probable es que el problema sea con el alojamiento de este.
function initialize() {
var fenway = {
lat: -12.092497600000002,
lng: -77.0548962
};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 17
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
function reloadMap(myLat, myLong) {
var fenway = {
lat: myLat,
lng: myLong
};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 17
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
var map = null;
function showlocation() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback);
}
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('latitude').innerHTML = lat;
document.getElementById('longitude').innerHTML = lon;
//var latLong = new google.maps.LatLng(lat, lon);
//var marker = new google.maps.Marker({
// position: latLong
//});
console.log("la variable del map es:");
console.log(map);
//marker.setMap(map);
//map.setZoom(8);
//map.setCenter(marker.getPosition());
reloadMap(lat, lon);
}
// google.maps.event.addDomListener(window, 'load', initMap);
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 45%;
}
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">FINANCIERA QAPAQ</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="Menu.aspx">Inicio</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Gestión<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="GestionDomiciliaria.aspx">Gestionar Domiciliaria</a></li>
</ul>
</li>
<li><a href="Maps.aspx">Ubicación Geografica</a></li>
<!-- <li><a href="#">Page 3</a></li> -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> <!-- <%= Session["0"].ToString()%>-->Cadena</a></li>
<li><a href="Salir.aspx"><span class="glyphicon glyphicon-log-in"></span> Salir</a></li>
</ul>
</div>
</div>
</nav>
<center>
<input type="button" value="Show my location on Map" onclick="javascript: showlocation()" /> <br/>
</center>
Latitude: <span id="latitude"></span> <br/> Longitude: <span id="longitude"></span>
<br/><br/>
<div id="map"></div>
<div id="pano"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOVmgMrLBpBMmHRlu7hqX7Ti3g-mmhiEE&callback=initialize">
</script>