0

Buenas:

Quisiera que me puedan ayudar estoy realizando un ubicación donde se encuentra el usuario , para ellos estoy realizando el lenguaje programación ASP.NET en C# y con la APP GOOGLE MAPS para eso para que sepa la dirección donde se encuentran hay un button que al presionar debe salir su longitud y latitud del usuario donde se encuentra y con esos datos de longitud y latitud la imagen del mapa se gráfica el mapa.

Les comento que en mi proyecto local cuando lo ejecuto si funciona correctamente como la imagen :

introducir la descripción de la imagen aquí

Pero lo raro que cuando lo subo a un hosting el botón ya no funciona le adjunto la imagen : introducir la descripción de la imagen aquí

El error que he verifcado en consola sale esto :

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

para eso este es mi código

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Geocolización</title>
          <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>

    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map, #pano {
        float: left;
        height: 100%;
        width: 45%;
      }
    </style>
  </head>
  <body>


<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()%></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>

        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);

        }
    </script>
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOVmgMrLBpBMmHRlu7hqX7Ti3g-mmhiEE&callback=initialize">
    </script>

  </body>
</html>
2
  • 1
    Considero que el código se debe minimizar para cumplir con lo que se indica en ejemplo mínimo verificable, por ejemplo, el menú no se require para reproducir el problema. Tampoco son necearias las llamadas a hojas de estilo ni boostrap. Por otro lado, parece que estas pasando por algo los mensajes que se muestran justo debajo del error que señalas. En el chat pude ver que se menciona que se debería usar https.
    – Rubén
    Commented el 24 jun. 2017 a las 17:56
  • 1
    ¿Lograste hacerlo funcionar? ¿Te fue de utilidad la respuesta de @Rubén?
    – fredyfx
    Commented el 22 feb. 2019 a las 19:37

1 respuesta 1

2

Resumen

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.

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é

<%--  <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.

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

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>

1
  • si te das cuenta cuando presionas el boton no te vota la latitud y longitud ahora lo que has realizado porque aparentemente cuando presionas el boton te tiene que votar la latitud y longitud y el mapa donde te encuentras tu , eso es el problema que tengo ya que en mi hosting el boton no funciona pero en el codigo fuente si funciona
    – PieroDev
    Commented el 24 jun. 2017 a las 17:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.