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 Martin Murphy
Martin Murphy
3,110 Points

Adding a Dynamic Map

Hello everyone I have been following the building an interactive website and I am stuck on adding the dynamic map to my site.. I have followed the video perfectly or as far as I can tell. I am adding the relevant code and css but nothing is appearing. I don't know if someone might be able to give me a few tips on where I am going wrong.

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

    $(document).ready(function(){
        $("#form").prepend('<div id="map-canvas"></div>');
        $(".static-map").remove();

        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        initialize();
    });

#map-canvas {
    width: 100%;
    max-height: 300px;
    margin: 0 0 4% 0;
}

Thanks in advance.

Martin

3 Answers

Martin Murphy
Martin Murphy
3,110 Points
Martin Murphy
Martin Murphy
3,110 Points

bump.

Anyone able to offer me any help on this problem?

Kevin Silvestre
Kevin Silvestre
13,561 Points
Kevin Silvestre
Kevin Silvestre
13,561 Points

It never worked for me using the prepend method, so try by creating the div in the body directly.

Randy Wang
Randy Wang
9,291 Points
Randy Wang
Randy Wang
9,291 Points

Looks like first storing the map div in a variable works. No idea why...

    var mapDiv = "<div id='map'></div>";
    $("#locations").prepend(mapDiv);