Places Maps

danielacamargo · Novembro 7

Estou usando a APi do maps para o usuário procurar o endereço e salvar no sistema.

Preciso salvar no db conforme o campo.

Endereço , Bairro, Cidade, Estado.

Porém como pegar o valor de cada campo?

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        center: {-23.6211833, lng: -45.6295431},
        zoom: 13,
        mapTypeControl: false,
    });

const input = document.getElementById("pac-input");

const autocomplete = new google.maps.places.Autocomplete(input, options);

 autocomplete.addListener("place_changed", () => {
        infowindow.close();
        marker.setVisible(false);

        const place = autocomplete.getPlace();

        if (!place.geometry || !place.geometry.location) {
                   window.alert("Endereço '" + place.name + "'" não encontrado: );

            return;
        }

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }

        marker.setPosition(place.geometry.location);
        marker.setVisible(true);
   });
}

console.log(place.adr_address) retorna:

<span class="street-address">Av. Paulista, 302</span> - <span class="extended-address">Bela Vista</span>, <span class="locality">São Paulo</span> - <span class="region">SP</span>, <span class="postal-code">01310-904</span>, <span class="country-name">Brasil</span>

Como pegar o conteúdo específico, street-address?

Frank K Hosaka · Terça às 04:22

Eu não consegui trabalhar com o API do Places, mas se você conseguiu a informação na forma de texto, aqui segue a sugestão:

<!DOCTYPE html>
<html>
  <head>
    <title>Obter Conteúdo dos Spans de uma Variável</title>
  </head>
  <body>
    <div id="output"></div>
    <script>
      // Suponha que esta seja a string contendo o HTML
      const htmlString = `
        <span class="street-address">Av. Paulista, 302</span> - 
        <span class="extended-address">Bela Vista</span>, 
        <span class="locality">São Paulo</span> - 
        <span class="region">SP</span>, 
        <span class="postal-code">01310-904</span>, 
        <span class="country-name">Brasil</span>
      `;

      // Parsear a string HTML para um documento DOM
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, 'text/html');

      // Função para obter o conteúdo de um span com uma classe específica
      function getContentByClass(className) {
        return doc.querySelector(`.${className}`).textContent;
      }

      // Obter o conteúdo de cada span
      const streetAddress = getContentByClass('street-address');
      const extendedAddress = getContentByClass('extended-address');
      const locality = getContentByClass('locality');
      const region = getContentByClass('region');
      const postalCode = getContentByClass('postal-code');
      const countryName = getContentByClass('country-name');

      // Exibir o conteúdo obtido
      const outputDiv = document.getElementById('output');
      outputDiv.innerHTML = `
        <p><strong>Endereço:</strong> ${streetAddress}</p>
        <p><strong>Endereço Extendido:</strong> ${extendedAddress}</p>
        <p><strong>Cidade:</strong> ${locality}</p>
        <p><strong>Estado:</strong> ${region}</p>
        <p><strong>CEP:</strong> ${postalCode}</p>
        <p><strong>País:</strong> ${countryName}</p>
      `;
    </script>
  </body>
</html>

Frank K Hosaka · Terça às 14:10

Depois de criar o meu projeto, criar o meu API_KEY, ativar o recurso do Google Maps, finalmente eu consegui pegar o valor do place.formatted_address. Isso não é lá grande coisa. Pelo que eu entendi, para obter as informações mais detalhadas do place, é preciso fazer outra solicitação, primeiro você tem que ter o place.id, depois você faz a solicitação do place details. Mas eu estou contente, esse é o meu primeiro código com o Google Maps:

<!DOCTYPE html>
<html>
  <head>
    <title>Maps and Places Autocomplete</title>
    <script>
      async function init() {
        await customElements.whenDefined('gmp-map');

        const map = document.querySelector('gmp-map');
        const marker = document.querySelector('gmp-advanced-marker');
        const placePicker = document.querySelector('gmpx-place-picker');
        const infowindow = new google.maps.InfoWindow();

        map.innerMap.setOptions({
          mapTypeControl: false
        });

        placePicker.addEventListener('gmpx-placechange', () => {
          const place = placePicker.value;

          if (!place.location) {
            window.alert("No details available for input: '" + place.name + "'");
            infowindow.close();
            marker.position = null;
            return;
          }

          if (place.viewport) {
            map.innerMap.fitBounds(place.viewport);
          } else {
            map.center = place.location;
            map.zoom = 17;
          }

          marker.position = place.location;
          infowindow.setContent(
            `<strong>${place.displayName}</strong><br>
             <span>${place.formattedAddress}</span>`
          );
          infowindow.open(map.innerMap, marker);
          conteudo.value = place.formattedAddress;
        });

        map.innerMap.addListener('click', function(event) {
          const lat = event.latLng.lat();
          const lng = event.latLng.lng();

          const geocoder = new google.maps.Geocoder();
          geocoder.geocode({ 'location': { lat: lat, lng: lng } }, function(results, status) {
            if (status === 'OK' && results[0]) {
              const place = results[0];
              const formattedAddress = place.formatted_address;

              infowindow.setContent(`<div><strong>${formattedAddress}</strong></div>`);
              infowindow.setPosition(event.latLng);
              infowindow.open(map.innerMap);

              conteudo.value= formattedAddress;
            } else {
              console.error('Nenhum resultado encontrado: ' + status);
            }
          });
        });
      }

      document.addEventListener('DOMContentLoaded', init);
    </script>
    <script type="module" src="https://unpkg.com/@googlemaps/extended-component-library@0.6"></script>
    <style>
      html,
      body {
        height: 90%;
        margin: 0;
        padding: 0;
      }

      .place-picker-container {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_GE_mapsandplacesautocomplete_v1"></gmpx-api-loader>
    <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
      <div slot="control-block-start-inline-start" class="place-picker-container">
        <gmpx-place-picker placeholder="Enter an address"></gmpx-place-picker>
      </div>
      <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <div style="width:500px; margin-left:50px; margin-top:50px">
      <form action="cadastro.php" method="post">
        Conteudo <input id="conteudo" name="conteudo" size="80">
        <input type="submit">
      </form>
    </div>
  </body>
</html>

Entrar

Places Maps

Pergunta

danielacamargo

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades