google maps autocomplete first city or postal code then streets by city
HTML
<script src="http://cdn.jsdelivr.net/jquery.geocomplete/1.6.4/jquery.geocomplete.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div class="well container">
<form role="form" id="address_form">
<div class="form-group">
<label for="locality_q" class="sr-only">Stadt oder PLZ</label>
<input type="text" class="form-control" id="locality_q" name="locality_q" placeholder="Stadt oder PLZ" required="true" autocomplete="off" />
<p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben. <a href="#" id="resetAddress">Stadt ändern</a>
</p>
</div>
<div class="form-group">
<label for="route" class="sr-only">Straße / Hausnummer</label>
<div class="row">
<div class="col-xs-8">
<input type="text" class="form-control col-xs-8" id="route_q" name="route_q" placeholder="Straße" required="true" autocomplete="off" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." required="true" />
</div>
</div>
</div>
<div class="form-group">
<label for="sublocality_q" class="sr-only">Stadtteil</label>
<input type="text" class="form-control" id="sublocality_q" name="sublocality_q" placeholder="Stadtteil" required="true" autocomplete="off" />
<p class="help-block">Bitte korriegiere den Stadtteil, falls dieser nicht korrekt ist.</p>
</div>
</form>
<div class="details">
<input name="lat" type="hidden" value="" readonly="true" />
<input name="lng" type="hidden" value="" readonly="true" />
<input name="location" type="hidden" value="" readonly="true" />
<input name="route" type="hidden" value="" id="route" readonly="true" />
<input...
CSS
#map_canvas {
width: 100%;
height: 400px;
margin: 10px 20px 10px 0;
}
JavaScript
$(function () {
var localityInput = $('#locality_q'),
routeInput = $('#route_q'),
sublocalityInput = $('#sublocality_q'),
streetNumberInput = $('#street_number'),
formattedAddressInput = $('#formatted_address'),
boundsByCity,
locality,
route,
street_number,
formatted_address;
var options = {
map: '#map_canvas',
mapOptions: {
zoom: 10,
scrollwheel: true
},
types: ['geocode'],
componentRestrictions: {
country: 'de'
},
markerOptions: {
draggable: true
},
details: '.details',
detailsAttribute: 'name'
}
localityInput.blur(function () {
var text = $(this).val();
var locality = $(".pac-container .pac-item:first").text().replace(text, '');
localityInput.geocomplete('find', locality);
});
initLocalityInput();
function initLocalityInput() {
localityInput.focus();
localityInput.geocomplete(options)
.bind("geocode:result", function (event, result) {
initRouteInput(result.geometry.viewport);
});
}
formattedAddressInput.geocomplete(options);
function triggerGeocode(route, street_number, locality) {
formatted_address = route + ' ' + street_number + ' ' + locality;
formattedAddressInput.val(formatted_address);
formattedAddressInput.trigger('geocode')
.bind("geocode:result", function (event, result) {
// set sublocality
sublocality = $('#sublocality').val();
sublocalityInput.val(sublocality);
locality = $('#locality').val();
// set current locality to locality_q input
localityInput.val(locality);
});
}
function initRouteInput(boundsByCity) {
locality = $('#locality').val();
routeInput.val('').focus(); // enable route input and...