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>