Tema: Obtener coordenadas Google Maps pinchando
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/05/2015, 10:04
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Obtener coordenadas Google Maps pinchando
"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
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Localización onclick</title>
  7.     <link rel="shortcut icon" type="image/ico" href="http://www.digitaleando.com/imag/logo.ico">
  8. <style type="text/css">
  9. html,body{margin:0;padding:0;width:100%;height:100%;font-family:"Trebuchet MS",verdana,arial;}
  10. #texto{width:25%;float:left;vertical-align:middle;padding: 2%;}
  11. #mapa{width:70%;height:100%;float:right;}
  12. #anuncio{bottom:16px;position:absolute;right:0;width:160px;z-index:100}
  13. </style>
  14.     <script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  15.     <script>
  16. <!-- //
  17. var map;
  18. var geocoder;
  19. var infoWindow;
  20. var marker;
  21. window.onload = function () {
  22.   var latLng = new google.maps.LatLng(-34.796607,-58.466545);
  23.   var opciones = {
  24.     center: latLng,
  25.     zoom: 5,
  26.     mapTypeId: google.maps.MapTypeId.HYBRID
  27.   };
  28.   var map = new google.maps.Map(document.getElementById('mapa'), opciones);
  29.   geocoder = new google.maps.Geocoder();
  30.   infowindow = new google.maps.InfoWindow();
  31.   google.maps.event.addListener(map, 'click', function (event) {
  32.     geocoder.geocode({
  33.       'latLng': event.latLng
  34.     }, function (results, status) {
  35.       if (status == google.maps.GeocoderStatus.OK) {
  36.         if (results[0]) {
  37.           document.getElementById('direccion').innerHTML = '<br /><span style="color:#FF0099">' + results[0].formatted_address + '</span>';
  38.           document.getElementById('coordenadas').innerHTML = '<br /><span style="color:#FF0099">' + results[0].geometry.location + '</span>';
  39.           if (marker) {
  40.             marker.setPosition(event.latLng)
  41.           } else {
  42.             marker = new google.maps.Marker({
  43.               position: event.latLng,
  44.               map: map
  45.             })
  46.           }
  47.           infowindow.setContent(results[0].formatted_address + '<br/> Coordenadas: ' + results[0].geometry.location);
  48.           infowindow.open(map, marker)
  49.         } else {
  50.           document.getElementById('mensaje').innerHTML = 'No se encontraron resultados'
  51.         }
  52.       } else {
  53.         document.getElementById('mensaje').innerHTML = 'Geocodificación  ha fallado debido a: ' + status
  54.       }
  55.     });
  56.   });
  57. }
  58. // -->
  59. </script>
  60.   </head>
  61.   <body>
  62.     <div id="texto">
  63.       <h3> Haga click sobre el mapa y verá su dirección</h3>
  64.       Dirección del click: <span id="direccion" style="color: #00FFB3;"></span>
  65.       <br/>
  66.       Coordenadas: <span id="coordenadas" style="color: #00FFB3;"></span>
  67.       <br />
  68.       <span id="mensaje"></span>
  69.     </div>
  70.     <div id="mapa"></div>
  71.     </div>
  72.   </body>
  73. </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.
Última edición por txemaarbulo; 05/05/2015 a las 10:10