Google Maps API 3 inside jQuery Accordion

I am working on a web page that utilizes multiple JS libraries including jQuery and Google Maps. My map is inside a jQuery Accordion pane, and has been presenting a problem with partial rendering as described on a StackOverflow topic. In my case, the code was configured to initialize the map at the time of the first click on the accordion panel that contained the map. It worked fine, unless the user switched to a different pane then tried to return to the map. Then, it would only draw approximately 1/4 of the map canvas, with the remainder being gray.

In my research, calling google.maps.event.trigger(map, "resize"); was a consistent suggestion, but the first few locations I tried calling it did not work. I finally solved the problem by binding the trigger to the click event of the jQuery Accordion pane, based on an example at essentialwebconcepts.com.

My code:

function triggerMapResize()
    {
    google.maps.event.trigger(map, "resize");
    }

jQuery(document).ready(function() {
    jQuery("#the-accordion").bind('accordionchange', function(event, ui) {
        if (ui.newContent.attr('id') == 'the-pane-id')
            {
            triggerMapResize();
            }
        });
    });

The only remaining problem is that the center of the map changes when the user returns to the map pane after looking at a different pane.  I started a topic on SO for this issue.

Update August 24:
Several changes were required to get this to work on all browsers including IE. IE failed upon page load when I was trying to initialize the map. Originally I was using window.onload = function () { initialize_map(); } but that resulted in a vague IE error.

I added code to capture the map's center LatLng when the user moves the mouse outside the map canvas, and more code to move the center to that point upon returning to the map.

          var map=null;
    var currMapCenter = null;

    jQuery(document).ready(function() {
    jQuery("#accordion").bind('accordionchange', function(event, ui) {
    if (ui.newContent.attr('id') == 'region-list')
    {
    if(map==null) {
    //first load; call map initialization
    initialize_map();
    }
    triggerMapResize();
    }
    });

    function initialize_map() {
   
    //do initialization here...
   
    google.maps.event.addListener(map, 'mouseout', function() {
    currMapCenter=map.getCenter();
    });
    }

    function triggerMapResize() {
    google.maps.event.trigger(map, "resize");
    map.setCenter(currMapCenter);
    }

A side note about another problem I ran across in IE8 that has limited documentation online: When creating LatLng arrays, double-check syntax to be sure there is no comma after the final element. While the map looked perfect in standards-compliant browsers, in IE8 each polygon had a segment extending up to near the North Pole.

var polygonPoints= [
        new google.maps.LatLng(24.3250983277945,-79.4028109345145),
        new google.maps.LatLng(48.9377507851552,-142.984008088915),
        new google.maps.LatLng(37.9247004907078,-131.891417410329),
        new google.maps.LatLng(29.8055038628199,-122.143142289543),
        new google.maps.LatLng(21.6909424687438,-114.135809333967),
        new google.maps.LatLng(24.3250983277945,-79.4028109345145),
        ];

This mistake cost me an hour of confusion. Finally I found a discussion mentioning trailing commas with Google Maps in Internet Explorer and discovered the improper extra comma at the end of each array.   It was caused by creating the LatLng object using concatenation in Excel without manually trimming the last value.

Miscellaneous notes and thoughts

While working on integrating an instance of SlickGrid into a project file today, I discovered that all the rows had white backgrounds. In all the examples, the rows alternate colors for easier reading.  It took a while, but I traced the problem down to a conflict in the CSS for .ui-widget-content .  After adding the following to a .css file that loads at the end of the queue, my SlickGrid now has alternating gray and white rows as needed:

.ui-widget-content.slick-row.odd
    {
    background-color:white;   
    }
.ui-widget-content.slick-row.even
    {
    background-color:rgb(250,250,250);   
    }

The current problem I am working on is the inconsistent alignment and width of SlickGrid headers and their associated data cells. It is similar to the problem shown here: http://stackoverflow.com/questions/8559487/slick-grid-header-row-cell-alignment

Update 12:20

What appears to be happening is that the column width is set, for example, to 50. However, the elements added for the sortable and resizable properties add width to the header (about 10 pixels), but not to the cell.

Strangely, it very always becomes properly aligned if I hold down the shift key and refresh the page, even though no changes are made to code or CSS between page loads.

If I set the resizable and sortable properties to false, then everything consistently aligns properly on every page load/refresh.

Update 16:05 

I have spent much of today researching this error, with little advancement.  I tried to rebuild and reproduce the problem in jsfiddle.net, but it aligned properly there.  I tend to think that the cause is related to browser rendering and CSS caching or interpretation. It has been tested on Mac and Windows in Firefox, Chrome and IE. The misalignment is not consistent or predictable.  In Firefox, if I first use Chris Pederick's Web Developer toolbar to clear the cache, the SlickGrid always loads with proper alignment.

So far I am impressed by the capabilities of SlickGrid. My current project has so many jQuery plugins, other modules and CSS files there are bound to be conflicts.

Update 18:50

I haven't been able to consistently reproduce the problem discussed above, so I have moved on. I am now working on retrieving data from the database via jQuery ajax. In the past I have always written my own ajax functions, but have decided to go with jQuery for this project since its requirements may eventually grow beyond the simple tools I have previously built.

So far, the method has been very simple. I need the ajax to be called when a user clicks on a row in the SlickGrid.  In the grid's setup JS, I added:

grid.onClick.subscribe(function(e, args) {
        var cell = grid.getCellFromEvent(e);
        var rowClicked=cell.row;
        var clickedItem = gridData[rowClicked].id;

        var request = $.ajax({
              url: "myScript.php",
              type: "POST",
              data: {id : clickedItem},
              dataType: "html"
            });

            request.done(function(msg) {
              alert(msg);
              });

            request.fail(function(jqXHR, textStatus) {
              alert( "Request failed: " + textStatus );
            });
        });

Now I need to write PHP code to retrieve the specified record from the database, convert the data into JSON and send it back in order to populate the form for editing.

Useful URLs for today

Today I am working on forms. My goal is to have forms in the current project look cleaner and more modern than default HTML. 

The base I am building from:
http://line25.com/tutorials/create-a-stylish-contact-form-with-html5-css3

How to make form elements float into the same line instead of vertically stacked:
http://stackoverflow.com/questions/2306117/radio-buttons-and-label-to-display-in-same-line

A good toolset for building HTML5 +CSS + JS forms
www.reformedapp.com/

This appears to be a promising tool for creating tree controls in HTML5+jQuery
http://www.jstree.com

Some tips on styling HTML dropdowns using only CSS:
http://stackoverflow.com/questions/1895476/how-to-style-select-dropdown-with-css-only-without-javascript

jQuery UI Autocomplete: problem solved

It seems that in programming, often the simplest issues cause the most wasted time. Most of yesterday was spent trying to integrate the jQuery UI Autocomplete component into a project. I could tell it was contacting the target file on the server, but it would never return any matches.

Today, I opened the Firebug console and noted that despite getting a 200 OK message on the request, the response pane was always empty. A Google search turned up a discussion on StackOverflow that described my predicament exactly.

In reviewing my code, I found that my source parameter in the Autocomplete function code pointed to an absolute URL beginning with http://. Evidently this caused the ajax code to fail on the presumption it was pointing to an external domain (though the target file was actually on the same domain). By changing it to a site-root relative URL, my autocomplete component works.