Skip to content

Commit 2ee6c20

Browse files
authored
Merge pull request #50061 from walsehgal/Mapsearchfeat
update to the search location codepen article in Azure maps
2 parents 3d7204a + d23ff60 commit 2ee6c20

File tree

1 file changed

+6
-9
lines changed

1 file changed

+6
-9
lines changed

articles/azure-maps/map-search-location.md

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Show search results with Azure Maps | Microsoft Docs
33
description: How to perform a search request with Azure Maps then display the results on a Javascrip map
44
author: jingjing-z
55
ms.author: jinzh
6-
ms.date: 05/07/2018
6+
ms.date: 08/26/2018
77
ms.topic: conceptual
88
ms.service: azure-maps
99
services: azure-maps
@@ -13,21 +13,18 @@ ms.custom: codepen
1313

1414
# Show search results on the map
1515

16-
This article shows you how to make a search request and show the search results on the map.
16+
This article shows you how to search for location of interest and show the search results on the map.
1717

1818
## Understand the code
1919

20-
<iframe height='500' scrolling='no' title='Show search results on a map' src='//codepen.io/azuremaps/embed/KQbaeM/?height=519&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/KQbaeM/'>Show search results on a map</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
20+
<iframe height='305' scrolling='no' title='Show search results on a map (Service Module)' src='//codepen.io/azuremaps/embed/zLdYEB/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/zLdYEB/'>Show search results on a map (Service Module)</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
2121
</iframe>
2222

23-
In the code above, the first block of code constructs a map object. You can see [create a map](./map-create.md) for instructions.
23+
In the code above, the first block of code constructs a map object and instantiates a client service. You can see [create a map](./map-create.md) for instructions.
2424

25-
The second block of code creates and adds a layer of search pins on the map. You can see [add a pin on the map](./map-add-pin.md) for instructions.
26-
27-
The third block of code sends an [XMLHttpRequest](https://xhr.spec.whatwg.org/) to [Azure Maps Fuzzy Search API](https://docs.microsoft.com/rest/api/maps/search/getsearchfuzzy).
28-
29-
The last block of code parses the incoming response. For a successful response, it collects the latitude and longitude information for each location returned. It adds all the location points to the map as pins and adjusts the bounds of the map to render all the pins.
25+
The second block of code uses Fuzzy search [Azure Maps Fuzzy Search API](https://docs.microsoft.com/rest/api/maps/search/getsearchfuzzy) to search for point of interest. Fuzzy search API can handle any combination of fuzzy inputs. The response from the fuzzy search service is then parsed into GeoJSON format and pins are added to the map to show the points of interest on the map.
3026

27+
The last block of code adds camera bounds for the map by using the Map's [setCameraBounds](https://docs.microsoft.com/javascript/api/azure-maps-control/models.cameraboundsoptions?view=azure-iot-typescript-latest) property.
3128

3229
## Next steps
3330

0 commit comments

Comments
 (0)