Extending the Mapquest example code not work

MDN Learn
#1

Hi, I’m learning this part: Extending the Mapquest example

Below is my code, but it doesn’t work on my Google Cloud.

<html>
  <head>
    <meta charset="utf-8">
    <title>Mapquest example</title>
    <style>
      #map {
        width: 600px;
        height: 600px;
      }
    </style>
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
    <script>
      // 1. The basic part of the example
      var L;

      window.onload = function() {
        L.mapquest.key = 'rOOoTYOyk6jq7VyQkvuoHCXhV1Ac3iPh';
		
				L.marker([53.480759, -2.242631], {
		  icon: L.mapquest.icons.marker({
			primaryColor: '#22407F',
			secondaryColor: '#3B5998',
			shadow: true,
			size: 'md',
			symbol: 'A'
		  })
		})
		.bindPopup('This is Manchester!')
		.addTo(map);
		
		map.addControl(L.mapquest.control());
		
        // 'map' refers to a <div> element with the ID map
        var map = L.mapquest.map('map', {
          center: [53.480759, -2.242631],
          layers: L.mapquest.tileLayer('hybrid'),
          zoom: 12
        });
      }
    </script>
  </head>
  <body>
    <h1>Simple Mapquest example</h1>

    <div id="map"></div>
  </body>
</html>

This is Chrome browser screenshot

11
11.png635×506 5.13 KB

#2

You’ve got this nearly right; you need to put the following stuff below the var map block, but still inside the onload handler:

       L.mapquest.key = 'rOOoTYOyk6jq7VyQkvuoHCXhV1Ac3iPh';
		
				L.marker([53.480759, -2.242631], {
		  icon: L.mapquest.icons.marker({
			primaryColor: '#22407F',
			secondaryColor: '#3B5998',
			shadow: true,
			size: 'md',
			symbol: 'A'
		  })
		})
		.bindPopup('This is Manchester!')
		.addTo(map);
		
		map.addControl(L.mapquest.control());

You need to create the map first before you can do other stuff to it.

After doing this, I still get a “XML Parsing Error: no element found” error in the console, which is not present in my version. Maybe you could compare yours to mine and see if there are any other differences? (https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html)

#3

Tank you very much!
I think your should put the finished version below this section.

#4

This is a good idea, thanks! I’ve added a link to the finished source code at the bottom of the section.