Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

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
Andrew Chalkley
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
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
Brian Goldstein
Brian Goldstein
19,419 Points

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

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

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
Andrew Chalkley
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

ecp
ecp
838 Points
ecp
ecp
838 Points

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! :)

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

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
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
Luis Deternoz
Luis Deternoz
8,439 Points

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

Unsubscribed User
Unsubscribed User
30 Points
Unsubscribed User
Unsubscribed User
30 Points

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>
Sarn P
Sarn P
23,793 Points
Sarn P
Sarn P
23,793 Points

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

Matthew Murray
Matthew Murray
8,488 Points
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
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
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
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
Matthew Murray
Matthew Murray
8,488 Points

Hi Andrew,

Thanks for that.

Argh!!!

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Having a second pair of eyes can be useful :)