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

Caroline Rawson
Caroline Rawson
2,174 Points

JQuery Google Maps Integration challenge 6/7

The question is: Set the "mapElement" using the native "document" object and the method "getElementById" and pass in the id for the "map"

My code is:

  <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>
  <div id="map">
  </div>

I can't for the life of me see what's wrong with it, but I'm getting the following error:

Bummer! You need to call 'getElementById' on 'document' and pass in 'map'. Set the variable 'mapElement' with the result of this method call.

I thought this was exactly what I had done! Clearly not, but I can't see the error. I've gone back and looked at the video over and over but I can't see the difference between that and what I've done.

If anyone has any pointers I'd be very grateful :-)

4 Answers

Hi Caroline,

Move your map div before the two scripts. So it should be right after the opening body tag.

I saw that you put it at the end in your first post but didn't realize it would cause a problem.

My guess is that when the script is reached it is executed immediatiely. At that point in time it can't find the map id because it's farther down the page. Maybe it's only able to search upward because farther down hasn' t been processed yet.

Hopefully someone more knowledgeable on this can give you a better answer.

In general, when you get to building a real web page you will mostly put all of your scripts right before the closing body tag with all of your content markup above those scripts.

Hi Caroline,

You're doing too much for task 6.

They only want you to select the map element and assign that to the mapElement variable. var mapElement = document.getElementById("map");

Caroline Rawson
Caroline Rawson
2,174 Points

Hi Jason,

Thanks for your answer. I see what you mean and your answer makes sense to me. However when I try this, I still get the same error: "Bummer! You need to call 'getElementById' on 'document' and pass in 'map'. Set the variable 'mapElement' with the result of this method call."

My code now looks like this:

  <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>
  <div id="map">
  </div>

Any further ideas?

thanks

Caroline Rawson
Caroline Rawson
2,174 Points

Ah, very good spot! Not sure what I was thinking, adding the div there. I believe you're right about why the order matters. I'm used to putting js code in a external file, referenced in the html head section, rather than mixing javascript and html in the same file, so I'd forgotten about the order being important.

Thanks again! :-)

You're welcome.

Even if you're loading scripts from an external file it's usually the recommended practice to put them before your closing body tag rather than in the head section of your document.