0

Buenos días quisiera que me puedan ayudar. no se si se podrá realizar una Geolocalización con lenguaje asp.net. es decir presionar y guardar en una tabla donde esta ubicado las calles o solo presionar y tomar foto las calles avenida de la geolocalización. de donde estoy.

Bueno este es mi Codigo:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWkZwfPfeqw_tcUTsLcsLQh7T3vefrRII" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    } else {
        alert("Geo Location is not supported on your current browser!");
    }
    function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var city = position.coords.locality;
        var myLatlng = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            title: "lat: " + latitude + " long: " + longitude
        });

        marker.setMap(map);
        var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + latitude + "<br /> Longitude:" + longitude + "" });
        infowindow.open(map, marker);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
   <div id="map_canvas" style="width: 500px; height: 400px"></div>
    </form>
</body>
</html>

me sale este error :

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Quisiera algo como esto cuando presione.

introducir la descripción de la imagen aquí

9
  • Buenos dias, puedes realizarlo, en el caso de obtener la geolocalizacion de algun lugar seleccionado, puedes apoyarte con una API de google maps, existe una amplia documentacion y te muestra un ejemplo, rescatar los datos y guardarlos es una tarea aparte pero nada fuera de lo comun. developers.google.com/maps/documentation/geocoding/… Commented el 30 may. 2017 a las 15:24
  • 1
    La pregunta no está muy clara. Además, sería bueno que incluyeras el código que lleves hasta el momento y los errores o problemas con los que te estés encontrando.
    – Alvaro Montoro
    Commented el 30 may. 2017 a las 15:37
  • @dev ya edite mi pregunta mi amigosy puse mi codigo y el error
    – PieroDev
    Commented el 30 may. 2017 a las 16:34
  • 1
    Gracias. He votado por reabrir tu pregunta, pero tengo una duda: parece que la geolocalización la estás intentando hacer con la API de Google Maps en JavaScript y no con C#, ¿es eso correcto?
    – Alvaro Montoro
    Commented el 30 may. 2017 a las 16:37
  • 1
    @Pierro muestra algún error en consola ? Si es así ¿ Qué error le muestra?
    – Dev. Joel
    Commented el 30 may. 2017 a las 16:53

3 respuestas 3

2

Imagen de referencia:

introducir la descripción de la imagen aquí

Aquí funcionando: http://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        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
                });      

                marker.setMap(map);
        map.setZoom(8);
        map.setCenter(marker.getPosition());
      }

      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>
  </head>
  <body>
    <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-canvas"/>
  </body>
</html>
2
  • mi amigo si me da las coordenadas pero la imagen del mapa no se muestra. :( T_T
    – PieroDev
    Commented el 30 may. 2017 a las 17:27
  • has visto el enlace?
    – fredyfx
    Commented el 30 may. 2017 a las 17:29
2

Aqui esta la respuesta :

para poder visualizar el mapa : 1. tienes que poner el codigo de la api key de google maps.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View side-by-side</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map, #pano {
        float: left;
        height: 100%;
        width: 45%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>
    <script>

        function initialize() {
            var fenway = { lat: -12.0925034, lng: -77.05491230000001 };
            var map = new google.maps.Map(document.getElementById('map'), {
                center: fenway,
                zoom: 14
            });
            var panorama = new google.maps.StreetViewPanorama(
                document.getElementById('pano'), {
                    position: fenway,
                    pov: {
                        heading: 34,
                        pitch: 10
                    }
                });
            map.setStreetView(panorama);
        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOVmgMrLBpBMmHRlu7hqX7Ti3g-mmhiEE&callback=initialize">
    </script>
  </body>
</html>
0

Has incluido la libreria de google maps dos veces, elimina uno de los dos:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWkZwfPfeqw_tcUTsLcsLQh7T3vefrRII" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
4
  • lo borre uno igual me sale ese problema
    – PieroDev
    Commented el 30 may. 2017 a las 17:12
  • @Pierro es lógica esta respuesta, por eso muestra el segundo error de Key, haciendo estos cambios es decir src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAWkZwfPfeqw_tcUTsLcsLQh7T3vefrRII&sensor=false&libraries=places" , presenta los mismos errores?
    – Dev. Joel
    Commented el 30 may. 2017 a las 17:33
  • @Dev.Joel si lo borre el segundo y me sigue saliendo el mismo error.
    – PieroDev
    Commented el 30 may. 2017 a las 17:34
  • podrias hacer una actualizacion del codigo para verifcar?
    – NeKSV
    Commented el 30 may. 2017 a las 17:58

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.