asked on

make div tag fill the whole screen

Trying to fill the whole page no matter the resolution. is it possible?
i have tried leaving the height empty and i did not see my content at all inside div tag.

<div id="mapcanvas" style=" min-height: 600px">map is loading...</div>

ASKER CERTIFIED SOLUTION

MMDeveloper

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gianitoo

ASKER

Ok it works but when i click on my marker the page goes blank???

http://woodmizer.com/us/googlemap/map2.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <link href="wm.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
   <script src="http://maps.google.com/maps?file=api&amp;v=2.s&amp;key=ABQIAAAAbwJabFd6eJPl1SfdK1ZihRRVlmfycm9FMBvMuIwDGAN1MUn6ihSsco4yVBVbX8BJtfwxt8mypLXPyA" 
   type="text/javascript"></script>
      
    <script type="text/javascript">
 
        //<![CDATA[
 
        function load() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("mapcanvas"));
                // map.addControl(new GSmallMapControl());
                map.setCenter(new GLatLng(39.953845, -86.278370), 3);
                map.addControl(new GMapTypeControl());
                map.addControl(new GLargeMapControl());
               //map.enableScrollWheelZoom();
               map.enableContinuousZoom();  
                
               // new GKeyboardHandler(map);
               // map.enableScrollWheelZoom();
                //map.enableContinuousZoom();  
                // Create our "tiny" marker icon
                var icon = new GIcon();
                icon.image = "Pushpin2.png";
                icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                icon.iconSize = new GSize(16, 26);
                icon.shadowSize = new GSize(22, 20);
                icon.iconAnchor = new GPoint(6, 20);
                icon.infoWindowAnchor = new GPoint(5, 1);
 
                function createMarker(point, i, html, exist, addr1, addr2, name, city, state, zip, phone, contact, addr) {
                    addr = escape(addr);
                    addr2 = escape(addr2);
                   // name = escape(name);
                    city = escape(city);
                    state = escape(state);
 
                    var marker;
                    if (exist) marker = new GMarker(point, icon);
                    else marker = new GMarker(point);
                    GEvent.addListener(
            marker, "click", function() { marker.openInfoWindowHtml('<span class=titleboldorange>' + name + '</span><br>' + '<b>Contact:</b> ' + contact + '<br>' + '<b>Address:</b> ' + addr1 + '<br>' + '<b>City:</b> ' + city + '<br>' + '<b>State:</b> ' + state + '<br>' + '<b>Zip:</b> ' + zip + '<br>' + '<b>Phone:</b> ' + phone + '<br>' + '<a target=_blank href=http://maps.google.com/maps?q=' + addr + '>Directions</a>'); }
          );
                    return marker;
                }
 
//                function createMarker(point, i, html, exist, addr1, addr2, name, city, state, zip, phone,contact) {
//                    var marker;
//                    if (exist) marker = new GMarker(point, icon);
//                    else marker = new GMarker(point);
//                    GEvent.addListener(
//            marker, "click", function() { marker.openInfoWindowHtml('<H2>' + name + '</H2>' + '<b>Contact:</b> ' + contact + '<br>' + '<b>Address:</b> ' + addr1 + '<br>' + '<b>City:</b> ' + city + '<br>' + '<b>State:</b> ' + state + '<br>' + '<b>Zip:</b> ' + zip + '<br>' + '<b>Phone:</b> ' + phone + '<br>' + '<a target=_blank href=http://maps.google.com/maps?q=' + addr1 + '>Directions</a>'); }
//          );
//                    return marker;
//                }
 
            
                GDownloadUrl("xml.aspx", function(data) {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
                        var html = markers[i].getAttribute("label");
                        var name = markers[i].getAttribute("name");
                        var exist = markers[i].getAttribute("exist");
                        var addr = markers[i].getAttribute("addr1") +' ,'+ markers[i].getAttribute("city")+' '+ markers[i].getAttribute("state");
                        var addr1 = markers[i].getAttribute("addr1");
                        var addr2 = markers[i].getAttribute("addr2");
                        var city = markers[i].getAttribute("city");
                        var state = markers[i].getAttribute("state");
                        var zip = markers[i].getAttribute("zip");
                        var contact = markers[i].getAttribute("contact");
                        var phone = markers[i].getAttribute("phone");
                        map.addOverlay(createMarker(point, i, html, exist,addr1,addr2,name,city,state,zip,phone,contact,addr));
                    }
                }
            );
            }
        }
 
        //]]>
    </script>
 
 
</head>
<body onload="load()" onunload="GUnload()">
   <form runat="server">
  <div id="mapcanvas" style="position: absolute; z-index: 100; width: 100%; height: 100%">map is loading...</div>
   
   </form>
    </body>
</html>

Open in new window