Events

Listed below are the events made available in the JavaScript Maps API. 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.

 

Map Events

The following Event Listeners are available for MQA.TileMap: movestart, move, moveend, dragstart, drag, dragend, click, doubleclick, zoomstart, zoomend, maptypechanged, mapcleared, shapeadded, shaperemoved, rolloverclose, rolloveropen, infowindowopen, infowindowclose, shapecollectionremoved, shapecollectionadded.

  /*Hook up event listeners*/ 
  MQA.EventManager.addListener(map, 'movestart', eventRaised);
  MQA.EventManager.addListener(map, 'move', eventRaised);
  MQA.EventManager.addListener(map, 'moveend', eventRaised);
  MQA.EventManager.addListener(map, 'dragstart', eventRaised);
  MQA.EventManager.addListener(map, 'drag', eventRaised);
  MQA.EventManager.addListener(map, 'dragend', eventRaised);
  MQA.EventManager.addListener(map, 'click', eventRaised);
  MQA.EventManager.addListener(map, 'doubleclick', eventRaised);
  MQA.EventManager.addListener(map, 'zoomstart', eventRaised);
  MQA.EventManager.addListener(map, 'zoomend', eventRaised);
  MQA.EventManager.addListener(map, 'maptypechanged', eventRaised);
  MQA.EventManager.addListener(map, 'mapcleared', eventRaised);
  MQA.EventManager.addListener(map, 'shapeadded', eventRaised);
  MQA.EventManager.addListener(map, 'shaperemoved', eventRaised);
  MQA.EventManager.addListener(map, 'rolloverclose', eventRaised);
  MQA.EventManager.addListener(map, 'rolloveropen', eventRaised);
  MQA.EventManager.addListener(map, 'infowindowopen', eventRaised);
  MQA.EventManager.addListener(map, 'infowindowclose', eventRaised);
  MQA.EventManager.addListener(map, 'shapecollectionremoved', eventRaised);
  MQA.EventManager.addListener(map, 'shapecollectionadded', eventRaised); 

  /*Write out events to events div to help visualize*/ 
  function eventRaised(evt){
    var e=document.createElement('div');
    e.innerHTML=evt.eventName;
    var eDiv=document.getElementById('showEvents');
    eDiv.insertBefore(e, eDiv.firstChild)
  }

  function buildPoi(){
    var poi=new MQA.Poi({lat:39.743943, lng:-105.020089});
    poi.setInfoTitleHTML('Sports Authority Field at Mile High');
    poi.setInfoContentHTML('Home of the Denver Broncos');
    return poi;
  }

  function addPoi(){
    map.addShape(buildPoi());
  }

  function addShapeCollection(){
    var sc=new MQA.ShapeCollection();
    sc.add(buildPoi());
    map.addShapeCollection(sc);
  }
 

 

Add Poi | Remove All Shapes | Add Shape Collection

Zoom Out | Zoom In

Aerial | Hybrid | Street

Clear Events

Events Fired

 

 

 

 

Points (POIs) & InfoWindow Events

The following Event Listeners are available for MQA.Poi and MQA.HtmlPoi: mouseup, mousedown, mouseover, mouseout, click, dblclick, removed (when POI is removed from map), rolloveropen, rolloverclose, infowindowopen, infowindowclose, infowindowmouseoverstate, infowindowmouseoutstate.

  var poi=new MQA.Poi({lat:39.743943, lng:-105.020089});
  poi.setBias({x:50,y:-50});
  poi.setRolloverContent('Sports Authority Field at Mile High');
  poi.setInfoContentHTML('Home of the Denver Broncos');

  map.addShape(poi);

  MQA.EventManager.addListener(poi, 'mousedown', eventRaised);
  MQA.EventManager.addListener(poi, 'mouseup', eventRaised);
  MQA.EventManager.addListener(poi, 'mouseover', eventRaised);
  MQA.EventManager.addListener(poi, 'mouseout', eventRaised);
  MQA.EventManager.addListener(poi, 'dblclick', eventRaised);
  MQA.EventManager.addListener(poi, 'click', eventRaised);
  MQA.EventManager.addListener(poi, 'removed', eventRaised);
  MQA.EventManager.addListener(poi, 'rolloveropen', eventRaised);
  MQA.EventManager.addListener(poi, 'rolloverclose', eventRaised);
  MQA.EventManager.addListener(poi, 'infowindowopen', eventRaised);
  MQA.EventManager.addListener(poi, 'infowindowclose', eventRaised);
  MQA.EventManager.addListener(poi, 'infowindowmouseoverstate', eventRaised);
  MQA.EventManager.addListener(poi, 'infowindowmouseoutstate', eventRaised);

  /*Write out events to events div*/ 
  function eventRaised(evt){
    var e=document.createElement('div');
    e.innerHTML=evt.eventName;
    var eDiv=document.getElementById('eventsFired');
    eDiv.insertBefore(e, eDiv.firstChild);
  }
 

 

Remove POI

Events Fired

 

 

 

 

Overlay Events

The following Event Listeners are available for MQA.RectangleOverlay, MQA.Circleoverlay, MQA.PolygonOverlay, and other overlays: mouseup, mousedown, mouseover, mouseout, click, dblclick, mousemove and remove (when shape is removed from map).

  /*This uses the MQA.withModule support to download and initialize the shape support module. 
  When the modules are ready for use, the function provided as the last parameter will be executed.*/ 

  MQA.withModule('shapes', function() {
	
    var rectangle = new MQA.RectangleOverlay();
    rectangle.setShapePoints([39.847136, -105.362437, 39.641389, -104.682833]);
    map.addShape(rectangle);

    /*Register event listeners*/ 
    MQA.EventManager.addListener(rectangle, 'mousedown', eventRaised);
    MQA.EventManager.addListener(rectangle, 'mouseup', eventRaised);
    MQA.EventManager.addListener(rectangle, 'mouseover', eventRaised);
    MQA.EventManager.addListener(rectangle, 'mouseout', eventRaised);
    MQA.EventManager.addListener(rectangle, 'dblclick', eventRaised);
    MQA.EventManager.addListener(rectangle, 'click', eventRaised);
    MQA.EventManager.addListener(rectangle, 'removed', eventRaised);
    MQA.EventManager.addListener(rectangle, 'mousemove', eventRaised);

    /*Write out events to events div*/ 
    function eventRaised(evt){
      var e=document.createElement('div');
      e.innerHTML=evt.eventName;
      var eDiv=document.getElementById('overlayEvents');
      eDiv.insertBefore(e, eDiv.firstChild);

      /*Cancels events from proprogating up*/ 
      MQA.EventUtil.stop(evt.domEvent);
    }

  });
 

 

Remove Shape

Events Fired