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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Setting the "lnglat" object for a dynamic Google map in JavaScript

        map = new google.map.Map(document.getElementById('map', mapOptions));
        center: lat: 28.42 lng: -81.58};
      }

This is my attempt so far. The challenge seems to be asking me to provide the longitude and latitude coordinates as a parameter of the mapOptions function but in what's called a namespaced google.maps,

I've tried with and without, but I keep getting the red "bummer" message.

I know the challenge has already warned us about the wrong key since Google changed the API but i wondered if that might have something to do with it?

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>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false"></script>

    <script type="text/javascript">
      var mapOptions = {

        map = new google.map.Map(document.getElementById('map', mapOptions));
        center: lat: 28.42 lng: -81.58};
      }
        var mapElement;
        var theMap;


    </script>

   <div id="map"></div>
</body>
</html>

3 Answers

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Jonathan,

I think part of the problem stays here:

center: lat: 28.42 lng: -81.58

I don't think that is good for defining the center of the map, try instead:

center: new google.maps.LatLng(28.42,-81.58)

Let me know if that helps

;)

Vittorio

Aimee Ault
Aimee Ault
29,193 Points

Ah yep, that is needed too, probably why the code in my answer might give problems if you're on a further step of the challenge!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Yes it worked :D

Thanks for this. It definitely wasn't taught that way in the video but I guess we were supposed to see "lnglat" and look at the documentation for ourselves.

Thanks Vittorio and Aimee for trying. :-)

Aimee Ault
Aimee Ault
29,193 Points
Aimee Ault
Aimee Ault
29,193 Points

I think the problem might be that you're defining map inside of your mapOptions variable :) It needs to be separately defined, probably after mapOptions since it references it.

Edit: Also, it's google.maps.Map.

And be sure to include your #map div :)

   <div id="map"></div>
    <script type="text/javascript">
        var mapOptions = {};
        var map = new google.maps.Map(document.getElementById('map', mapOptions));
        var mapElement;
        var theMap;
    </script>
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

That's certainly the way it works in Andrew's video walk through but the challenge is stubborn and seems to want me to go back to task one to fix everything. :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Nope... It doesn't wanna play lol

   <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false"></script>

    <script type="text/javascript">
      var mapOptions = {center: lat: 28.42, lng: -81.58};    
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var mapElement;
        var theMap;


    </script>

And I do get the popup every minute or so, I'm assuming that's just something we've got to live with. :-)

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Np Jonathan. I have enjoyed the map course!

Still I think that this question would better go under javascript rather than html if you want to edit it...

Just in case someone gets here in future (not sure if it came out automatically when posting your question).

good luck!

Vittorio

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

You're definitely right about that, should be in Javascript. :\ I generated this post from the challenge page and I thought it put it straight in the Javascript tag. How Odd.

Edit - changed, thanks for the heads up. :)