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.

HTML Build an Interactive Website Google Maps Integration Adding a Dynamic Map

Daan Hage
Daan Hage
13,318 Points

I should have the correct code, but i'm afraid the api key is no more valid and I cant finish this code challenge.

I shoul be the correct code

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> 

1 Answer

Will Berlanga
Will Berlanga
18,825 Points

If you're concerned the api key is no longer valid, renew it on the Google Maps api page (https://developers.google.com/maps/documentation/javascript/tutorial#api_key).

Daan Hage
Daan Hage
13,318 Points

I accessed it, but i still returns the error "Null"