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>