How to set the google maps display by a form?

Question

I applied viacep.com javascript in a form, so when the ZIP code is informed, it completes data such as address without number, city, state and neighborhood. I would like, with this information, to display this street on google maps. After a user click, place a marker on this map that would complete the street number and the latitude and longitude of this marker. Below, I show q already managed for now: just display the map with center in sp state.

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

Answer 1

I did exactly that on a customer registration form, follow what I did that will work out all right

READ JAVASCRIPT COMMENTS

    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);
          }
        });
      }