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 Zen Hess
Zen Hess
6,700 Points

Adding Point Markers to a Map: Dynamic Map Not Showing Up.

Hey there,

I've been working through the Make an Interactive Website course, and came to the video Adding Point Markers to a Map with my page loading like it should. The dynamic map was appearing at the end of the last video, and we had pointed to its center. I followed the coding in the video at hand, and at the end only my static maps were displaying.

The only console error appearing is "Unexpected Identifier" on this line of code:

$(window).resize(function(){
    map.setCenter(center);
});

I have spent the past hour looking through the code for missing curly brackets, parenthesis, checking spelling and checking against the code I see Andrew Chalkley giving. Give it a look and point me in the right direction. Thank you!

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

<script type="text/javascript">
    $("#locations").prepend('<div id="map"></div>');
    $(".static_map").remove();

    ///Dynamic Map Won't Show Up.  Good Luck.///
    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) {
        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.GeocoderStatus.OK) 
            addMarkerToMap(results[0].geometry.location);

        google.maps.event.addDomListener(window, "load", initialize);
        google.maps.event.addDomListener(map, "idle", 
            function(){
                center = map.getCenter();
            }
        );
    }
    $(window).resize(function(){
        map.setCenter(center);
    });

</script>

Regards, Zen

2 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

First off Zen, thank you for asking the question throughly.

I see you're missing at least a ). Before the $(window). That should close up the $("address").each(. Now there's another error which I'm having difficulty tracking down - there's a missing } somewhere, or at least that's what Firefox is telling me. Can you spot it?

Zen Hess
Zen Hess
6,700 Points
Zen Hess
Zen Hess
6,700 Points

Actually, just before I received your e-mail, I was cross checking with the project files code. I had missed a }); somewhere alone the way, as well as the parentheses you caught.

It seems to be all well now. Thank you for taking a peak at it!

Cheers