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

Posted by Andrew Chappell
Andrew Chappell
12,782 Points

Adding info Windows to Google Maps makes map dissapear

Hello, I'm up to the video tutorial on adding info windows to google maps and when I add the code it makes the javascript map disappear and replaces it with the static map. I've search my code line by line but I can't see the problem. 

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

                $(".static_map").remove();

                var map;
                var bounds;
                var geocoder;
                var center;
                function initialize() {
                    var mapOptions = {
                        center: new google.maps.LatLng(-34.397, 150.644),
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    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").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.text());
                    })
                })

                google.maps.event.addDomListener(map, "idle", function(){
                    center = map.getCenter();
                });
                $(window).resize(function(){
                    map.setCenter(center);
                })
                </script>