Home » Blogs » sugree's blog

How to embed Google Maps in Full-Screen

Posted September 6th, 2006 by sugree

I'm working on geographically distributed computing aka grid computing. Since there are so many resources on this planet, it would be beautiful to see them on the earth graphically. Google offers this kind of applications could be implemented in a few hours using Google Earth or Google Maps. All you need to know are pairs of latitude and longitude to identify where they are. Well, I also want to show the map in full-screen for easily navigating around the globe. In other words, it should resize itself according to browser size. Google doesn't tell me how to do it. Fortunately, I found it!

The tutorial shown me how to do it exactly what I want. But I adapted to something similar as follows.

Style

<style type='text/css'>
  v\:* {behavior:url(#default#VML);}
  html, body {width: 100%; height: 100%;}
  body {margin: 0; padding: 0; overflow: hidden;}
  #map {height: 100%; width: 100%;}
</style>

OnLoad Script

<script type="text/javascript">
//<![CDATA[

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(13.4419, 100.1419), 2, G_HYBRID_MAP);

    if (window.attachEvent) {
      window.attachEvent("onresize", function() {this.map.onResize();});
    } else {
      window.addEventListener("resize", function() {this.map.onResize();}, false);
    }
  }
}

//]]>
</script>

Body

<body onload="load()" onunload="GUnload()">
<div id="map"></div>
</body>

That's all! The magic is this.map.onResize(). If you don't want to handle resizing, just call it once on load. Let's see what I did at http://observer.thaigrid.or.th/ by navigating to General -> Geo Map or directly to Geo Map.

Tags: , , ,

Post new comment

The content of this field is kept private and will not be shown publicly.