4

Hola estoy desarrollando un sitio web en el cual tengo un formulario y pido datos del domicilio. Quiero implementar esa API como referencia y el problema viene al implementar google maps. Como hago para capturar la long. y lat. que ponga el usuario y despues guardar la url de google maps. El código que tengo es el siguiente, espero que me puedan ayudar.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>


    <script>

        // The following example creates a marker in Stockholm, Sweden using a DROP
        // animation. Clicking on the marker will toggle the animation between a BOUNCE
        // animation and no animation.

        var marker;

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
               zoom: 13,
               center: {lat: 19.4667, lng: -99.15}
            });

            marker = new google.maps.Marker({
               map: map,
               draggable: true,
               animation: google.maps.Animation.DROP,
               position: {lat: 19.4667, lng: -99.15}
            });

            marker.addListener('click', toggleBounce);
        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAxQokwn4C1YdSmS2lTsPqd2zIeZdQXTk&signed_in=true&callback=initMap"></script>
  </body>
</html>

y el link donde debe ir la long. y alt. es el siguiente.

https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap &markers=size:mid|color:red|San+Jose,CA&key=AIzaSyBHtODrlxSMspVWqW2oGMKzbAiJnAjPPXk

4
  • Cual es el problema? Para que capturar lat y long, simplemente porque se basa en esos datos para poder posicionarse y dibujar el marcador, creo que no esta bien redactada tu pregunta...
    – Jorgesys
    el 18 may. 2016 a las 19:40
  • Elenasys Lo que quiero decir es: ¿es posible guardar la ruta del mapa en algun lado y luego mostrarla como imagen atraves de google statick maps ? el 18 may. 2016 a las 19:51
  • Es una pagina web donde escribirias el nombre de la ciudad? ya que no quieres introducir datos de geolocalización?
    – Jorgesys
    el 18 may. 2016 a las 19:54
  • @SistemasMKT Lo que necesitas es un mapa estático que se base en latitud y longitud o un mapa dinámico que permita cambiar la posición del marker arrastrandolo con el mouse?
    – devconcept
    el 19 may. 2016 a las 12:33

2 respuestas 2

1

Como hago para capturar la long. y lat. que ponga el usuario y despues guardar la url de google maps

Mirando el código que pones y la pregunta suena que tienes un mapa en el que el usuario mueve un marker o un formulario donde coges una latitud y una longitud y luego quieres generar la url de un mapa estático que apunte directamente a esas coordenadas.

Para saber cuales son las coordenadas escogidas por el usuario en un mapa sólo tienes que agregar un evento dragend a tu marker y extraer de ahí la latitud y la longitud.

Para obtener el mapa estático debes usar el parámetro center con el formato center=<lat>,<lon> para especificar la localización y en los markers le especificas un par de coordenadas como parámetros y google maps lo interpretará como él(o los) centro(s) de los markers

markers=...|<lat>,<lon>|<lat>,<lon>|...

Aquí te dejo un demo con el mapa. Mueve el marker para que veas la misma posición reflejada en el mapa estático.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 19.4667,
      lng: -99.15
    }
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {
      lat: 19.4667,
      lng: -99.15
    }
  });
  marker.addListener('click', toggleBounce);
  marker.addListener('dragend', dragEnd);
}

function dragEnd(m) {
  var lat = m.latLng.lat();
  var lon = m.latLng.lng();
  var generatedUrl = 'https://maps.googleapis.com/maps/api/staticmap?center=' + lat + ',' + lon + '&zoom=13&size=512x512&maptype=roadmap&markers=size:mid|color:red|' + lat + ',' + lon + '&key=AIzaSyBHtODrlxSMspVWqW2oGMKzbAiJnAjPPXk';
  var url = document.getElementById('url');
  var img = document.getElementById('preview');
  url.textContent = generatedUrl
  img.setAttribute('src', generatedUrl);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  initMap();
});
<style>
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  .url-preview {
    overflow-x: scroll;
    white-space: nowrap;
  }
</style>

<div id="map"></div>
<hr>
<div class="url-preview">
  <h4>Generated url: <span id="url"></span></h4>
</div>
<hr>
<img id="preview">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAxQokwn4C1YdSmS2lTsPqd2zIeZdQXTk&signed_in=true"></script>

0

Existe una diferencia entre lo que hace tu código y el link que deseas cargar, el link que deseas cargar genera un mapa estatico, una imagen:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap\%20&markers=size:mid%7Ccolor:red%7CSan+Jose,CA&key=AIzaSyBHtODrlxSMspVWqW2oGMKzbAiJnAjPPXk

y la implementación que tienes genera un mapa el cual genera un marcador dependiendo de los datos de latitud, longitud.

Si lo que deseas es insertar un mapa estático (imagen) en tu html, a partir de un texto, puedes capturar el texto de la ciudad y enviarlo a google maps para que genere la imagen:

<html>
<body>
<form>
    <input type="text" id="ciudad" value="San Jose,CA" />
    <input type="button" id="btn" value="Busca ciudad" />
<img id="imagen" width="512">

</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var city = document.getElementById('ciudad').value,
                src = 'http://maps.googleapis.com/maps/api/staticmap?center=' + city +'&zoom=13&scale=false&size=600x300&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:1%7C' + city,
                img = document.getElementById('imagen'); 
            img.src = src;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

introduces el nombre de una ciudad y la concatenas a la url de la API google, teniendo como resultado:

introducir la descripción de la imagen aquí

2
  • Okay hasta ahi todo bien como hacer que la imagen sea dimanica, es decir que cambie dependiendo donde situen un marcador en un mapa en otra sección el 18 may. 2016 a las 19:57
  • Con ese ejemplo creado a partir de tu url puedes obtener la imagen estática de la ciudad y se agrega un marcador.
    – Jorgesys
    el 18 may. 2016 a las 20:52

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.