Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Code Challenge: Adding a Dynamic Map

Task - 6/7 Instructions: Set the "mapElement" using the native "document" object and the method "getElementById" and pass in the id for the "map" Everything I have done appears to be correct according to the Google API, and the lesson video, but for some reason the quiz will not pass the code. Cannot figure out what is going on, I have tried everything from adding an initializing function (even though the quiz never asks for it) to rearranging and deleting the variables at the end. Am I missing something stupid here, or is the quiz not validating properly?

<body> <div id="map"></div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false"></script>

<script type="text/javascript">
    var mapOptions = {
        center: new google.maps.LatLng(28.42, -81.58),
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
  };

 var mapElement = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    var theMap;
</script>

</body>

12 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

Great job Luis. Now you know that you can't select an element that appears after the script code!

Remember mistakes make memories, thus making you better! (And I would know I make plenty) :)

Brian Goldstein
Brian Goldstein
19,419 Points

<div id="map"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false"></script>

<script type="text/javascript">

    var mapOptions = {
    center: new google.maps.LatLng(28.42, -81.58),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

    var mapElement=document.getElementById("map");
    var theMap = new google.maps.Map(mapOptions);

</script>
          </div>

When I include mapElement in the line with var theMap etc, it invalidates step 2. If I omit it, it's null. What's going on?

Brian Goldstein
Brian Goldstein
19,419 Points

Luis's fix is what worked. How moronic do I feel? I'll let you guess.

For some reason the quiz wants the #map found in a different way than it is explained in the video:

var mapElement = document.getElementById("map");
Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

Hi Riley,

We're just separating the one line in the video over two lines in two steps in the code challenge.

mapElement is the selected DOM element whereas theMap is comparable to the map in the video.

Regards, Andrew

Hey Riley! :D I've flagged the Teaching team in on this. We'll have an answer for you shortly.

Oh! Also...

"For some reason the quiz wants the #map found in a different way than it is explained in the video"

Yeah, you'll notice that happens a lot! :) The reason for this is the Code Challenges/Quizzes are only testing you on what you learned throughout the course. BUT - if you notice anything out of the ordinary get in touch with us! :)

Yeah, once I realized what was going on I breezed through the rest of that and the next code challenge. Maybe on that question in particular make it a bit clearer how it is being split up? I was technically writing 'passing' code and the map was updating on the preview, which is probably what added to the confusion

Luis Deternoz
Luis Deternoz
8,439 Points

Hi Andrew,

I don't quite understand what I have to do?

I'm trying this but isn't working:

var mapElement = document.getElementById("map");

var theMap = new google.maps.Map(mapElement, mapOptions);

Luis Deternoz
Luis Deternoz
8,439 Points

fixed!!, I wrote the div under the tag script bummer!! hahaha

Some reason this isn't working for me..

<script type="text/javascript">
    var mapOptions = {
    center: new google.maps.LatLng(28.42, -81.58),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var mapElement = document.getElementById("map");
        var theMap;


</script>

Joey, put that line of code after the div with the ID of map.

Matthew Murray
Matthew Murray
8,488 Points

Can anyone point me to where the div goes? I've tried every possible variant possible...

<body>

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false"></script>

<script type="text/javascript">

    var mapOptions = {
    center: new google.maps.LatLng(28.42, -81.58),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
          };

    var mapElement = document.getElementId("map");
    var theMap;

</script>

<div ID="map"> </div> </body>

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Before the scripts.

The DIVs need to be in the document before the scripts are executed.

Matthew Murray
Matthew Murray
8,488 Points

Hi Andrew,

Thanks for the reply. Can you check the code below? The 'mapelement' part won't verify. I think it is related to the div, but I'm not sure. I put the <div id="map> opening tag right under the body tag and I put the closing div tag right before the closing body tag.

</style> </head> <body> <div id="map"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false"></script>

<script type="text/javascript">
    var mapOptions = {
    center: new google.maps.LatLng(28.42, -81.58),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    zoom: 18,
  };

    var mapElement= document.getElementId("map");
    var theMap;
</script>

</div> </body> </html>

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hello Matthew Murray,

getElementId Should be getElementById :)

That should help you overcome your hurdle.

Regards
Andrew

Matthew Murray
Matthew Murray
8,488 Points

Hi Andrew,

Thanks for that.

Argh!!!

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Having a second pair of eyes can be useful :)