Código de HTML - Mapa por geolocalización

Imágen de perfil

Mapa por geolocalizacióngráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(14)
Actualizado el 13 de Abril del 2015 por MIGUEL ANGEL (Creado el 11 de Abril del 2015)
3.316 visualizaciones desde el 11 de Abril del 2015. Una media de 42 por semana
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(14)

Actualizado el 13 de Abril del 2015 (Creado el 11 de Abril del 2015)gráfica de visualizaciones de la versión: html-javascipt
3.317 visualizaciones desde el 11 de Abril del 2015. Una media de 42 por semana
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 (14)

Imágen de perfil
Miguel
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
MIGUEL ANGEL
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
MIGUEL ANGEL
12 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Por nada Miguel, perdona pero no entiendo bien tu pregunta
Responder
Imágen de perfil
xve
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
EDGAR
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
MIGUEL ANGEL
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
poncho
07 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
MIGUEL ANGEL
08 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
Jazmin
08 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Excelente Post gracias
Responder

Comentar la versión: html-javascipt

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

http://lwp-l.com/s3132