how to load an address from a form on the map?

0

How do I show the address of a form on the map?

    <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>
    
asked by anonymous 27.03.2015 / 20:12

0 answers