Default Data Attributes
$("#txtAddress1").geocomplete({
formId: "#myForm"
});
<div id="myForm">
<input id="txtAddress1" data-geocomplete="street address" />
<select data-geocomplete="country"></select>
...
</div>
Custom Data Attributes
$("#txtAddress2").geocomplete({
formId: "#myForm2"
addressDataKey: "geo-address"
});
<div id="myForm2">
<input id="txtAddress2" data-geo-address="street address" />
<select data-geo-address="country"></select>
...
</div>
Appended To Parent
$("#txtAddress3").geocomplete({
appendToParent: true
});
Not Appended To Parent
$("#txtAddress4").geocomplete({
appendToParent: false
});
Strict Bounds
$("#txtAddress5").geocomplete({
geolocate : true,
strictBounds : true
});
Callbacks
$("#txtAddress6").geocomplete({
onChange: function(name, result) {
console.log(name, result)
},
onNoResult: function(name) {
console.log("Could not find a result for " + name)
}
});
Google Map
var myMap = new google.maps.Map(document.getElementById("myMap"), {
center : { lat: 37.5, lng: -120 },
zoom : 6
});
$("#txtAddress7").geocomplete({
map: myMap
});