danielacamargo Postado Quinta às 02:09 Denunciar Share Postado Quinta às 02:09 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? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Frank K Hosaka Postado 20 horas atrás Denunciar Share Postado 20 horas atrás 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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Frank K Hosaka Postado 10 horas atrás Denunciar Share Postado 10 horas atrás 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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
danielacamargo
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?
console.log(place.adr_address) retorna:
Como pegar o conteúdo específico, street-address?
Link para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.