POIs and InfoWindows

  /*An example using the MQA.Poi constructor.  You will need to pass in an object containing 
    the lat (Latitude) and lng (Longitude) property defining where to place the POI 
    on the map.*/
  var basic=new MQA.Poi( {lat:39.743943, lng:-105.020089} );
  
  /*The MQA.Poi.setBias function will offset the icon marking the spot with the actual spot.  
    When setting a bias, a leader line will automatically be drawn from the POI to the offsetting 
    icon to show the relationship. */
  basic.setBias({x:-50,y:-50});
  
  /*This will add the POI to the map in the map's default shape collection.*/
  map.addShape(basic);

  /*An example using the MQA.Poi constructor.  You will need to pass in an object containing the
    lat (Latitude) and lng (Longitude) property defining where to place the POI on the map.*/
  var custom=new MQA.Poi( {lat:39.743943, lng:-105.020089} );
  
  /*The MQA.Poi.setBias function will offset the icon marking the spot with the actual spot.  
    When setting a bias, a leader line will automatically be drawn from the POI to the offsetting 
    icon to show the relationship.*/
  custom.setBias({x:-50,y:-50});
  
  /*An example using the MQA.Icon constructor.  This constructor takes a URL to an image, 
    and the image's height and width.*/
  var icon = new MQA.Icon("/sdk/js/v6.1.0/images/smiley.png",32,32);
  
  /*This line tells the POI to use the Icon object that was created rather than the default POI icon.*/
  custom.setIcon(icon);
  
  /*This will add the POI to the map in the map's default shape collection.*/
  map.addShape(custom);

  
  /*construct the POI*/
  var poi=new MQA.Poi( {lat:39.743943, lng:-105.020089} );
  poi.setBias({x:-50,y:-50});
  poi.setAltIcon(new MQA.Icon("/sdk/js/v6.1.0/images/smiley.png",32,32));
  
  /*sets the state of the POI to the alternate on mouseover*/
  MQA.EventManager.addListener(poi, 'mouseover', function(evt){
    evt.srcObject.setAltStateFlag(true);
  });
  
  /*sets the state of the POI back to the orginial state on mouseout*/
  MQA.EventManager.addListener(poi, 'mouseout', function(evt){
    evt.srcObject.setAltStateFlag(false);
  });
  
  map.addShape(poi);

  /*This uses the MQA.withModule support to download and initialize the InfoWindow support 
    module.  When the module is ready for use, the function passed as the last parameter will be executed.*/
  var info=new MQA.Poi({lat:39.743943, lng:-105.020089});
  
  /*The MQA.Poi.setBias function will offset the icon marking the spot with the actual spot.  When setting a 
    bias, a leader line will automatically be drawn from the POI to the offsetting icon to show the relationship.*/
  info.setBias({x:50,y:-50});
  
  /*Sets the title of the POI.  By default when the POI receives a mouseover event, a title 
    will popup with the HTML passed in to MQA.POI.InfoTitleHTML method.
  info.setInfoTitleHTML('Invesco Field');
  
  /*Sets the InfoWindow contents for the POI.  By default when the poi receives a mouseclick
    event, the InfoWindow will be displayed with the HTML passed in to MQA.POI.setInfoContentHTML method.*/
  info.setInfoContentHTML('Home of the Denver Broncos');
  
  /*This will add the POI to the map in the map's default shape collection.*/
  map.addShape(info);

  /*default title rollovers and title + content on clicks*/
  var info1=new MQA.Poi({lat:39.743943, lng:-105.020089});
  info1.setBias({x:-50, y:-50});
  info1.setInfoTitleHTML('Title: Invesco Field (info1)');
  info1.setInfoContentHTML('Content: Home of the Denver Broncos (info1)');
  map.addShape(info1);
  
  /*set content only if you want it displayed in the rollover and the click window  */
  var info2=new MQA.Poi({lat:39.743943, lng:-105.020089});
  info2.setBias({x:50,y:-50});
  info2.setInfoContentHTML('Content: Home of the Denver Broncos (info2)');
  map.addShape(info2);

  /*title only will display*/
  var info3=new MQA.Poi({lat:39.743943, lng:-105.020089});
  info3.setBias({x:50,y:50});
  info3.setInfoTitleHTML('TITLE: Invesco Field (info3)');
  map.addShape(info3);

  /*use this if you want your rollover content to be something other than the title*/
  var info4=new MQA.Poi({lat:39.743943, lng:-105.020089});
  info4.setBias({x:-50,y:50});
  info4.setInfoTitleHTML('Title: Invesco Field (info4)');
  info4.setInfoContentHTML('Content: Home of the Denver Broncos (info4)');
  info4.setRolloverContent("Rollover: Invesco Field (info4)");
  map.addShape(info4);

  /*only use rollover content if you do not want to open a window on clicks,
    similar to setting only the title*/
  var info5=new MQA.Poi({lat:39.743943, lng:-105.020089});
  info5.setRolloverContent("Rollover: Invesco Field (info5)");
  map.addShape(info5);

  
  window.poi=new MQA.Poi({lat:39.743943, lng:-105.020089});
  poi.setBias({x:50,y:-50});
  poi.setInfoTitleHTML('Invesco Field');
  poi.setInfoContentHTML('Home of the Denver Broncos');
  map.addShape(poi);
  poi.toggleInfoWindow();

    var poi=new MQA.Poi({lat:39.743943, lng:-105.020089});
    poi.setBias({x:50,y:-50});
    poi.setInfoTitleHTML('Invesco Field');
    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)
  }

	
  //this module isn't included with the base download so we need to load it prior to the first use on the page
MQA.withModule('htmlpoi', function() {
   
  /*construct an instance*/
  var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
  
  /*MQA.HtmlPois will have their upper left corner placed with the lat/lng provided in the 
    constructor. Use the xOffset & yOffset to reposition. The final argument 'mqa_htmlpoi' 
    is the default className for MQA.HtmlPois.
    ('valid HTML for your POI', xOffset, yOffset, 'CSS classNamne for div')*/
  poi.setHtml('Invesco Field', 0, 0, 'mqa_htmlpoi');
  
  /*sets InfoWindow title and contents as described above*/
  poi.setInfoTitleHTML('Invesco Field');
  poi.setInfoContentHTML('Home of the Denver Broncos');
  
  /*adds the POI to the map*/
  map.addShape(poi);

});