?
Solved

make div tag fill the whole screen

Posted on 2008-11-13
2
Medium Priority
?
262 Views
Last Modified: 2012-05-05
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>
0
Comment
Question by:gianitoo
2 Comments
 
LVL 15

Accepted Solution

by:
MMDeveloper earned 2000 total points
ID: 22949947
missing a little css..
<div id="mapcanvas" style="position: absolute, z-index: 100; width: 100%; height: 100%">map is loading...</div>
0
 
LVL 1

Author Comment

by:gianitoo
ID: 22950063
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

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question