[SOLUCIONADO] Obtener coordenadas Google Maps pinchando

rubiomike · #1 (**permalink**) 04/05/2015, 08:56

Hola a todos, estoy intentando conseguir las coordenadas de google maps cuando un usuario pincha sobre un punto concreto del mapa. El mapa es un iframe introducido en la web que estoy creando, pero no se como obtenerlas, he leído documentación de Google y cada vez estoy más confuso.

Lo quiero es algo como esto, pero mucho más simple:

http://www.coordenadas-gps.com/

Es decir poner un mapa, que el usuario pueda pinchar en un sitio concreto y obtener las coordenadas para insertarlas después en la base de datos. No deseo saber donde se encuentra el usuario, sino poder guardar las coordenadas que el indique.

¿Alguien me echa una mano?

El código que tengo para mostrar el mapa es el siguiente:

Código Javascript:

Ver originalgoogle.maps.event.addDomListener(window, 'load', init);
 
function init() {
    var mapOptions = {
        zoom: 18,
        scrollwheel: false,
        center: new google.maps.LatLng(41.652251, -4.7245321),
        styles: [{"stylers": [{"hue":"#2c3e50"},{"saturation":250}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":50},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}]
    };
 
    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
}

Dicho mapa se muestra en una div que he llamado "map".

Un saludo a todos!

#2 (**permalink**) 05/05/2015, 10:04

"Del arte del buen comer ..."

Hola rubiomike:

En tu código veo que trabajas estilos en el mapa, antes de saber como hacer funcionar el evento onclik que es lo que pides.

Yo no trabajo con <iframe> sino con páginas.
Tal vez puedas crear la tuya e insertarla. Esto es el google.maps.event.addListener(map, 'click', function (event) y geocoder (además de las coordenadas te proporciono la dirección).

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Localización onclick</title>
    <link rel="shortcut icon" type="image/ico" href="http://www.digitaleando.com/imag/logo.ico">
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;font-family:"Trebuchet MS",verdana,arial;}
#texto{width:25%;float:left;vertical-align:middle;padding: 2%;}
#mapa{width:70%;height:100%;float:right;}
#anuncio{bottom:16px;position:absolute;right:0;width:160px;z-index:100}
</style>
    <script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script>
<!-- //
var map;
var geocoder;
var infoWindow;
var marker;
window.onload = function () {
  var latLng = new google.maps.LatLng(-34.796607,-58.466545);
  var opciones = {
    center: latLng,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById('mapa'), opciones);
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(map, 'click', function (event) {
    geocoder.geocode({
      'latLng': event.latLng
    }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          document.getElementById('direccion').innerHTML = '<br /><span style="color:#FF0099">' + results[0].formatted_address + '</span>';
          document.getElementById('coordenadas').innerHTML = '<br /><span style="color:#FF0099">' + results[0].geometry.location + '</span>';
          if (marker) {
            marker.setPosition(event.latLng)
          } else {
            marker = new google.maps.Marker({
              position: event.latLng,
              map: map
            })
          }
          infowindow.setContent(results[0].formatted_address + '<br/> Coordenadas: ' + results[0].geometry.location);
          infowindow.open(map, marker)
        } else {
          document.getElementById('mensaje').innerHTML = 'No se encontraron resultados'
        }
      } else {
        document.getElementById('mensaje').innerHTML = 'Geocodificación  ha fallado debido a: ' + status
      }
    });
  });
}
// -->
</script>
  </head>
  <body>
    <div id="texto">
      <h3> Haga click sobre el mapa y verá su dirección</h3>
      Dirección del click: <span id="direccion" style="color: #00FFB3;"></span>
      <br/>
      Coordenadas: <span id="coordenadas" style="color: #00FFB3;"></span>
      <br />
      <span id="mensaje"></span>
    </div>
    <div id="mapa"></div>
    </div>
  </body>
</html>

Esto es básico en el trabajo de Google Maps. Si lo tuyo es un ejercicio, un estirón de orejas al profesor. Si lo haces por tu cuenta, comienza (y es redundancia) por el principio.

rubiomike · #3 (**permalink**) 05/05/2015, 15:07

Hola txemaarbulo, gracias por responder. Sí lo estoy haciendo por mi cuenta jejeje.

Ya lo conseguí ayer, simplemente tenía que introducir el siguiente código:

Código Javascript:

Ver original//con esto obtengo las coordenadas y coloco el marker
google.maps.event.addListener(map, 'click', function(event) {
 
        var coordenadas = event.latLng;
        var lat = coordenadas.lat();
        var lng = coordenadas.lng();
            placeMarker(event.latLng);
 
}
 
 
//y aquí la función que me permite colocar el marcador, los condicionales son
//para que solo un marcador aparezca a la vez, así que si ya existe uno, lo recoloca
//en la nueva posición
 
var marker;
 
function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
} //fin funcion placeMarker

Un saludo y gracias de nuevo