JavaScript Hooks | Documentation

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, our maps can call predefined JavaScript functions when certain events occur. To utilize this functionality, follow these steps:

1. Enable JavaScript hooks
   Do this by setting js_hooks: 'yes' in the main_settings section of the mapdata.js file prior to loading the map.


2. Include one of the following JavaScript functions in your webpage

   simplemaps_worldmap_click(id)	This function is called when a state is clicked. id is the state's id.
   simplemaps_worldmap_locclick(id)	This function is called when a location is clicked. id is the location's id.
   simplemaps_worldmap_region_click(id)	This function is called when a region is clicked. id is the region's id.
   simplemaps_worldmap_over(id)	This function is called when a state is hovered over. id is the state's id.
   simplemaps_worldmap_out(id)	This function is called when a state is hovered out. id is the state's id.
   simplemaps_worldmap_locover(id)	This function is called when a location is hovered over. id is the location's id.
   simplemaps_worldmap_locout(id)	This function is called when a location is hovered out. id is the location's id.
   simplemaps_worldmap_back()	This function is called when the back arrow is clicked.
   simplemaps_worldmap_complete()	This function is called after the map has finished loading.
   simplemaps_worldmap_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"> function simplemaps_worldmap_click(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_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.