Updated version below…
Two things before we start.
First, I am genuinely surprised that I couldn’t find a Power Pages article on this topic.
I feel almost embarrassed posting this, as it seems like everyone else knows how to do it.
Yet, I have a rule: if I struggle with something, there must be someone somewhere trying to build something similar. For the person crying for help somewhere in the world… here you go! I hope this helps you feel better 🙂
Second, the functionality I am talking about won’t exist for long. But we all know how dev works. I promise you another one for the Azure Maps soon.
Important announcement!
Bing Maps for Enterprise is deprecated and will be retired. Enterprise account customers can continue to use Bing Maps for Enterprise services until June 30th, 2028. Free (Basic) account customers can continue to use Bing Maps for Enterprise services until June 30th, 2025. To avoid service disruptions, all implementations using Bing Maps for Enterprise REST APIs and SDKs will need to be updated to use Azure Maps by the retirement date that applies to your Bing Maps for Enterprise account type. For migration documentation, please see Bing Maps Migration Overview. For more details on the retirement, see the announcement on the Bing Maps Blog.
And as always, WHY and WHY NOW.
We are replacing Canvas App with the Power Pages website. The app had the autosuggest functionality implemented so we need it as well. For Canvas App we have Azure Maps validation OOTB:
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/geospatial-component-input-address
OK. All formalities are finished. Let’s get to work!
This is a great article here, basically, giving you a working HTML:
You just need to get a Bing Maps key on a dev portal here:
https://www.bingmapsportal.com/
OK. We’ve got a working HTML with the address validation.
But how do you say it in Power Pages?
Let’s see what we need to do and what’s the difference. The original HTML is below for your reference.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
function GetMap() {
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
callback: function () {
var manager = new Microsoft.Maps.AutosuggestManager({
placeSuggestions: false
});
manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
},
errorCallback: function(msg){
alert(msg);
},
credentials: 'Your Bing Maps Key'
});
}
function selectedSuggestion(result) {
//Populate the address textbox values.
document.getElementById('addressLineTbx').value = result.address.addressLine || '';
document.getElementById('cityTbx').value = result.address.locality || '';
document.getElementById('countyTbx').value = result.address.district || '';
document.getElementById('stateTbx').value = result.address.adminDistrict || '';
document.getElementById('postalCodeTbx').value = result.address.postalCode || '';
document.getElementById('countryTbx').value = result.address.countryRegion || '';
}
</script>
<style>
#searchBox {
width: 400px;
}
.addressForm {
margin-top:10px;
background-color: #008272;
color: #fff;
border-radius:10px;
padding: 10px;
}
.addressForm input{
width:265px;
}
</style>
http://www.bing.com/api/maps/mapcontrol?callback=GetMap
</head>
<body>
<div id='searchBoxContainer'>
<input type='text' id='searchBox'/>
</div>
<table class="addressForm">
<tr><td>Street Address:</td><td><input type="text" id="addressLineTbx"/></td></tr>
<tr><td>City:</td><td><input type="text" id="cityTbx"/></td></tr>
<tr><td>County:</td><td><input type="text" id="countyTbx"/></td></tr>
<tr><td>State:</td><td><input type="text" id="stateTbx"/></td></tr>
<tr><td>Zip Code:</td><td><input type="text" id="postalCodeTbx"/></td></tr>
<tr><td>Country:</td><td><input type="text" id="countryTbx"/></td></tr>
</table>
</body>
</html>First, we need to include this script below between the <head> tags :
http://www.bing.com/api/maps/mapcontrol?callback=GetMapIn our Power Pages Management app we find or create a content snippet “Head/Bottom”:
Add the script link there.
Next, what do we do with the rest of the script? It depends.
If you want to add it to all pages on your website and nothing changes in terms of the control name you use across, you could technically keep it inside <head>.
I will add it to the page that I know contains the form requiring address validation.
Even before we touch the script. Let’s check we have all the fields required and list all the field names as we need them to modify the script.
We need an Address Search field, for the POC I used an existing field, address1_name.
And for the address fields, for my form, it will be:
| Street: | address1_line1 |
| City: | address1_city |
| State: | address1_stateorprovince |
| Postal Code: | address1_postalcode |
| Country: | address1_country |
OK. Let’s put the script on the page.
HERE I PUT THE UPDATE>
In the old version, I put the script on the web page. It’s better to put it on the form instead. I had to call GetMap() explicitly to get it working and now it works as designed. I had to delete some steps in the article to reflect the change.
In the original HTML, we have a searchBox wrapped in the searchBoxContainer <div>.
<div id='searchBoxContainer'>
<input type='text' id='searchBox'/>
</div>If you inspect the custom search address input you added to the form on the portal, it is also wrapped in <div> but it doesn’t have an ID.
From the documentation here https://learn.microsoft.com/en-us/bingmaps/v8-web-control/modules/autosuggest-module/autosuggestmanager-class, the attachAutosuggest method requires the suggestedContainerId to be specified.
| Name | Return Type | Description |
|---|---|---|
attachAutosuggest(suggestionBoxId: string, suggestionContainerId: string, selectedSuggestionCallback: function(result:SuggestionResult)) | Attaches the Autosuggest functionality to an input box. • suggestionBoxId – The HTML element identifier of the input box.• suggestionContainerId – The Id of container where suggestions will be displayed.• selectedSuggestionCallback – A reference to a callback function that will be called when a user selects a suggestion from the Autosuggest UI. |
This is how we add ID to the existing <div> container:
$(document).ready(function() {
$("#address1_name").parent().attr("id", "searchBoxContainer");
});What else is left?
We place two functions code, GetMap and selectSuggestion, outside $(document).ready:
function GetMap() {
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
callback: function () {
var manager = new Microsoft.Maps.AutosuggestManager({
placeSuggestions: false,
countryCode : 'AU'
});
manager.attachAutosuggest('#address1_name', '#searchBoxContainer', selectedSuggestion);
},
errorCallback: function(msg){
alert(msg);
},
credentials: 'YOUR BING MAP KEY'
});
}
function selectedSuggestion(result) {
//Populate the address textbox values.
$("#address1_line1").val(result.address.addressLine || '');
$("#address1_city").val(result.address.locality || '');
$("#address1_stateorprovince").val(result.address.adminDistrict || '');
$("#address1_postalcode").val(result.address.postalCode || '');
$("#address1_country").val(result.address.countryRegion || '');
}we populate address fields from the result object.
I used AutosuggestOptions Object https://learn.microsoft.com/en-us/bingmaps/v8-web-control/modules/autosuggest-module/autosuggestoptions-object countryCode property to limit suggestions to the Australian addresses.
This is the complete JavaScript code I put on the page (address1_name in the code is your search address custom field):
$(document).ready(function() {
$("#address1_name").parent().attr("id", "searchBoxContainer");
});
function GetMap() {
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
callback: function () {
var manager = new Microsoft.Maps.AutosuggestManager({
placeSuggestions: false,
countryCode : 'AU'
});
manager.attachAutosuggest('#address1_name', '#searchBoxContainer', selectedSuggestion);
},
errorCallback: function(msg){
alert(msg);
},
credentials: 'YOUR BING MAP KEY'
});
}
function selectedSuggestion(result) {
//Populate the address textbox values.
$("#address1_line1").val(result.address.addressLine || '');
$("#address1_city").val(result.address.locality || '');
$("#address1_stateorprovince").val(result.address.adminDistrict || '');
$("#address1_postalcode").val(result.address.postalCode || '');
$("#address1_country").val(result.address.countryRegion || '');
}Finally, this is the screenshot of the working page below:
Hope it helps.
Olena's Dynamics Blog (post-AI) 