JavaScript - Google Map V3 Problem In Spry Tabbed Panels
I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container.
( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly). I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding [CODE] google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); }); after var map = new google.maps.Map(document.getElementById(canvas), myOptions); [CODE] This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested: Re-centrering the map around the marker [CODE] google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); [CODE] Zooming in and out again to trigger the resize: [CODE] map.setZoom( map.getZoom() ); [CODE] Or using this to do the same thing: [CODE] this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1); [CODE] Suggested for use if there are multiple markers: [CODE] map.setZoom(map.getZoom()); map.fitBounds(bounds); [CODE] I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help! Similar TutorialsHi there! I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem: I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong. First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me. When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly. My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); rs_ProfAbility.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_ProfAbility.gallery) { return row; } return null; } rs_ProfAbility.filter(chooseSet); [CODE] This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help! Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he www.iotheatre.com/GoldenAgeAbilities.php -Chris Blockus Hi, I am having problem in validating my form using spry tools. The problem is that if I try to include any other validation other than spry along with spry validation the spry validation does not work. Plzz tell a possible solution I am using the following code to rotate my banner 3 times. I am trying to get it to order. Ive set it up so that you can choose yes/no drop down as to whether you wnat a panel to show and I have also set it up with a drop down so you can specify 1,2,3. I want to be able to randomly change the order to say 2, 1, 3 it dosent seem to work with what I have below. Any suggestions? Code: <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); $(".ui-tabs-panel > a").hover( function() { $("#featured").tabs("rotate",0,true); }, function() { $("#featured").tabs("rotate",5000,true); } ); <div id="featured" > --------------------------------------------------------- <% String sCount=""; String stitle = ""; String iPanels = ""; String sShowPanels = ""; String sContent=""; %> <ul class="ui-tabs-nav"> <% for(int i=1;i<7;i++){ sCount="" + i; stitle = "stitle"; stitle= stitle + i; iPanels = "iPanels"; iPanels = iPanels + i; sShowPanels = "sShowPanels"; sShowPanels = sShowPanels + i; //out.print(requestItem.getFieldValue(iPanels) + "=" + sCount); if(requestItem.getFieldValue(iPanels).equals(sCount)){ if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")){ if(requestItem.getFieldValue(stitle)!=null && requestItem.getFieldValue(stitle).length() >2){ %> <li class="ui-tabs-nav-item" id="nav-fragment-<%=i%>"><a href="#fragment-<%=i%>"> <%=requestItem.getFieldValue(stitle)%> </a></li> <% } } } } %> </ul> <% for(int i=1;i<7;i++){ sCount="" + i; stitle = "stitle"; stitle= stitle + i; iPanels = "iPanels"; iPanels = iPanels + i; sShowPanels = "sShowPanels"; sShowPanels = sShowPanels + i; sContent = "sContent"; sContent= sContent + i; if(requestItem.getFieldValue(iPanels).equals(sCount)) { if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")) { if(requestItem.getFieldValue(sContent)!=null && requestItem.getFieldValue(sContent).length() >2) { %> <div id="fragment-<%=i%>" class="ui-tabs-panel ui-tabs-hide" style=""> <%=requestItem.getFieldValue(sContent)%> </div> <% } } } } %> </div> </div> <!--content--> Hello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element) { this.element = this.getElement(element); this.focusElement = null; this.hoverClass = "CollapsiblePanelTabHover"; this.openClass = "CollapsiblePanelOpen"; this.closedClass = "CollapsiblePanelClosed"; this.focusedClass = "CollapsiblePanelFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.animator = null; this.hasFocus = false; this.contentIsOpen = false; }; Many thanks Liam Hola! I'll give you a little background before I ask you guys my question! I have a Header, a rectangle of 800x100 and directly below that I have Spry Collabsible panels stacked on top of each other with my menu items 'Home' 'About us' etc. My question is... does anyone know of a way I could vertically center everything on the page, so that when the panels are closed it is nicely in the centre and when you open one, the header moves up to allow room for the content and the whole thing stays vertically centered on the page. I'm guessing this will need some kind of fancy javascript to make possible. Thanks in advance for any advice you can give! Adam http://www.mainstudio.com/ Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically? Also, to include the functionality of having content inside each panel load only after its clicked. Hi all I have created a website http://www.clickmunki.com with a jQuery vertical panel that collapses and expands in the top left of each page. In my offline code (which I have not yet uploaded to the live site) I have set the panels to display by default so the user automatically has the information available to them on each page as they scroll through the site. My problem is that the panels are not behaving independently of each other. When one panel is collapsed then they all collapse instead of just the one that the user has clicked. This is my first attempt at using javascript and jQuery and I am not sure how to resolve this. Any assistance would be very much appreciated. This is my js: Code: $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); <! panel is for the panel on the home page --> $(this).toggleClass("active"); return false; }); $(document).ready(function(){ $(".trigger").click(function(){ $(".panel2").toggle("fast"); <! panel2 is for the panels in the body of the site --> $(this).toggleClass("active"); return false; }); Kind regards Anne Hello everyone! I've searched a lot of places for a script like this and found nothing. Here's my situation. My site uses a main iframe that changes as you click links. However, Google links to all my pages, I only want it to access a few (because some pages are only meant to be viewed via iframe). I'm looking for a JavaScript that will detect if the page is being viewed in an iframe, if it is, it should take no action, but if it's no, it should redirect to a different page. Is this possible??? i want to add a not-filled circle at the center of the map and fix it there even user drag and move the map. I tried to add a absolute position div that contain the circle image on the map but obviously it cant do any interaction with the map when clicingk or dragging inside area of the circle because it is just a div but not a part or overlay of the map. then i tried to add a custom overlay on the map, and set the div appended in panes with fixed left and top value, but it seems not work .... so guys, any suggestion? Hey I was hoping someone could help me. I have written a form in HTML. But it is very long - I would like to make it a Tabbed form so that at the top there is tabs for each section to make it more managable and less intimidating. I figured it was probably Javascript - but I don't know JS so I was wondering what I would have to do for that form to be made? Is there a predefined function or something or does anyone know how to code a form like that? Regards, Angelous hi all,, actually i used ajax api script.the problem is, the code works well in mozilla and other browser but in IE the dropdown list not showing.. its showing the error google/default+en.I.js line114 (c.g) object not defined.. the code is <script type="text/javascript" src="js/jquery.js"></script> <script src="js/jquery.translate-1.3.7.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function($){ //when DOM is ready $.translate(function(){ //when the Google Language API is loaded function translateTo( destLang ){ //this can be declared in the global scope too if you need it somewhere else $('body').translate( 'english', destLang, { //translate from english to the selected language not: '.jq-translate-ui, .header', //by default the generated element has this className fromOriginal:true //always translate from english (even after the page has been translated) }); } $.translate.ui('select', 'option') .appendTo('#aj') //insert the element to the page .change(function(){ //when selecting another language translateTo( $(this).val() ); return false; //prevent default browser action }); }); }); </script> <div id="aj"></div> Hi All, I'm new to JS, and I'm trying to make google books previewed on my website. It works fine but if the book(ISBN) is not available for previewing, which only gives me nothing on the page What I need is it give me a alert, or some echos,which tells something like "this book is not available for Previewing" when the ISBN is not found. Here is my code used on a php, and also a JS with the link. http://www.google.com/jsapi Quote: <script type="text/javascript" src="js/jsapi.js"></script> <script type="text/javascript"> google.load("books", "0", {"language" : "es-ES"}); function initialize() { var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas')); viewer.load('ISBN:<?php echo $ISBN; ?>'); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="viewerCanvas" style="width: 600px; height: 700px"></div> </body> Hi This is what I would like to do: 1. Create a tabbed interface 2. All tabs but one must be able to be closed by clicking a link 3. User must be able to add additional tabs I want this to be done in Javascript but I have no clue how to program in javascipt and tutorials I have seen do not go in to great detail since they just show you basics that a Kindergarten kid could use. Please help Thanks Hi guys, I want to make a website and instead of having individual pages for each page, I would like it all to be on one page. I want to use jQuery to switch between the different tabs but I also need it to be able to stay on that certain tab when the page is reloaded. I also need to be able to link to the certain tabs which I think would be accomplished by using ID tags. If anyone can help, that would be great.
Hi, I have this search module at the top and bottom of my web page Here is the mark-up for the same HEADER SEARCH MODULE Code: <div id="searches"> <ul id="topTabSet"> <li class="current" id="web-top"><a href="javascript:;">Web</a></li> <li id="blog-top"><a href="javascript:;">Blog</a></li> <li id="image-top"><a href="javascript:;">Images</a></li> <li id="video-top"><a href="javascript:;">Video</a></li> <li id="product-top"><a href="javascript:;">Products</a></li> </ul> <form name="topSearchForm" id="topSearchForm" method="GET"> <fieldset> <label for="web-search">Enter search terms</label> <input style="display: none;" name="invocationType" value="" type="hidden" /> <input name="query" id="webSearch-top" type="text" /> <input id="submit" name="tSearchSubmit" class="submit" value="" alt="Search" type="submit" /> </fieldset> </form> </div> FOOTER SEARCH MODULE Code: <div id="searchesFt"> <ul id="bottomTabSet"> <li class="current" id="web-bottom"><a href="javascript:;">Web</a></li> <li id="blog-bottom"><a href="javascript:;">Blog</a></li> <li id="image-bottom"><a href="javascript:;">Images</a></li> <li id="video-bottom"><a href="javascript:;">Video</a></li> <li id="product-bottom"><a href="javascript:;">Products</a></li> </ul> <form id="bottomSearchForm" name="bottomSearchForm" method="GET"> <fieldset> <label for="web-search">Enter search terms</label> <input style="display: none;" name="invocationType" value="" type="hidden" /> <input name="query" id="webSearch-bottom" type="text" /> <input id="submit" name="bSearchSubmit" class="submit" value="" alt="Search" type="submit" /> </fieldset> </form> </div> I had written written a JS which is all junk. I could manage to get tab stay selected when i click on it. I am not even in a position to post it here Here is what I am looking for: 1) all the tabs open the search in a new window/tab on submit/click except for the "Blog" tab which opens the search within the same page 2) The search should be directed to different URLs based on the tab selection. i.e. web = http://www.testexample.com/web/?q="Entered search term"&invocationType="testinv" blog = /search/?q="Entered search term"&invocationType="testinv" images = http://www.testimages.com/image/?q="Entered search term"&invocationType="testinv" video = http://www.testvideos.com/video/?q="Entered search term"&invocationType="testinv" products = http://www.testproducts.com/product/?q="Entered search term"&invocationType="testinv" 3) an the above is for the header search and footer search modules. Could someone please please help me with some code to achieve this. I know I am asking for too much. But I am helpless. please help me. Thanks Hi All, I am trying to create a website and am having problems editing a piece of code. A working example can be seen Here The only problem is that the "pages" are open when a user arrives on the site and I want them to be " closed" until a user clicks them, much like the "Search, Profile & Draw" tabs. I have included all the coding used to this, the only thing I haven't included are the images. Anyone got any idea how this is possible? Regards Jake Hi folks, My website is located he http://maps.peachtree-city.org My search functions point to a mysql database and has been working since June 2008. All of sudden, and I credit my boss to this, it has become dysfunctional with a reoccuring error noted by Firefox: Syntax Error: 0Query was empty. I have a php within the server which pulls from my map file to call upon mysql: From the map.html Code: function submitAddress() { var address = document.getElementById('address').value; var searchUrl = 'http://maps.peachtree-city.org/google/parcelpin_genxml2.php?address=' + address; GDownloadUrl(searchUrl, function(data) { var xml = GXml.parse(data); var markers = xml.getElementsByTagName('marker'); if (markers.length == 0) { alert('Sorry, no Address matches found. Remember to check your spelling and format.'); return; } var address1 = markers[0].getAttribute('address') var point = new GLatLng(parseFloat(markers[0].getAttribute('lat')), parseFloat(markers[0].getAttribute('lng'))); if (point && ge != null) { var la = ge.createLookAt(''); la.set(point.y, point.x, 100, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 500); placemark.setName(address); var point1 = ge.createPoint(address1); point1.setLatitude(point.y); point1.setLongitude(point.x); placemark.setGeometry(point1); ge.getView().setAbstractView(la); } }); } The form from map.html Code: <center><p style="font-family:arial narrow" "color=green" size="1">Search <strong>Address</strong> Example: 1232 S Hwy 74</font></p></center> <form name='searchform2' id='searchform2' action="javascript:void(0);"> <input type=text size=21 id='address' ></input> <input type=submit button style="background-color:orange" value='Search Address' onClick='javascript:submitAddress();'> <input type=reset button style="background-color:orange" value='Clear Form'> </form> <br> The searchURL (parcelpin_genxml2.php) Code: <?php require ("phpsql_dbinfo.php"); function parseToXML($htmlStr) { $xmlStr=str_replace('<','<',$htmlStr); $xmlStr=str_replace('>','>',$xmlStr); $xmlStr=str_replace('"','"',$xmlStr); $xmlStr=str_replace("'",''',$xmlStr); $xmlStr=str_replace("&",'&',$xmlStr); return $xmlStr; } // Opens a connection to a mySQL server $connection=mysql_connect (localhost, $user, $password); if (!$connection) { die('Not connected : ' . mysql_error()); } // Set the active mySQL database $db_selected = mysql_select_db('geocode', $connection); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); } // Select all the rows in the markers table $query = ""; if ($address != null) { $tok = strtok($address, " "); $count = 0; $query = "SELECT * FROM address WHERE "; while ($tok !== false) { if ($count > 0) { $query = $query." and "; } $query = $query." address like '%$tok%'"; $tok = strtok(" "); $count = $count + 1; } } else if ($parcelpin != null) { $query = "SELECT * FROM parcel WHERE parcelpin='$parcelpin'"; } $result = mysql_query($query); if (!$result) { die("Invalid query " + $query . mysql_error()); } header("Content-type: text/xml"); // Start XML file, echo parent node echo '<markers>'; // Iterate through the rows, printing XML nodes for each while ($row = @mysql_fetch_assoc($result)){ // ADD TO XML DOCUMENT NODE echo '<marker '; if ($address != null) { echo 'address="' . $row['address'] . '" '; } else if ($parcelpin != null) { echo 'parcelpin="' . $row['parcelpin'] . '" '; } echo 'lat="' . $row['lat'] . '" '; echo 'lng="' . $row['lng'] . '" '; echo '/>'; } // End XML file echo '</markers>'; mysql_close(); ?> I am at a complete lost why the error. Boss says he didn't touch anything but I noticed he did add another table to mysql which led me finding out he also tried installing a CMS , SugarCMS. Upon research on this, I found some mentions of SugarCMS contributing to errors on other mysql databases. I need to display a receipt, open the print dialog and then go back to another form. My code is as follows at the bottom of the page: Code: <script type='text/javascript'> window.print(); window.location="newlocation"; </script> It works prefect in firefox, but not in chrome. In Chrome it just redirects and never waits for the print dialog. I need it to wait until the user can click print or cancel. If I take out the window.location line it brings up the print dialog (but I want it to redirect afterwards). Thanks to anyone who can help! Hello, I had this working in v2, but I'm migrating to v3 and I'm having some trouble with my sidebar. I think it might be variable scope problem, but I can't find the answer. I have a form which appends entries to an xml file, and my map script imports the xml to create markers and infowindows (all working). Functions to close the infowindow and recenter the map all work as well. It should also display a clickable sidebar with the names of the markers as links. It displays a side bar, but I only get one line which says 'undefined'. Here is my code: Code: var infowindow = new google.maps.InfoWindow(); var map = new google.maps.Map(); var side_bar_html = ""; var gmarkers = []; var shortname; var marker; function initialize() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","rp4.xml",false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; var markers = xmlDoc.getElementsByTagName("marker"); var point = new google.maps.LatLng(40.8068620, -96.6816790); var myOptions = { /* center: new google.maps.LatLng(40.8068620, -96.6816790), */ center: point, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP, /* mapTypeControl: True, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} */ }; // create the map map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); function bindInfoWindow(marker, map, infowindow, nfo) { google.maps.event.addListener(marker, 'click', function() { infowindow.close(); infowindow.setContent(nfo); infowindow.open(map, marker); map.panTo(marker.getPosition()); // map.setCenter(new google.maps.LatLng(lat,lng); map.setCenter(marker.getPosition()); }); } // document.getElementById("side_bar").innerHTML = side_bar_html; for (var i = 0;i<markers.length;i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); point = new google.maps.LatLng(lat,lng); shortname = markers[i].getAttribute("company"); var company = markers[i].getElementsByTagName("company")[0].firstChild.nodeValue; var contact = markers[i].getElementsByTagName("contact")[0].firstChild.nodeValue; var str = markers[i].getElementsByTagName("str")[0].firstChild.nodeValue; var city = markers[i].getElementsByTagName("city")[0].firstChild.nodeValue; var phone = markers[i].getElementsByTagName("phone")[0].firstChild.nodeValue; var email = markers[i].getElementsByTagName("email")[0].firstChild.nodeValue; var web = markers[i].getElementsByTagName("web")[0].firstChild.nodeValue; var nfo = "<h1>"+company+"</h1>"+ "<p><b>"+company+"</b><br />"+ contact+"<br />"+ str+"<br />"+ city+"<br />"+ phone+"<br />"+ "<a href='mailto:"+email+"'>"+email+"</a></p>"+ "<a href='http://"+web+"'>"+web+"</a>"; marker = new google.maps.Marker({ position: point, map: map, title: company, clickable: true, }); marker.setMap(map); bindInfoWindow(marker, map, infowindow, nfo); } document.getElementById("side_bar").innerHTML = side_bar_html; } function myclick(k) { google.maps.event.trigger(gmarkers[k], "click"); // save the info we need to use later for the side_bar gmarkers.push(marker); // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + shortname + '<\/a><br>'; return marker; } Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var geocoder; var loc; geocoder = new google.maps.Geocoder(); var input = "32.83036,34.974339" var latlngStr = input.split(",",2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { loc = results[1].formatted_address; }); </script> I need to use that var ("loc") in another place in my code, after the function finished running. |