Para adaptarlo (siempre sobre tu cógigo):
En HTML: llamamos a la función
codeAddress()
Código HTML:
Ver original<input type="button" class="navi" value="Localizar" onclick="codeAddress();" >
En Javascript, dos pasos:
1º: declarqación de geocoder arriba
Código Javascript
:
Ver originalvar infowindow;
var bound;
var map;
var geocoder; // importante incluirlo
2º, al final del javascript
Código Javascript
:
Ver originalfunction codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow = new google.maps.InfoWindow({
content:results[0].formatted_address + '<br/> Latitud: ' + results[0].geometry.location.lat() + '<br/> Longitud: ' + results[0].geometry.location.lng()});
infowindow.open(map, marker);
} else {
alert('Geocode no tuvo éxito por la siguiente razón: ' + status);
}
});
}
OBSERVACIONES:
- Verás que el mapa no se ajusta a todos los marcadores más la nueva dirección, por lo que se habrá de elegir un zoom más amplio o incluir el
map.fitBounds(bound); con los marcadores y la nueva dirección;
- El uso de tabla ralentiza la página. Te sugiero trabajar mediante
<div> y darles forma con CSS. (Se recomienda evitar el uso de tablas en todo lo posible)