Sample Code - Google Maps

A modified version of "Hello, World" example from Google Maps API documentation is given below as a simple example. Modifications are shown in bold.

<!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>

    <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&amp;key=abcdefg"
            type="text/javascript"></script>
    <script src="path/gwindow.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="path/gwindow.css" />
    <script type="text/javascript">

    //<![CDATA[

    var map;
    function load() {
      var gwin = new GWindow(null,"Map Window");
      gwin.setAnchor(document.getElementById("map"));
      gwin.dock(true);
      gwin.setSize(gwin.getWidth(GWindow.DOCKED),gwin.getHeight(GWindow.DOCKED),GWindow.UNDOCKED);
      gwin.onBodyResize = function(w,h,is_resizing) {
        if (map && !is_resizing) map.checkResize();
      }
	    
      if (GBrowserIsCompatible()) {
        map = new GMap2(gwin.getBodyElement());
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px; border:1px solid #000"></div>
  </body>
</html>

Here is the result.

How do modifications work?

1. First two rows of the modifications include JavaScript file and style sheet of GWindow. Remark: 'path' in the src and href terms should be replaced with the actual path of the files.

2. We make the definition of map variable global, so that it can be accessed by onBodyResize callback of GWindow.

3. GWindow is created using GWindow constructor. First parameter is the container HTML element of the GWindow, and the second parameter is the title that is shown in titlebar. If the first parameter is null, body element of the HTML page becomes the container, i.e when you undock the window, it moves inside body element.

4. We set the anchor, on which the window will dock, and...

5. Dock the window.

6. We set the size of the window in undocked state to the one in docked state (which is equal to the size of the anchor in this case)

7. By overwriting onBodyResize callback of the window, we make sure that the map gets updated if the window is resized. onBodyResize callback is evoked by the system if the internal body element of the window is resized. It has three parameters: width, height, and a boolean parameter (is_resizing) that shows whether the user is currently resizing the window by using mouse or not. Since it is required to update the map only at the end of the resizing operation, we check this status variable and make the update accordingly.

8. We create the map by setting container to the body element of the window.

Thats all!

• API Reference
• Documentation
• Examples

Sample Code - Google Maps

How do modifications work?

Related Pages