Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #18858

I have debugged this javascript but I can't understand why the row marked with * give error

Show all headers | View raw

I'm new to Google map API
This line cause error
TextualZoomControl.prototype = new google.map.GControl();
I have included the java script according to google recommendations
The error I get is runtime error in Javascript: It's not possible to get 
property GControl for a reference that is undefined or null.
But according to the google API there is an object named GControl.
I have tried with these four alternatives
   TextualZoomControl.prototype = new google.map.GControl();
   TextualZoomControl.prototype = new google.map.Control();
   TextualZoomControl.prototype = new GControl();
   TextualZoomControl.prototype = new Control();

I can't understand why it doesn't work.
Can somebody correct me about why it doesn't work ?

<!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" 
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Testing Google Maps</title>

      <script type="text/javascript"
         src="http://maps.googleapis.com/maps/api/js?sensor=false">
      </script>

    <script type="text/javascript">

        // A TextualZoomControl is a GControl that displays textual "Zoom 
In"
        // and "Zoom Out" buttons (as opposed to the iconic buttons used in
        // Google Maps).
        function TextualZoomControl() //sort of C-tor
        {
        }

*        TextualZoomControl.prototype = new google.map.GControl();

        // Creates a one DIV for each of the buttons and places them in a 
container
        // DIV which is returned as our control element. We add the control 
to
        // to the map container and return the element for the map class to
        // position properly.
        TextualZoomControl.prototype.initialize = function (map)
        {
            var container = document.createElement("div");

            var zoomInDiv = document.createElement("div");
            this.setButtonStyle_(zoomInDiv);
            container.appendChild(zoomInDiv);
            zoomInDiv.appendChild(document.createTextNode("Zoom In"));
            GEvent.addDomListener(zoomInDiv, "click", function ()
            {
                map.zoomIn();
            });

            var zoomOutDiv = document.createElement("div");
            this.setButtonStyle_(zoomOutDiv);
            container.appendChild(zoomOutDiv);
            zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
            GEvent.addDomListener(zoomOutDiv, "click", function ()
            {
                map.zoomOut();
            });

            map.getContainer().appendChild(container);
            return container;
        }

        // By default, the control will appear in the top left corner of the
        // map with 7 pixels of padding.
        TextualZoomControl.prototype.getDefaultPosition = function ()
        {
            return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
        }

        // Sets the proper CSS for the given button element.
        TextualZoomControl.prototype.setButtonStyle_ = function (button)
        {
            button.style.textDecoration = "underline";
            button.style.color = "#0000cc";
            button.style.backgroundColor = "white";
            button.style.font = "small Arial";
            button.style.border = "1px solid black";
            button.style.padding = "2px";
            button.style.marginBottom = "3px";
            button.style.textAlign = "center";
            button.style.width = "6em";
            button.style.cursor = "pointer";
        }

        function initialize()
        {
            if (GBrowserIsCompatible())
            {
              //  map = new 
google.maps.Map2(document.getElementById("map"));
                var map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(37.441944, -122.141944), 13);
                map.addControl(new TextualZoomControl());
            }
        }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html> 

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

I have debugged this javascript but I can't understand why the row marked with * give error "Tony" <tony.johansson@inport.com> - 2013-03-13 12:10 +0100
  Re: I have debugged this javascript but I can't understand why the row marked with * give error Stefan Weiss <krewecherl@gmail.com> - 2013-03-13 12:52 +0100

csiph-web