Código de HTML - Mapa por geolocalización

Imágen de perfil
Val: 47
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Mapa por geolocalizacióngráfica de visualizaciones


HTML

Publicado el 11 de Abril del 2015 por Miguel Angel
17.734 visualizaciones desde el 11 de Abril del 2015
Dibujo


El siguiente código permite obtener las coordenadas de la ubicación de un sitio para poder ser mostrado y personalizado mediante geolocalización
Lo primero que hay que hacer es introducir la dirección del sitio que queremos mostrar en nuestro mapa ,nos devolverá las coordenadas ,cambiamos las que mostramos al igual que los datos mostrados en el tooltip , podemos aumentar o disminuir el zoom de visualización del mapa

Requerimientos

sin requerimientos

html-javascipt
estrellaestrellaestrellaestrellaestrella(20)

Publicado el 11 de Abril del 2015gráfica de visualizaciones de la versión: html-javascipt
17.735 visualizaciones desde el 11 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Google Maps Geocodificación simple">
    <title>Google Maps Geocodificación simple</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=es"></script>
<style type="text/css">
html,body{margin-top:1%;padding:0;width:100%;height:500px;font-family:Trebuchet MS,verdana,arial;background-color:blue;}
#container{margin:0 auto;width:90%;height:100%;background-color:#ccc;padding:20px;}
#mapa{width:70%;height:100%;float:right}
#texto{width:25%;height:100%;float:left;vertical-align:middle;padding:2%}
#texto input.navi{font-size:18px;width:90%;height:30px;margin-bottom:10px}
</style>
<script type="text/javascript">
//<![CDATA[
var map, geocoder;
window.onload = function () {
                                                                 <!--latitud y longitud que podemos cambiar una vez obtenidas-->
  var latlng = new google.maps.LatLng(40.323892 , -3.852782 );
    <!--podemos aumentar o disminuir el zoom del mapa a mostrar (zoom: 15)-->
  var mapOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
  // llama a la funcion
  geocoder = new google.maps.Geocoder();
};
 
function codeAddress() {
  var address = document.getElementById('address').value;
  // Función completa de Geocoding
  geocoder.geocode({
    'address': address
// 'latLng': latlng si lo que queremos ejecutar en geocodificación inversa
  }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      document.getElementById('x').innerHTML = results[0].geometry.location.lat().toFixed(6);
      document.getElementById('y').innerHTML = results[0].geometry.location.lng().toFixed(6);
      map.setCenter(results[0].geometry.location);
      document.getElementById('direccion').innerHTML = results[0].formatted_address;
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
	  //podemos personalisar el toltip aqui
      infowindow = new google.maps.InfoWindow({
        content: '<h4>JK electricidad</h4>'+results[0].formatted_address + '<br> Latitud: ' + results[0].geometry.location.lat().toFixed(6) + '<br> Longitud: ' + results[0].geometry.location.lng().toFixed(6)
      });
      infowindow.open(map, marker)
    }
// Se detallan los diferentes tipos de error
else {
      alert('Geocode no tuvo éxito por la siguiente razón: ' + status)
    }
  })
};
//]]>
</script>
  </head>
  <body>
  <div id="container">
    <!--al introducir los datos obtendremos las coordenadas (LatLng )que nos permite cambiar  var latlng para personalizar nuestro mapa -->
<section id="texto">
  <h3>Dirección a localizar</h3>
  <!--se inserta la dirección completa que queremos mostrar en el mapa-->
  <p>Sobreescriba la dirección<br>puede indicar coordenadas lat,lng separadas por coma (,):</p>
      <input id="address" type="textbox" size="38" maxlength="80" value="" placeholder="Dirección o Lat, Lng" />
      <br>
	  <!--nos devuelve la latitud-->
      Latitud: <span style="color:red;" id="x"></span>
      <br>
	    <!--nos devuelve la longitud-->
      Longitud: <span style="color:red;" id="y"></span>
      <br>
	    <!--nos devuelve la direcion completa-->
      Dirección completa:<br><span style="color:blue;" id="direccion"></span>
      <br>
      <input type="button" class="navi" value="Localizar" onclick="codeAddress()">
    </section>
    <div id="mapa"></div>
	</div>
  </body>
</html>



Comentarios sobre la versión: html-javascipt (20)

Imágen de perfil
12 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Muy bueno, práctico, sencillo y totalmente aplicable. Muchas gracias !
Cómo se podría modificar para que muestre todos o al menos los 5 ó 10 primeros encontrados antes de enviarte directamente al mapa? Ejemplo: Belgrano 1200 y te lleva directamente a la primera dirección encontrada que no siempre es la buscada. Igualmente, gracias por compartir !
Miguel
Responder
Imágen de perfil
26 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Gracias, esperó que te sea útil, si quieres que te salga una dirección exacta, debes dar todos los datos, observa mi web http://www.jkelectricidad.hol.es .
Si ves mi mapa verás que es mi dirección no muestra otras
Responder
Imágen de perfil
12 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Por nada Miguel, perdona pero no entiendo bien tu pregunta
Responder
Imágen de perfil
13 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Impresionante Miguel, esta excelente!!!
Responder
Andrés Quintero
14 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Muy buen aporte. Gracias =)
Responder
Imágen de perfil
21 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Excelente aporte Miguel ...sera utilizado en mi Web!!!
Responder
jajo32
22 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Muchas Gracias por compartir !!
Responder
Gabriel
22 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Muchas Gracias Miguel, me ayudo bastante, excelente informacion!
Responder
Lucio
25 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Hola Miguel Angel

Muy buen aporte. PREGUNTA. Quisiera saber si lo has tratado de modificar con otras opciones. Por ejemplo si cada marca que se visualice en el mapa quede gravada en alguna tabla o base de datos y la puedas consultar a antojo.

Saludos desde La Rioja, Argentina
Responder
Imágen de perfil
26 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Gracias, lucio la verdad no lo he intentado, para revisar las visitas a mi web utilizó google analytics , lo que si he hecho es poner imagen o foto como recuadro , creó que se podría lograr coger esos datos , si tengo tiempo lo intento ,si lo haces tu agradezco ese aporte
Responder
Juan Antonio
19 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Hola Miguel Ángel

Trabajo en una Municipalidad en Seguridad Ciudadana, aun no he probado tu código, pero leyendo los buenos comentarios de las demás personas veo que tu código es el ideal, quisiera por favor me ayudes a resolver el siguiente problema: registro los delitos ocurridos en mi distrito en una base de datos SQL y quisiera geolocalizarlos en el mapa. Por favor seria posible que me ayudes.
Gracias
Responder
Imágen de perfil
7 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
Gracias, Miguel. tengo una pregunta, yo quisiera usar tu codigo en mi pagina, mi pregunta es como le haria si yoestoy en mexico,con alimentar mi direccion bastaria???...

Saludos cordiales tu servidor Poncho Garcia
Responder
Imágen de perfil
8 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
hola poncho,,, a tu pregunta ..como harías si estas en mexico.....
1.copia el codigo antes descripto en el editor de texto que uses...guardalo con ext .html
2 ejecutalo en chrome por ejemplo...como veraz te aparece donde puedes introducir tu direccion para que google maps te devuelva las coordenadas
3.. estas coordenadas las copias y las reemplazaras en el lugar exacto en el codigo escrito ( var latlng = new google.maps.LatLng(40.323892 , -3.852782 ); por tus coordenadas


como veras el codigo esta en dos partes ,,, la primera es para obtener las coordenadas ,,( no para mostrar en tu sitio web ) la segunda si es el codigo ,,,si tienes alguna duda ... o no puedes... escribeme tu direccion y te lo detallo con con tus coordenadas
Responder
Imágen de perfil
8 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Excelente Post gracias
Responder
Gusutabo03
17 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
me sirvio bastante GRACIAS!!11
Responder
Miguel angel
18 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Me alegro
Responder
Edgar
28 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Podrias indicarme como pongo un archivo kml (contiene una ruta) en mi pagina web?
Responder
Anita
7 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
Hola Miguel gracias por tu aporte, una pregunta, como hago para que me trace la ruta desde mi ubicacion actual hasta la ubicacion ingresada
Responder
5 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
Interesante, aunque ami no me va muy bien, me arranca en Madrid (no estoy en Madrid) ,luego hago la prueba con VPN y sigue mostrandome Madrid.
Responder
Carlos
21 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
buen dia este se puede incrustar en un codigo de VFP
Responder

Comentar la versión: html-javascipt

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3132