hello everybody I'd added the "More" Wiki/Photo layers controls from Mikes demo http://econym.org.uk/gmap/example_layercontrol.htm to my existing map here http://www.xbrlplanet.org/indextest.php
The "More" layers control works perfectly except on my map http://www.xbrlplanet.org/indextest.php its obscuring the main [map| satellite|hybrid|earth] control. Am I correct that the line "return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));" sets the positioning of the [More] control on the face of the map? In which case have I used it incorrectly in my code below such that its obscuring the main [map|satellite|hybrid|earth] control.. Thanks very much (apologies for the long code) Conor ====================== <script type="text/javascript"> //<![CDATA[ var iconBlue = new GIcon(); iconBlue.image = 'http://labs.google.com/ridefinder/images/ mm_20_blue.png'; iconBlue.shadow = 'http://labs.google.com/ridefinder/images/ mm_20_shadow.png'; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = 'http://labs.google.com/ridefinder/images/ mm_20_red.png'; iconRed.shadow = 'http://labs.google.com/ridefinder/images/ mm_20_shadow.png'; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRed.infoWindowAnchor = new GPoint(5, 1); var iconWhite = new GIcon(); iconWhite.image = 'http://labs.google.com/ridefinder/images/ mm_20_white.png'; iconWhite.shadow = 'http://labs.google.com/ridefinder/images/ mm_20_shadow.png'; iconWhite.iconSize = new GSize(12, 20); iconWhite.shadowSize = new GSize(22, 20); iconWhite.iconAnchor = new GPoint(6, 20); iconWhite.infoWindowAnchor = new GPoint(5, 1); var customIcons = []; customIcons["Mandatory Filing"] = iconRed; customIcons["Voluntary Filing"] = iconBlue; customIcons["Development"] = iconWhite; // Check to see if this browser can run the Google API // ================================================== // create a tabbed marker with two tabs and set up the event and mouseover window if (GBrowserIsCompatible()) { function createTabbedMarker(point, html1, html2, html3, html4, label1, label2, label3, label4, cat) { var marker = new GMarker(point,customIcons[cat]); GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1, html1), new GInfoWindowTab(label2, html2), new GInfoWindowTab(label3, html3), new GInfoWindowTab(label4, html4)]); }); GEvent.addListener(marker,"mouseover", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1, html1), new GInfoWindowTab(label2, html2),new GInfoWindowTab(label3, html3), new GInfoWindowTab(label4, html4)]); }); return marker; } // ==== The "More..." control simply accepts a mouseover to reveal the "Layer" control === function MoreControl() {} MoreControl.prototype = new GControl(); MoreControl.prototype.initialize = function(map) { var container = document.createElement("div"); container.style.border = "2px solid black"; container.style.fontSize = "12px"; container.style.fontFamily = "Arial, sans-serif"; container.style.width="80px"; container.style.backgroundColor = "#ffffff"; container.style.textAlign = "center"; container.innerHTML = "More..."; map.getContainer().appendChild(container); GEvent.addDomListener(container, "mouseover", function() { map.addControl(layerControl); }); return container; } MoreControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7)); } // ==== The "Layer" control displays the "More..." plus the checkboxes ==== // ==== The checkbox info is passed in the "opts" parameter ==== function LayerControl(opts) { this.opts = opts; } LayerControl.prototype = new GControl(); LayerControl.prototype.initialize = function(map) { var container = document.createElement("div"); container.style.border = "2px solid black"; container.style.fontSize = "12px"; container.style.fontFamily = "Arial, sans-serif"; container.style.width="80px"; container.style.backgroundColor = "#ffffff"; container.innerHTML = '<center><b>More...<\/b><\/center>'; for (var i=0; i<this.opts.length; i++) { if (layers[i].Visible) { var c = 'checked'; } else { var c = ''; } container.innerHTML += '<input type="checkbox" onclick="toggleLayer('+i+')" ' +c+ ' /> '+this.opts[i]+'<br>'; } map.getContainer().appendChild(container); // === This doesn't do what I want. It kills the control if I mouseover a checkbox === // === If you know how to do this better, let me know === //GEvent.addDomListener(container, "mouseout", function() { // map.removeControl(layerControl); //}); setTimeout("map.removeControl(layerControl)",5000); return container; } LayerControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7)); } // ==== toggleLayer adds and removes the layers ==== function toggleLayer(i) { if (layers[i].Visible) { layers[i].hide(); } else { if(layers[i].Added) { layers[i].show(); } else { map.addOverlay(layers[i]); layers[i].Added = true; } } layers[i].Visible = !layers[i].Visible; } // ================================================== // Display the map, with some controls and set the initial location // var map = new GMap2(document.getElementById("map")); var daylight = new daylightMap.daylightLayer(); daylight.addToMap(map); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(53.424935, -7.94494), 3); map.addMapType(G_SATELLITE_3D_MAP); var mapControl = new GMapTypeControl(); map.addControl(mapControl); //add the XBRLJurisdictional overlay layer var gx = new GGeoXml("http://www.xbrlplanet.org/planet/ XBRL_Jurisdictions.kml"); map.addOverlay(gx); // retrieve xml content from php script // define the variable content that will populate the info window GDownloadUrl("planet/xbrlprojects2xml.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName ("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var iso3166 = markers[i].getAttribute("iso3166"); var country = markers[i].getAttribute("country"); var countrystatus = markers[i].getAttribute("countrystatus"); var jurisdictionurl = markers[i].getAttribute("jurisdictionurl"); var ifrsstatus = markers[i].getAttribute("ifrsstatus"); var ifrsnotes = markers[i].getAttribute("ifrsnotes"); var url = markers[i].getAttribute("url"); var wikiurl = markers[i].getAttribute("wikiurl"); var wiki = markers[i].getAttribute("wiki"); var cat = markers[i].getAttribute("cat"); var flag = "<img src=" + "images/icons/gif/" + iso3166 + ".gif" +">" ; var htmltab1 = "<div id='infowindow'>" + flag + " " + country + "<br><p> </p><b> Agency: </b>" + name + "<br> <b> Web </b> :<a href=" + url + ">" + url + "</a> <br><b> XBRL Program: </b>" + cat +" </div>" ; var htmltab2 = "<div id='infowindow'>" + flag + " " + country + "<br><p> </p><b> Country : </b>" + country + "<br><b> XBRL Affiliation : </b>" + countrystatus + "<br><b>Jurisdiction website : </ b><a href=" + jurisdictionurl + ">" + jurisdictionurl + "</a>"; var htmltab3 = "<div id='infowindow'>" + flag + " " + country + "<br><p> </p><b>IFRS :</b>" + ifrsstatus + "<br><b> Notes : </ b><a href=" + ifrsnotes + ">" + ifrsnotes + "</a>" ; var htmltab4 = "<div id='infowindow'><img src=images/ wikipediaicon.jpg><br>" + wiki + "<br><a href=" + wikiurl + "> Full Article </a></div>" ; // ================================================== // Set up the tabbed markers var point = new GLatLng(parseFloat(markers[i].getAttribute ("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createTabbedMarker(point, htmltab1 , htmltab2 , htmltab3 , htmltab4, "Agency", "XBRL", "IFRS" , "Wiki", cat ); map.addOverlay(marker); }}) } // display a warning if the browser was not compatible else { alert("Sorry, the Google Maps API is not compatible with this browser"); } // ==== Create the GLayer()s, and set them Visible=false Added=false ==== // If you want a GLayer open by default, addOverlay() it and set it Visible=true Added=true var layers = []; layers[0] = new GLayer("org.wikipedia.en"); layers[0].Visible = false; layers[0].Added = false; layers[1] = new GLayer("com.panoramio.all"); layers[1].Visible = false; layers[1].Added = false; // === Create the layerControl, but don't addControl() it === // = Pass it an array of names for the checkboxes = var layerControl = new LayerControl(["Wiki", "Photos"]); // === Create the MoreControl(), and do addControl() it === map.addControl(new MoreControl()); // This Javascript is based on code provided by the // Blackpool Community Church Javascript Team // http://www.commchurch.freeserve.co.uk/ // http://econym.googlepages.com/index.htm //]]> </script> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/Google-Maps-API?hl=en -~----------~----~----~----~------~----~------~--~---
