Help with Google Static Maps API

Question

Help with Google Static Maps API

Navigation

#1 by (1 votes)
#2 by (0 votes)

4

Hello, I am developing a website in which I have a form and ask for details of the address. I want to implement that API as a reference and the problem comes from implementing google maps. How do I capture the long. and lat. put the user and then save the url of google maps. The code I have is the following, I hope you can help me.

<!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>

and the link where the long should go. and alt. It's the next one.

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

javascript html

asked by Sistemas MKT 18.05.2016 в 21:26

source

2 answers

Error sending mail in php The JProgressBar does not appear when I execute it

score 1 · Answer 1

How I do to capture the long. and lat. put the user and then save the url of google maps

Looking at the code that you put and the question sounds like you have a map in which the user moves a marker or a form where you take a latitude and a longitude and then you want to generate the url of a static map that points directly at those coordinates .

To know which coordinates are chosen by the user on a map, you only have to add a dragend event to your marker and extract the latitude and longitude from there.

To obtain the static map you must use the center parameter with the center=<lat>,<lon> format to specify the location and in the markers you specify a pair of coordinates as parameters and google maps interpret it as it (or the) center ( s) of the markers

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

Here is a demo with the map. Move the marker so that you see the same position reflected on the static map.

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>

score 0 · Answer 2

There is a difference between what your code does and the link you want to upload, the link you want to upload generates a static map, an image:

link \% 20 & markers = size: mid% 7Ccolor: network% 7CSan + Jose, CA & key = AIzaSyBHtODrlxSMspVWqW2oGMKzbAiJnAjPPXk

and the implementation you have generates a map which generates a marker depending on the data of latitude, longitude.

If what you want is to insert a static map (image) in your html, from a text, you can capture the text of the city and send it to google maps to generate the image:

<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>

You enter the name of a city and concatenate it to the URL of the google API, resulting in: