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

CSS

Posted by Jacob Thomson
Jacob Thomson
757 Points

(Help please) HTML/CSS/JAVASCRIPT

I have some code that creates a google maps feature on my website, but i cannot work out how to stretch the feature across the whole width of my website. This is the code that a website generated for me.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:300px;width:600px;"><div id="gmap_canvas" style="height:300px;width:600px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://goertz-gutschein-map.com" id="get-map-data">http://goertz-gutschein-map.com</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:15,center:new google.maps.LatLng(-28.0172605,153.4256987),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-28.0172605, 153.4256987)});infowindow = new google.maps.InfoWindow({content:"<b></b><br/><br/> Gold Coast" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

1 Answer

wuworkshop
wuworkshop
3,429 Points

For some reason that code has the width set in two places to 600px. Just change the values to 100%. I've modified it below:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:300px;width:100%"><div id="gmap_canvas" style="height:300px;width:100%"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://goertz-gutschein-map.com" id="get-map-data">http://goertz-gutschein-map.com</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:15,center:new google.maps.LatLng(-28.0172605,153.4256987),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-28.0172605, 153.4256987)});infowindow = new google.maps.InfoWindow({content:"<b></b><br/><br/> Gold Coast" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
Jacob Thomson
Jacob Thomson
757 Points

Thank you so much imouto