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

Fixing info windows and google maps

I cant get the map to show my code is the same as the video someone please help!

Here is the code for Locations: <!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 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="static_map">
                    <img src="http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&markers=622+E+Washington+Street,+Suite+240,+Orlando,+FL+32801"
                alt="70 Northwest Couch StreetPortland, Oregon 97209">
                </p>
                </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="static_map">
                    <img src="http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&markers=70+Northwest+Couch+StreetPortland,+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">
            $("#locations").prepend('<iframe id="map" src="map.html" seamless="seamless" scrolling="no"></iframe>');
            $(".static_map").remove();

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

Here is the code for map:

<!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfOmb_J9ML-UXGkfQ1frx2fX-c7cleRl4&sensor=false"> </script> <title>Map</title> <script type="text/css"> html, body, #map { width: 100%; height: 100%; } </script>

</head> <body> <div id=map></div> <script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript"> var map; var center; var bounds; var geocoder;

                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 addMarkerToMap(location, address) {
            var image = "img/baby-cupcake.png";
            var marker = new google.maps.Marker({ map: map, position: location, icon: image});
            bounds.extend(location);
            map.fitBounds(bounds);
            var infoWindow = new google.maps.InfoWindow({content: address})
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.open(map, marker);
                })
            }

            initialize();
            $("address", parent.window.document).each(function () {
                var $address = $(this);
                geocoder.geocode({address: $address.text()},function (results, status) {
                    if(status == google.maps.GeocoderStatus.OK) addMarkerToMap(results [0].geometry.location, $address.html());
                    })
                });
            google.maps.event.addDomListener(map, 'idle', function(){
                center = map.getCenter();
                });
                $(widow).resize(function () {
                    map.setCenter(center);
                    });

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

1 Answer

When using static maps (http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&markers=70+Northwest+Couch+StreetPortland,+Oregon+97209") you need to include your API key via ...api/staticmap?key=[%KEY%]&sensor=false&...".

You don't need the key for the map generated with JavaScript as of v.3 of the Google Maps API. I understand Andrew Chalkley uses it in the video, but I believe that was made for use with v.2 of the API.

In the addMarkerToMap function it looks like you are missing a closing bracket before where you call the initialize() function. Currently, I believe, that call and the code following is inside the function.

There is also a semi-colon (;) missing at the end of var infoWindow = new google.maps.InfoWindow({content: address}).

When using local styles and scripts, inside an HTML document as opposed externally linking files, ensure you are using the appropriate <style> and <script> tags.