Demo

LocationBox JavaScript Demos

Event Listeners

Start:

Instructions

Use the "Start" button to activate event listeners on map. Click on the map, pan the map, zoom in/zoom out from the map and see the event listeners in action.
See the JavaScript API for more information.

Source Code

The Javascript code for the above map is:

 <script language="Javascript" 
    src="http://www.locationbox.com.tr/locationbox/services?Key=key&Cmd=APIV2
    &Typ=JS"></script>
    
  <script language="JavaScript">
  var mapper  = new IMapper();
  function startup() {
	mapper.initMap(41.1, 29.1, 6);
	mapper.addNavigationPanel();
	return;
  }
  
    function setMapListeners() { 
    mapper.setMapListener("mouse_click", mouseClick);
    mapper.setMapListener("mouse_right_click", mouseRightClick);
    mapper.setMapListener("recenter", recenter);
    mapper.setMapListener("before_zoom_level_change", beforeZoom);
    mapper.setMapListener("zoom_level_change", zoom);
    return;
  }
    
  function mouseClick() {
    var pos = mapper.getMapClickPosition();
    var locStr = 'mouse location:' + pos.x + ', ' + pos.y;
    alert("you clicked at: " + locStr);
    return;
  }
  
  function mouseRightClick() {
    var pos = mapper.getMapClickPosition();
    var locStr = 'mouse location:' + pos.x + ', ' + pos.y;
    alert("you right clicked at: " + locStr);
    return;
  }
  
  function recenter() {
    alert("map recenter event fired");
    return;
  }       
 
  function beforeZoom(evt) {
    alert("before_zoom_level_change event fired:"+evt.beforeZoomLevel+"->"+evt.afterZoomLevel);
    return;
  }

  function zoom(evt) {
    alert("zoom_level_change event fired:"+evt.beforeZoomLevel+"->"+evt.afterZoomLevel);
    return;
  }  
  
  </script>

Button:

  <a href="javascript:setMapListeners()"><img src="images/add.gif" border=0></a>
Download working page
Remember that you need to use your key code as Key attribute.