It is in interactive feature of Mirosoft Azure when you use the map.

It can be used both for mobile and web applications.

Let’s quickly dive into it and see the step by step demo.

Go to Azure Portal, search for Azure Maps and click create.

Give the basic details and for the pricing tier, choose the default one that is Gen2. next, click create.

This is what the maps account looks like. Now we need to go to authentication.

We are going to need this primary key to authenticate this from within an app.

For the sample application, we are going to use this HTML code.

Just simple copy and paste this code on your computer. You can find this code at https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Tutorials/interactiveSearch.html?WT.mc_id=github-azuredevtipsvideo-azureappsdev Just simple copy and paste this code on an index.html file on your computer.

This page here loads an Azure Maps CSS file and JavaScript files for the maps control and he maps services JavaScript Web SDK.

Here is where the Azure map is initialized. It uses a div that has an id myMap.

Delete the Azure Active Directory authentication and add the subscriptionKey authentication below.

The code now looks like this. This is what the web page looks like in the browser.

This opens on a certain location and it also renders a map using Azure Maps.

If I search for something, it will be showing me an HTML list of the same.

And when you click on result, it takes you there as well.

Back in the HTML file, a JavaScript handles the search for you.

After some setup and some connections, it uses the search POI methods to do the search. It is aware of these methods only because we have loaded the Azure Maps JavaScript Web SDK file.

Finally when it gets the results, it displays them on the screen as an HTML list element that you can easily interact with.

That is it for this demo. I am sure you must be excited to get hands on with this demo. Go ahead and try this yourself.