Points (POIs) and InfoWindows

Points of Interest, commonly referred to as POIs, are specific locations that someone may find useful or interesting. In mapping applications, POIs and InfoWindows are usually paired to visually show locations and location detail.

This page covers the creation and stylization of the POI objects and InfoWindows. If you're interested in adding a group of POIs, GeoRSS or KML files to a map, see the Collections and KML and GeoRSS pages. Similarly, if you're interested in searching for POIs from MapQuest's hosted data or your own custom data tables and adding them to the map, see the Search page.

 

Basic POI

POI support is built into the basic API download. To place a POI on a map, use the following code where map is a reference to MQA.TileMap.

 

 

 

 

Custom POI

In addition to the provided POI icon, it is possible to use custom images instead.

 

 

 

 

POI Alternate States

You can set an alternate state for a POI under certain conditions. The following example alternates the POI based on the mouseover and mouseout events by changing the icon used. All of the customizable attributes of a POI can have an alt state set by using the setAltPropertyName convention (e.g. setAltIcon is the alternate for setIcon). The MQA.Poi.setAltState(true||false) can be called directly -- no event is needed to use this functionality.

 

 

 

 

POI Decluttering

You can automate the decluttering of POIs when multiple locations are plotted in the same spot or close to one another.

 

 

 

 

InfoWindow

InfoWindows are the tooltips that pop up when the POI receives a mouseover event (default). Notice the difference between the mouseover and click actions on this POI as opposed to the example above.

Support of InfoWindows are included in the basic API download.

 

 

 

 

InfoWindow Configuration Options

You can configure InfoWindows in several ways and the below sample will give you an idea of its capabilities. To learn more about customizing the look and feel of your mapping application, visit the Customizing the User Interface page.

 

 

 

 

Manual InfoWindow Toggling

You can toggle an InfoWindow using the MQA.Poi.toggleInfoWindow() and MQA.toggleInfoWindowRollover() functions.

 

 

Toggle InfoWindow | Toggle InfoWindow Rollover

 

 

HTML POI

HTML POIs are essentially regular POIs except there are no icons and you are required to provide the HTML for the content. These are ideal for labeling and when simply changing the icon is not sufficient for your needs.

 

 

 

 

Events

As seen in the samples above, the addListener() event handler is used to listen for an event on the source object and call a custom function when the specified event occurs. Visit the Events page for a complete list of available Event Listeners.