Hi All
In normal website, implementing a Street Search on a page is fairly trivial and then populating some fields with the places data afterwards is the same. I was wondering the best way to implement similar within WiseJ, but to put the places data into WiseJ.Web.TextBoxes.
Sample HTML/Javascript is below (Note: Google API Key removed for Security):
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=GOOGLEKEY"></script>
<script type="text/javascript">
window.onload = function () {
var officeLocation = new google.maps.LatLng(-30.4806266, 23.5050908); // Centre ZA
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-35, 15), //bottom left corner
new google.maps.LatLng(-21, 34) //top right corner
);
var options = {
componentRestrictions: { country: 'za' },
location: officeLocation,
bounds: defaultBounds,
strictBounds: true
};
var streetSearch = document.getElementById('GoogleStreetSearch');
var streetNo = document.getElementById('StreetNo');
var streetName = document.getElementById('StreetName');
var suburb = document.getElementById('Suburb');
var town = document.getElementById('Town');
var postcode = document.getElementById('PostCode');
var GoogleStreetSearchAutocomplete = new google.maps.places.Autocomplete(streetSearch, options);
google.maps.event.addListener(GoogleStreetSearchAutocomplete, 'place_changed', function () {
var place = this.getPlace();
if (!place.geometry) { return; } // if user didn't select a place/street
streetNo.value = '';
streetName.value = '';
suburb.value = '';
town.value = '';
postcode.value = '';
for (var p = 0; p < place.address_components.length; p++) {
var item = place.address_components[p];
switch (item.types[0]) {
case 'street_number':
streetNo.value = item.short_name;
break;
case 'route':
streetName.value = item.long_name.toUpperCase();
break;
case 'sublocality_level_1':
suburb.value = item.long_name.toUpperCase();
break;
case 'locality':
if (suburb.value == '') {
suburb.value = item.long_name.toUpperCase();
}
town.value = item.long_name.toUpperCase();
break;
case 'postal_code':
postcode.value = item.short_name;
break;
}
}
});
};
</script>
<div>
<label>Search for Address</label>
<div>
<input id="GoogleStreetSearch" name="GoogleStreetSearch" type="text" style="width: 100%; max-width: 100%;" />
</div>
</div>
<div>
<label>Street No</label>
<div>
<input id="StreetNo" name="StreetNo" />
</div>
<label>Street Name</label>
<div>
<input id="StreetName" name="StreetName" />
</div>
</div>
<div>
<label>Suburb</label>
<div>
<input id="Suburb" name="Suburb" />
</div>
<label>Town</label>
<div>
<input id="Town" name="Town" />
</div>
</div>
<div>
<label>Post Code</label>
<div>
<input id="PostCode" name="PostCode" />
</div>
</div>
Hi Kevin,
There is a GitHub examples repository and also the GitHub extensions repository.
If I understand your question correctly you want to do what’s in the GoogleMaps example that was updated recently with the following description
Use GoogleMaps reverse Geolocation: get Coords from address and vv..
Type a incomplete address and get it’s coordinates. Then get it’s full postal address. That’s the sample. But you can use reverse geocoding the way you prefer. A GeocoderResult object is returned every time and it carries all the information, even lots of information the sample doesn’t show (yet).
Reverse Geocoding is a brand new functionality of the GoogleMaps extension. To use it, please use the DLL in the example above or build from source, using the source code at Wisej.Web.Ext.GoogleMaps.
In your Javascript code, in the place_changed event, call a WiseJ web method in and pass in the fields or object. Then you can populate the textboxes in C# or VB.
Javascript:
App.frmMyForm.ReceivePlace(place.geometry.location);
…
.NET:
<WebMethod>
Public Function ReceivePlace(ByVal obj)
‘Passed in from PAC javascript, place a marker on the map.
Dim dblLat As Double = CDbl(obj.lat)
Dim dblLng As Double = CDbl(obj.lng)
See also https://wisej.com/docs/html/JavaScriptObjectModel.htm
Please login first to submit.