JavaScript Hooks | Documentation

Note: There are major changes to the API starting with version 3.0+. The old 2.9 docs are here.

HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 Congress Map

Often, it is useful to execute JavaScript in response to activity in the map. For example, maybe you'd like to display additional information when a state is clicked. Or, you'd like to highlight the name of city when it is hovered over in the map. To make such interactivity possible, you can redefine predefined JavaScript functions that will be triggered when certain events occur. Here is how to utilize this functionality.

Define one of the following variables as a JavaScript function:

simplemaps_worldmap.hooks.click_state(id)	This function is called when a state is clicked for the terminal time. id is the state's id.
simplemaps_worldmap.hooks.zoomable_click_state(id)	This function is called when a state that is zoomable is clicked prior to zooming. id is the state's id.
simplemaps_worldmap.hooks.click_region(id)	This function is called when a region is clicked for the terminal time. id is the region's id.
simplemaps_worldmap.hooks.zoomable_click_region(id)	This function is called when a region that is zoomable is clicked prior to zooming. id is the region's id.
simplemaps_worldmap.hooks.click_location(id)	This function is called when a location is clicked. id is the location's id.
simplemaps_worldmap.hooks.over_state(id)	This function is called when a state is hovered over. id is the state's id.
simplemaps_worldmap.hooks.out_state(id)	This function is called when a state is hovered out. id is the state's id.
simplemaps_worldmap.hooks.over_region(id)	This function is called when a region is hovered over. id is the region's id.
simplemaps_worldmap.hooks.out_region(id)	This function is called when a region is hovered out. id is the region's id.
simplemaps_worldmap.hooks.over_location(id)	This function is called when a location is hovered over. id is the location's id.
simplemaps_worldmap.hooks.out_location(id)	This function is called when a location is hovered out. id is the location's id.
simplemaps_worldmap.hooks.close_popup()	This function is called when the map is in on_click mode and a popup is closed
simplemaps_worldmap.hooks.back()	This function is called when the back arrow is clicked.
simplemaps_worldmap.hooks.complete()	This function is called after the map has finished loading.
simplemaps_worldmap.hooks.zooming_complete()	This function is called after a zooming action has finished. Use this to make sure the map is done zooming before you change and refresh the map.

For example, you'd add the following code to your webpage to show a JavaScript alert of a state's name when it is clicked: <script type="text/javascript"> simplemaps_worldmap.hooks.click_state=function(id){ alert(simplemaps_worldmap_mapdata.state_specific[id].name); } </script>

Alternative: JavaScript can be included in a state, location, or region's url parameter
This is an alternative to using simplemaps_worldmap.hooks.state_click(id). For example, the following in your mapdata.js file:

US: { name: 'United States', description: 'default', url: "javascript:alert('You clicked the US')" },
will create an alert when the United States is clicked.