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
Caroline Rawson
2,174 PointsJQuery 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Jason Anello
Courses Plus Student 94,610 PointsHi 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
2,174 PointsHi 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
2,174 PointsAh, 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! :-)
Jason Anello
Courses Plus Student 94,610 PointsYou'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.