Skip to main content
se añadieron 577 caracteres en el cuerpo
Origen Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85

Lo más probable es que el problema se deba a que desde la versión 50 de Google Chrome se bloquean las consultas de ubicación del usuarios desde alojamientos de código no seguros. Véase Geolocation API Removed from Unsecured Origins in Chrome 50.

No puedo reproducir el problema usando stack snippet, aparentemente no es posible porque el navegador bloquea la detección de mi ubicación. No estoy seguro de que eso sea el problemade cierta forma coincide con la situación del OP, requiero investigar más al respectoy que está ejecutando su código desde una ubicación no segura (sin https) lo cual puede observarse en el enlace comportido por el OP en el chat.

No puedo reproducir el problema, aparentemente porque el navegador bloquea la detección de mi ubicación. No estoy seguro de que eso sea el problema del OP, requiero investigar más al respecto.

Lo más probable es que el problema se deba a que desde la versión 50 de Google Chrome se bloquean las consultas de ubicación del usuarios desde alojamientos de código no seguros. Véase Geolocation API Removed from Unsecured Origins in Chrome 50.

No puedo reproducir el problema usando stack snippet, aparentemente no es posible porque el navegador bloquea la detección de mi ubicación que de cierta forma coincide con la situación del OP, y que está ejecutando su código desde una ubicación no segura (sin https) lo cual puede observarse en el enlace comportido por el OP en el chat.

se añadieron 296 caracteres en el cuerpo
Origen Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85

Resumen

No puedo reproducir el problema, aparentemente porque el navegador bloquea la detección de mi ubicación. No estoy seguro de que eso sea el problema del OP, requiero investigar más al respecto.

TL;DR

He pasado tuel código del OP a stack snippet. Quité algunas líneas que no se requiren para hacer funcionar el código en stack snippet y cambié

Considerando lo anterior, quité el menú y las llamadas a Bootstrap., quedando el código de la siguiente forma:

He pasado tu código a stack snippet. Quité algunas líneas que no se requiren en stack snippet y cambié

Considerando lo anterior, quité el menú y las llamadas a Bootstrap.

Resumen

No puedo reproducir el problema, aparentemente porque el navegador bloquea la detección de mi ubicación. No estoy seguro de que eso sea el problema del OP, requiero investigar más al respecto.

TL;DR

He pasado el código del OP a stack snippet. Quité algunas líneas que no se requiren para hacer funcionar el código en stack snippet y cambié

Considerando lo anterior, quité el menú y las llamadas a Bootstrap, quedando el código de la siguiente forma:

Quitar líneas de código innecesarias en lo que respecta al problema en cuestión.
Origen Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85

Considerando lo anterior, quité el menú y las llamadas a Bootstrap.

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>

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>

Considerando lo anterior, quité el menú y las llamadas a Bootstrap.

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%;
}
<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>
se añadieron 197 caracteres en el cuerpo
Origen Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85
Loading
Origen Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85
Loading