0

Eu apliquei o javascript do viacep.com em um formulario, então quando o CEP é informado, ele completa dados como endereço sem numero, cidade, estado e bairro. Eu gostaria de, com essas informações, exibir essa rua num google maps. Depois com um clique do usuario, colocar um marcador nesse mapa que completaria o numero da rua e a latitude e longitude desse marcador. Abaixo, mostro q ja consegui por enquanto: apenas exibir o mapa com centro no estado de sp.

<form method="get" action=".">
      <label for="cep">
        <span>Cep: <span class="required">*</span></span>
        <input class="input-field"  name="cep" type="text" id="cep" value="" size="10" maxlength="9" onblur="pesquisacep(this.value);" />
      </label>
    <br>
      <label for="rua">
        <span>Rua:</span>
        <input class="input-field"  name="rua" type="text" id="rua" size="60" />
      </label>
    <br>
      <label for="bairro">
        <span>Bairro:</span>
        <input class="input-field"  name="bairro" type="text" id="bairro" size="40" />
      </label>
    <br>
      <label for="field4">
        <span>Cidade:</span>
        <input class="input-field"  name="cidade" type="text" id="cidade" size="40" />
      </label>
    <br>
      <label for="uf">
        <span>Estado:</span>
        <input class="input-field"  name="uf" type="text" id="uf" size="2" />
      </label>
    <br>
    </form>
    <label><div id="googleMap" style="width: 100%; height: 300px;"></div></label>
      <script type="text/javascript">
        function myMap() {
          var mapProp= {
            center:new google.maps.LatLng(-23,-46),
            zoom:5,
            mapTypeId: google.maps.MapTypeId.HYBRID
          };
          var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

          var marker = new google.maps.Marker({position: myCenter});
          marker.setMap(map);
        }
      </script>

1 Resposta 1

0

Eu fiz exatamente isso em um formulário de cadastro de cliente, segue o que eu fiz que vai dar tudo certo

LEIA OS COMENTÁRIOS DO JAVASCRIPT

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 19,
          center: {lat: -34.397, lng: 150.644}
        });      
        var geocoder = new google.maps.Geocoder();
        geocodeAddress(geocoder, map);
      }

    function geocodeAddress(geocoder, resultsMap) {
     var ruaP = $("#logradouro").val() //CAMPO AONDE VOCÊ RECEBEU A RUA
     var bairroP =  $("#bairro").val() //CAMPO AONDE VOCÊ RECEBEU O BAIRRO
     var cidadeP =  $("#cidade").val() //CAMPO AONDE VOCÊ RECEBEU A CIDADE
     var estadoP  = $("#estado").val() //CAMPO AONDE VOCÊ RECEBEU O ESTADO
     var numeroP  = $("#numero").val() //CAMPO AONDE VOCÊ RECEBEU O NÚMERO      
        var endereco = {
              rua: ruaP,
                bairro: bairroP,
                cidade: cidadeP,
                estado: estadoP,
                numero: numeroP
            }
        var address =  endereco.rua + " " + endereco.bairro + " " + endereco.numero + " " + endereco.cidade + " " + endereco.estado
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .