mark110384 Posted July 9, 2008 Share Posted July 9, 2008 I have the following sample coding, all I'm looking to do is change the buttons from text as they are now into an image. Does anyone have any suggestions of how this could be done, thanks in advance. <head> <title>Google Maps</title> <script src="http://maps.google.com/maps?file=api&***My Key***" type="text/javascript"></script> <script src="yslider2.js" type="text/javascript"></script> </head> <body onunload="GUnload()"> <div id="map" style="width: 512px; height: 512px"></div> <a href="yslider.htm">Back to the tutorial page</a> <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript> <script type="text/javascript"> //<![CDATA[ // A TextualZoomControl is a GControl that displays textual "Zoom In" // and "Zoom Out" buttons (as opposed to the iconic buttons used in // Google Maps). // We define the function first function TextualZoomControl() { } // To "subclass" the GControl, we set the prototype object to // an instance of the GControl object TextualZoomControl.prototype = new 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"; //button.style.background = "<img src='http://localhost/example/maps/zoomin.png'"; } var map = new GMap2(document.getElementById("map")); map.addControl(new YSliderControl()); map.addControl(new TextualZoomControl()); map.setCenter(new GLatLng(53.098145, -2.443696),6); //]]> </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
mark110384 Posted July 9, 2008 Author Share Posted July 9, 2008 I've got it to show the image but it won't work, but when I take the image off you can hit the area where the image was and it now works var zoomOutDiv = document.createElement("div"); zoomOutDiv.style.width="25px"; zoomOutDiv.style.height="25px"; if (this.ie) { var loader = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zoomin.png', sizingMethod='scale');"; this.zoomOutDiv = document.createElement("div"); this.zoomOutDiv.style.height="25px"; this.zoomOutDiv.style.width="25px"; this.zoomOutDiv.style.filter=loader; this.zoomOutDiv.style.cursor = "pointer"; } else { this.zoomOutDiv = document.createElement("img"); this.zoomOutDiv.src = "zoomin.png"; this.zoomOutDiv.height = "25"; this.zoomOutDiv.width = "25"; this.zoomOutDiv.style.cursor = "pointer"; } container.appendChild(this.zoomOutDiv); GEvent.addDomListener(zoomOutDiv, "click", function() { map.zoomOut(); }); map.getContainer().appendChild(container); return container; } Quote Link to comment Share on other sites More sharing options...
mark110384 Posted July 9, 2008 Author Share Posted July 9, 2008 Figured it out I was missing the following line zoomOutDiv.appendChild(this.zoomOutDiv); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.