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 Build an Interactive Website Google Maps Integration Adding a Dynamic Map

Stefan Osorio
Stefan Osorio
16,419 Points

Set the "theMap" to a new google.maps namespaced "Map" object with the parameters of "mapElement" and "mapOptions"

Hi! With the attached code, the challenge complains about Task 2 no longer passing. Why?

It works perfectly fine in the browser...

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <style type="text/css">
    body, html {
        margin:0;
        padding:0;
    }
    body, html, #map {
        width:100%;
        height:100%;
    }
    </style>
</head>
<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 = document.getElementById("map");
    var theMap  = new google.maps.Map(mapElement, mapOptions);

    </script>
</body>
</html> 

3 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

Hi there,

I've opened an issue with our devs.

Can we collate all information on Browser AND Operating system - here?

If you can take a screencast of you copying and pasting the code and going through the code challenge failing that would help too.

Sorry for the inconvenience.

Regards Andrew

James Best
James Best
11,112 Points

I am having the same issue. Working on both windows 7 and mac both on Chrome.

I am having this same issue, and my code looks just like the screenshot.

As soon as I change this line:

var theMap;

to this line:

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

..then part 2 of the challenge is no longer passing!

I finally found this post:

https://teamtreehouse.com/forum/need-help-on-jquery-google-map-part-77

that identified the issue and had the code that worked! :thumbsup: