Basic Map

Generating a Map
Events
Modules

Generating a Map

Generating a map is fairly simple. Just add the following to the head of your page (anywhere between <head> and </head>) to load the SDK and create the map.

 
<script src="http://open.mapquestapi.com/sdk/js/v6.1.0/mqa.toolkit.js"></script>

<script type="text/javascript">
	     
  /*An example of using the MQA.EventUtil to hook into the window load event and execute defined function 
    passed in as the last parameter .  You could alternatively create a plain function here and have it 
    executed whenever you like (e.g. <body onload="yourfunction">).*/
    MQA.EventUtil.observe(window, 'load', function() {
   
	
  window.map = new MQA.TileMap(       /*constructs an instance of MQA.TileMap*/
    document.getElementById('map'),   /*ID of element on the page where you want the map added*/
    7,                                /*intial zoom level of the map*/
    {lat:39.743943, lng:-105.020089}, /*center of map in latitude/longitude */
    'map');                           /*map type (map)*/
 
	  });
</script>

Add a map <div> in the body of your HTML to produce the map below.

Show me the code

Play with the code

Events

The following Event Listeners are available: movstart, move, moveend, dragstart, drag, dragend, click, doubleclick, zoomstart, zoomend, maptypechanged, mapcleard, shapeadded, shaperemoved, rolloverclose, rolloveropen, infowindowopen, infowindowclose, shapecollectionremoved, shapecollectionadded.

	
	
    /*hook up event listeners*/
	MQA.EventManager.addListener(map, 'movstart', 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, 'mapcleard', 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('Invesco Field');
		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

Remove POI

Events Fired

Show me the code

Play with the code

Modules

Throughout this user guide, you will see calls to MQA.withModule to load blocks of code not included with the default API download that provide additional functionality. For example, in order to add a control to the map you must first dynamically download the module. In order to add a control to the map, you must exercise the MQA.withModule function to initialize it prior to adding it to the map. This can be accomplished with the following code:

 
MQA.withModule('module_name', function() {
});

 
MQA.withModule('zoomcontrol3', your_defined_function);

MQA.withModule takes a minimum of 2 parameters. The first parameter is the name of the module to be dynamically loaded. The second parameter is a function that is called after the dynamic loading of the module has been completed. You may provide an inline function definition or the name of an already defined function.

You can also add multiple controls at the same time with the following. The key here is that the last parameter should be your callback function to be called when the downloading and initialization is complete.

Example of downloading multiple modules all at once:

 
MQA.withModule('module_name','another_module_name','one_more_module_name', function() {
});

Next Section: Controls