You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/map-search-location.md
+6-9Lines changed: 6 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: Show search results with Azure Maps | Microsoft Docs
3
3
description: How to perform a search request with Azure Maps then display the results on a Javascrip map
4
4
author: jingjing-z
5
5
ms.author: jinzh
6
-
ms.date: 05/07/2018
6
+
ms.date: 08/26/2018
7
7
ms.topic: conceptual
8
8
ms.service: azure-maps
9
9
services: azure-maps
@@ -13,21 +13,18 @@ ms.custom: codepen
13
13
14
14
# Show search results on the map
15
15
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.
17
17
18
18
## Understand the code
19
19
20
-
<iframeheight='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
+
<iframeheight='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>.
21
21
</iframe>
22
22
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.
24
24
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.
30
26
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.
0 commit comments