How to click on a map an address from a form?

Asked

Viewed 346 times

0

How to show on the map the address of one of a form ?

    <table>
<tr>
    <td>
        @Html.Label("Cep: ")
        <br />
        @Html.TextBoxFor(e => e.CEP, new { maxlength = "9", id = "Cep", name = "Cep", onchange = "findCEP()" })
    </td>
</tr>
<tr>
    <td>
        @Html.Label("Endereco: ")
        <br />
        @Html.TextBoxFor(e => e.DescricaoEndereco, new { maxlength = "50", id = "Endereco", name = "Endereco" })
    </td>
   </tr>
<tr>
    <td>
        @Html.Label("    Nº: ")
        <br />
        @Html.TextBoxFor(e => e.Numero, new { maxlength = "50", id = "Numero", name = "Numero" })
    </td>
</tr>
<tr>
    <td>
        @Html.Label("Complemento: ")
        <br />
        @Html.TextBoxFor(e => e.Complemento)
    </td>
</tr>
<tr>
    <td>
        @Html.Label("UF: ")
        <br />
        @Html.DropDownListFor(e => e.UF, Model.UFList, new { id = "UF", name = "UF" })
    </td>
</tr>   
<tr>
    <td>
        @Html.Label("Cidade: ")
        <br />
        @Html.TextBoxFor(e => e.Cidade, new { maxlength = "40", id = "Cidade", name = "Cidade" })
    </td>
  </tr>  
   <tr>
    <td>
    @Html.Label("Bairro: ")
          <br />
                 @Html.TextBoxFor(e=>e.Bairro, new{maxlength="50",id="Bairro", name=        "Bairro" })
           </td>
    </tr>
  </table>

<div id="mapa">
  </div>
    <script>
      function findCEP() {
    $("#Cep").blur(function () {
        consulta = $("#Cep").val()
        consulta = consulta.replace("-", "");
        var url = "http://cep.correiocontrol.com.br/" + consulta + ".json";
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            success: function (json) {
                $("#Endereco").val(json.logradouro)
                $("#Bairro").val(json.bairro)
                $("#Cidade").val(json.localidade)
                $("#UF option[value='" + json.uf + "']").attr("selected", true);
                $("#Numero").focus();                
                var endereco = json.bairro + ' ' + json.localidade + ' ' + json.uf;
                carregarNoMapa(endereco);//Chama a funcao passando o endereco concatenado

            },
        });

    });
}

        function initialize() {
       var geocoder;
       var map;
       var marker;
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(function (position) {
               var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
               var options = {
                   zoom: 14,
                   center: latlng,
                   mapTypeId: google.maps.MapTypeId.ROADMAP

               };
               map = new google.maps.Map(document.getElementById("mapa"), options);

               geocoder = new google.maps.Geocoder();
               marker = new google.maps.Marker({
                   map: map,
                   draggable: false,
               });
               marker.setPosition(latlng);
           })             

       }       

   }


       function carregarNoMapa(endereco) {
           geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, //Erro no geocode function (results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
                   if (results[0]) {
                       var latitude = results[0].geometry.location.lat();
                       var longitude = results[0].geometry.location.lng();

                       $('Endereco').val(results[0].formatted_address);                         

                       var location = new google.maps.LatLng(latitude, longitude);
                       marker.setPosition(location);
                       map.setCenter(location);
                       map.setZoom(16);
                   }
               }
           });
       }



   </script>
  • You are entering the Google Maps API script?

  • yes! in my function to load map, I pass the address by parameter which is nothing more than all the concatenated address attributes ,as you can see in the code!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.