Basic Map

Generating a map

Generating a map is fairly simple, add the following code to the head of your page (anywhere between <head> and </head>). 

   1  
   2   <script src="http://platform.beta.mapquest.com/api/js/mqa.toolkit.js?key=YOUR_KEY_GOES_HERE"></script>    
   3   <script type="text/javascript">
   4    MQA.EventUtil.observe(window, 'load', function() {
   5  	
   6    window.map = new MQA.TileMap(
   7      document.getElementById('map'),
   8      7,
   9      {lat:39.743943, lng:-105.020089}, 
  10      'map');
  11  
  12    });
  13  </script>
  14

Line 4: 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 when ever you like (e.g. <body onload="yourfunction>").

Line 5: Constructs an instance of MQA.TileMap with 4 parameters on the separated out on the following lines for readability.

Line 6: The div you want the map to reside in on the page.

Line 7: The default zoom level the map should be initialized with. Numeric values 1-16 are valid.

Line 8: Center point of the map, an object containing properties for lat (latitude) and lng (longitude). Alternatively you could pass an MQA.LatLng object also.

Line 9: The default map type. map=street map, sat=aerial map, hyb=combination of street map and aerial

The above code will produce the following basic map.

Run this example stand-alone

Learn how to add controls to this basic map