Multimap API V1.2 JavaScript Example

Searching - Spatial Search Example *new*

The Multimap API now allows you to make a search of the records that have been geocoded and stored in the table of addresses that we provide as part of your your Multimap service, and to display on a map the locations that the table contains.

You should manage your table of addresses through Multimap's Client Zone extranet portal; for details of how to use this, please see Multimap's Client Zone documentation.

This example focuses on spatial searches. Spatial searches are based on location (such as 'Where's my nearest...?' or 'What's within the area...?').

A search request to the Multimap API returns a record set. Each record set contains an array of records, each of which contains fields based on the contents of the records in your Multimap table of addresses. The example on this page shows only the name field for each item in the record set; for an example of a record set that includes distance-related information, please see the separate full Searching example.

Functions introduced:

MMSearchRequester: search()

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on St James Ave, Boston, Massachusetts, USA, at zoom factor 15.

To the right of the map is a column of data entry fields into which you can enter selection criteria to search your data and filter the results based on spatial criteria.

Please note that the effects of all these selection criteria are cumulative; if you select criteria on which to filter your data, a record appears in your list of results only if it matches all the criteria you have set.

• If you choose to search around a point, a search is performed for the nearest locations to a specific set of coordinates (such as a point with longitude -71.0667 and latitude 42.3552).
• If you choose to search around an address, a search will be performed for nearest locations to an address (such as "02116, USA").
• If you click on the "Restrict searching to bounds of map" checkbox, the Multimap API attempts to match only those address records located within the area that is visible on the map; it disregards all other possible results outside the bounds of the map, regardless of whether those records match any other selection criteria.
• You can use the "Min distance" and "Max distance" options to restrict the area of your search to within two variable radii. You can also select the units (miles or kilometers) in which to show your radii.
  (Please note that this example limits the range of values for these two parameters: their default values are 0 for minimum distance and 1,000 kilometers (or 621 miles) for maximum distance and you should allow for these values when creating your own implementations.)

When you click on the "Search" button, the map changes to show all possible matching search results on the map as markers; a list of their locations appears below the map. (If no results are found, or if any other problem occurs, the API displays a message to this effect.)

When you click on any of the results in the list, its marker on the map expands to show its details in an info box.

The Map

	Search: Around point (lon:-71.0667)/lat:42.3552 Around address ('02116, USA') Restrict searching to bounds of map Min distance: n/a 1 2 5 10 25 Max distance: n/a 1 2 5 10 25 Distance Units: miles km
Messages and results will be placed here

The Code

There are four parts to the code below. The first is the line that links to the Multimap API. The second is an example of the HTML you must have in your page. The third is an example of the JavaScript required to implement the page. Finally, the fourth is the CSS code that you should add to your web page.

The header code

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/demo"></script>

The body code

Sorry, JavaScript required...

Sorry, JavaScript required...

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

The CSS code

Sorry, JavaScript required...

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://clients.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.

Preview and Live Environments

The Multimap API allows you to upload your store data via Multimap's Client Zone extranet portal and test it in a preview environment before making the data live. To view your preview data on a web page similar to this one, specify

<script type="text/javascript" src="http://preview.multimap.com/API/maps/1.2/demo">

instead of

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/demo">

in the <HEAD> section of your web page.

For further details of your preview and live environments, please see Multimap's Client Zone documentation.