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

Adding static maps

I'm having trouble with showing my maps in both videos please help.

here is the code:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> <script src="external/matchmedia.js"></script> <script src="picturefill.js"></script> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no"> </head>

<body>

<div class="container clearfix">
    <div id="logo" class="grid_4">
        <object data="img/logo.svg" type="image/svg+xml" class="logo">
            <a href="logo.svg" >
                <!--[if lte IE 8 ]-->
                <img src="img/logo.gif" alt="Smells Like Bakin">
                <!--![endif]-->
            </a>
        </object>

    </div>
    <div id="nav" class="grid_8 omega" >
        <ul>
            <li class="about"><a href="#">About</a></li>
            <li class="pricing"><a href="pricing.html">Cupcakes & Prices</a></li>
            <li class="locations"><a href="locations.html">Locations</a></li>
            <li class="contact"><a href="contact.html">Contact Us</a></li>
        </ul>
    </div>

    <div class="grid_12">
        <h1 class="hero">We're kicking taste buds in to high gear from the west to the east coast with our featured avacodo chocolate cupcake.</h1>
    </div>

    <div id="locations" class="grid_12">

        </div>

        <div class="grid_6">
            <h2>Orlando Store</h2>
            <p>Local: <span class="contact">407-555-5555</span><br>Toll Free: <span class="contact">1-800-CUP-CAKE</span><br>
                Email us: <a href="#">bakeon@smellslikebakin.com</a></p>

                <p class="grid_6">
               <img src="http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyAfOmb_J9ML-UXGkfQ1frx2fX-c7cleRl4 &sensor=false&size=400x300&markers=622+E+Washington+Street,+Suite+240,+Orlando,+FL+32801" alt="622 E Washington Street, Suite 240, Orlando, FL 32801"></p>
                <address>
                    622 E Washington Street, Suite 240<br>Orlando, FL 32801
                </address>
            </div>
            <div class="grid_6 omega">
                <h2>Portland Store</h2>
                <p>Local: <span class="contact">503-555-5555</span><br>Toll Free: <span class="contact">1-800-CUP-CAKE</span><br>
                    Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
                    <p class="grid_6">
                    <img src="http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY
                size=400x300&sensor=false&markers=70+Northwest+Couch+Street+Portland,+Oregon+97209"
                alt="70 Northwest Couch StreetPortland, Oregon 97209">
                </p>
                </p>
                    <address>
                        70 Northwest Couch Street<br>Portland, Oregon 97209
                    </address>
                </div>
            </div>


            <div id="footer" class="grid_12">
                <div id="about" class="grid_7">
                    <h2>Inside the Kitchen</h2>
                    <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
                    <p><a href="#" class="btn-small">Read More</a></p>
                </div>


                <div id="contact" class="grid_5 omega">
                    <h2>Get Bakin’ with Us</h2>
                    <p>Call us: <span>1-800-CUP-CAKE</span><br>
                        Email us: <a href="#">bakeon@smellslikebakin.com</a></p>

                        <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>     

                        <object data="img/facebook.svg" type="image/svg+xml">
                            <a href="facebook.svg">
                                <!--[if lte IE 8 ]-->
                                <img src="img/facebook.gif" alt="Facebook">
                                <!--![endif]-->
                            </a>
                        </object>

                        <object data="img/twitter.svg" type="image/svg+xml">
                            <a href="twitter.svg">
                                <!--[if lte IE 8 ]-->
                                <img src="img/twitter.gif" alt="Twitter">
                                <!--![endif]-->
                            </a>
                        </object>
                    </div>

                    <div id="copyright" class="grid_12">
                        <p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
                    </div>

                </div>

            </div>

            <script type="text/javascript" src="js/jquery.js"></script>
             <script type="text/javascript">

      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY&sensor=false">     </script> <script type="text/javascript"> $(".static_map").remove(); $("#locations").prepend('<div id="map"></div>')

            var map;
            var center;
            function initialize() {

        var mapOptions = {           center: new google.maps.LatLng(-34.397, 150.644),           zoom: 8         };         map = new google.maps.Map(document.getElementById("map"),             mapOptions);       }

            initialize();
            google.maps.event.addDomlistener(map, "idle", function () {
                center = map.getCenter();
                });

                $(widow),resize(function () {
                    map.setCenter(center);
                    });
            </script>
        </body>
        </html>
Chris Scott
Chris Scott
7,673 Points

Can you fix your post the code block is broken.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> <script src="external/matchmedia.js"></script> <script src="picturefill.js"></script> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no"> </head>

<body>

<div class="container clearfix">
    <div id="logo" class="grid_4">
        <object data="img/logo.svg" type="image/svg+xml" class="logo">
            <a href="logo.svg" >
                <!--[if lte IE 8 ]-->
                <img src="img/logo.gif" alt="Smells Like Bakin">
                <!--![endif]-->
            </a>
        </object>

    </div>
    <div id="nav" class="grid_8 omega" >
        <ul>
            <li class="about"><a href="#">About</a></li>
            <li class="pricing"><a href="pricing.html">Cupcakes & Prices</a></li>
            <li class="locations"><a href="locations.html">Locations</a></li>
            <li class="contact"><a href="contact.html">Contact Us</a></li>
        </ul>
    </div>

    <div class="grid_12">
        <h1 class="hero">We're kicking taste buds in to high gear from the west to the east coast with our featured avacodo chocolate cupcake.</h1>
    </div>

    <div id="locations" class="grid_12">

        </div>

        <div class="grid_6">
            <h2>Orlando Store</h2>
            <p>Local: <span class="contact">407-555-5555</span><br>Toll Free: <span class="contact">1-800-CUP-CAKE</span><br>
                Email us: <a href="#">bakeon@smellslikebakin.com</a></p>

                <p class="grid_6">
               <img src="http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyAfOmb_J9ML-UXGkfQ1frx2fX-c7cleRl4 &sensor=false&size=400x300&markers=622+E+Washington+Street,+Suite+240,+Orlando,+FL+32801" alt="622 E Washington Street, Suite 240, Orlando, FL 32801"></p>
                <address>
                    622 E Washington Street, Suite 240<br>Orlando, FL 32801
                </address>
            </div>
            <div class="grid_6 omega">
                <h2>Portland Store</h2>
                <p>Local: <span class="contact">503-555-5555</span><br>Toll Free: <span class="contact">1-800-CUP-CAKE</span><br>
                    Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
                    <p class="grid_6">
                    <img src="http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY
                size=400x300&sensor=false&markers=70+Northwest+Couch+Street+Portland,+Oregon+97209"
                alt="70 Northwest Couch StreetPortland, Oregon 97209">
                </p>
                </p>
                    <address>
                        70 Northwest Couch Street<br>Portland, Oregon 97209
                    </address>
                </div>
            </div>


            <div id="footer" class="grid_12">
                <div id="about" class="grid_7">
                    <h2>Inside the Kitchen</h2>
                    <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
                    <p><a href="#" class="btn-small">Read More</a></p>
                </div>


                <div id="contact" class="grid_5 omega">
                    <h2>Get Bakin’ with Us</h2>
                    <p>Call us: <span>1-800-CUP-CAKE</span><br>
                        Email us: <a href="#">bakeon@smellslikebakin.com</a></p>

                        <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>     

                        <object data="img/facebook.svg" type="image/svg+xml">
                            <a href="facebook.svg">
                                <!--[if lte IE 8 ]-->
                                <img src="img/facebook.gif" alt="Facebook">
                                <!--![endif]-->
                            </a>
                        </object>

                        <object data="img/twitter.svg" type="image/svg+xml">
                            <a href="twitter.svg">
                                <!--[if lte IE 8 ]-->
                                <img src="img/twitter.gif" alt="Twitter">
                                <!--![endif]-->
                            </a>
                        </object>
                    </div>

                    <div id="copyright" class="grid_12">
                        <p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
                    </div>

                </div>

            </div>

            <script type="text/javascript" src="js/jquery.js"></script>
             <script type="text/javascript">

      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfOmb_J9ML-UXGkfQ1frx2fX-c7cleRl4&sensor=false">     </script> <script type="text/javascript"> $(".static_map").remove(); $("#locations").prepend('<div id="map"></div>')

            var map;
            var bounds;
            var geocoder;
            var center;
            function initialize() {

        var mapOptions = {           center: new google.maps.LatLng(-34.397, 150.644),           zoom: 8         };         map = new google.maps.Map(document.getElementById("map"),             mapOptions);       }

        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds();

        function addMarkToMap(location) {
            var marker = new google.maps.Marker({ map: map, position: location});
            bounds.extend(location);
            map.fitBounds(bounds);
            }

            initialize();
            $("address").each(function () {
                var $address = $(this);
                geocoder.geocode({address; $address.text}),function (results, status) {
                    if(status == google.maps.GeocodeStatus.Ok)
                    addMarkerToMap(result [0].geometry.location);
                    }
                }
            google.maps.event.addDomlistener(map, "idle", function () {
                center = map.getCenter();
                });

                $(widow),resize(function () {
                    map.setCenter(center);
                    });
            </script>
        </body>
        </html>

3 Answers

Chris Scott
Chris Scott
7,673 Points

Your code is fine, drop the keys from the url string as anything below 640x640 is free or it will try to process it as a business tier key which is then rejected for being free.

For future reference when working with an API and something breaks check the docs.

When you say drop the keys do you mean this line of code key=AIzaSyAn8fk75K8kCdW6pQ4B7yoBHJNrUbleieY or am i having a miss understanding

Thanks that worked! but why would it work without the api key I thought that was the main thing that made it work?

Chris Scott
Chris Scott
7,673 Points

By removing the key your using the free version. But if you'd like to try and get your own key working go to https://cloud.google.com/, sign in and on left side you see'll a menu go to "APIs & Auth > APIs "and check to see if you have "Static Maps API" = ON and then double check your key.