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

Stefan Osorio
Stefan Osorio
16,419 Points
Posted by 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
Andrew Chalkley
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
James Best
James Best
11,112 Points

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

james white
james white
78,399 Points
james white
james white
78,399 Points

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: