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.

JavaScript references

I just found Chris Shiflett's April 26 posting with a great list of references for JavaScript. The first one I have started reading is "JavaScript for PHP Developers" by Stoyan Stefanov. It is one of the most clear and concise descriptions I have found to date as I try to apply my knowledge of other programming languages to JavaScript.

JS OOP and kestrel nest box research

Today's goal is to implement JavaScript objects.  I am familiar with OOP in Flex(ActionScript), PHP and other languages from years ago. However, JavaScript's lack of classes will require some re-routing of my neural circuitry.

I am starting my research with these two articles by Douglas Crockford:

• The world's most misunderstood programming language
• Private members in JavaScript

The first object I have to create is to represent a kestrel nest box. (Want to build one? - A real box, not a JS object to represent one- Instructions here)  The box has parameters including height, width, depth, height off ground, entrance diameter, direction the entrance faces, what the box is mounted on, and more.

My current project will allow researchers across North America (and maybe South America too) to track data from their kestrel boxes. Using OOP and MVC methods will be essential to keep the software flexible enough to satisfy the preferences of such a diverse audience and allow future expansion of the project.

Update 10:35

More valuable references:
https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects
https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model
https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_Revisited

Update 17:40

I successfully met my goal. In some ways it was easier than expected, but at the same time, a bit confusing. My object is created simply by retrieving the parameters from the database, via jQuery's Ajax functionality, as JSON.

var request = $.ajax({
    url: "getBoxParams.php",
    type: "POST",
    data: {id : nestBoxClicked, user: userToken},
    dataType: "JSON"
    });

request.done(function(boxData) {
     var kbox=new nestBox(boxData);                    

     populateBoxForm(kbox);
     });

Then, I manipulate the object properties in the populateBoxForm() function.

I still prefer working with strongly typed languages and classes, but it appears JavaScript can do what I need for a fully-functional web app, without losing speed or user-friendliness.

Douglas Crockford's article about JavaScript code conventions is another good resource I found today. 

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.

Migrating to Eclipse

My current work project, true to the nature of projects, has become more intensive than expected.  I have made it through several ASP and PHP projects with minimalist development environments, but my current mix of PHP with Javascript, including jQuery and multiple plugins for it, is too much to handle efficiently in a plain text editor.

I realized yesterday afternoon that every time I have built a major application, I have had some sort of IDE to work in. Early on, it was Visual Basic 6. I did a lot of PHP work in Dreamweaver, which is adequate for that.  Later I dove into Flex, and Adobe's IDE was good to work with.

I had explored Eclipse at some point but never had reason to follow through on it until now. I started downloading and configuring it yesterday and have spent many hours since then trying to get the pieces working.  Here are a few items I have found, in hopes it can assist others on the same voyage:

Major components I am using:

1. SQL Explorer
2. PHP Development Tools
3. Target Management (RSE)
4. Javascript IDE
5. EGit

My first goal is to install Git, since apparently Eclipse requires a version control system. That is another thing that is new, and something I have been trying to get established for a few years. So far, it is going well, and I am looking forward to the enhanced efficiency it will bring, even though I don't currently work in an Agile team. Here are some Git references that have helped me to make progress:

• http://www.alistapart.com/articles/get-started-with-git/
• http://gitx.frim.nl/
• http://code.google.com/p/git-osx-installer
• http://progit.org/

This morning I had an urgent request from a colleague to update some content in a database. I tried to use Eclipse SQL Explorer to accomplish that and ran into a series of problems. The setup has been frustrating at best. There are a lot of partial instructions in the documentation, like 'download and install ____" but no clarification on where or how to do that.

My first hurdle was to locate the MySQL driver it required. Finally I located a blog post somewhere that pointed me to http://dev.mysql.com/downloads/connector/j/  and I successfully downloaded the .jar file. I was expecting Eclipse to incorporate it somewhere, but evidently it just points to it, so download it to a location where it can reside permanently.

The next confusion was how to connect to the database.  I have used several front end clients for databases over the years, and all had specific fields for server IP/domain, port, and other parameters. It took a couple of hours to figure out what Eclipse requires. I filled in the fields as well as I could guess, but kept getting the error to "check your url."  I copied what I thought was the URL directly from my other database client, so I knew it was correct.  What I didn't know was that Eclipse, rather than providing fields for all the parameters,  uses a single string with embedded parameters and calls it the URL.  I finally located http://www.sqlexplorer.org/connections.php and ccopied the example there, creating a string like jdbc:mysql://mydomain.com:3306/myDBname.  It let me in. I still have not figured out what the "Example URL" is for in the MySQL driver setup window. The page at http://www.sqlexplorer.org/drivers.php shows it filled in with pseudocode, but doesn't explain it in the text.  I guess users are supposed to understand that the "example URL" is supposed to show us how to create the real URL in the connection parameters?  Unfortunately, when I loaded the driver, that field remained blank so I had no clue what to do.

Now that I'm in, it's time to get to work on the Javascript and see what Eclipse can do...


Update 15:00

One more quirk regarding MySQL in SQL Explorer: I wasn't able to view table contents in a grid like I am familiar with. I located a post in a forum that indicated the documentation showed an obsolete  method. I found that the three icons in the upper left of the SQL editor produce different results. I had been using the blue one, which returned the data in long strings. The first one in the row returns data into a grid. Now, to see if there is a way to edit that data.

Working notes February 24, 2012: Google Maps API

Today's focus is on creating a user interface for the Google Maps API.  Using basic HTML5, Javascript and the Google Maps API 3, I set out to create a reference of three methods for creating markers on a map, each with different properties.

Here is the source code of the result:

<!DOCTYPE HTML>

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var theMap;

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
      //initialize map with pin at Capitol & Front in Boise.
      var latLng = new google.maps.LatLng(43.61351466, -116.203798);
      theMap = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 13,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
      });
     
      var marker = new google.maps.Marker({
        position: latLng,
        title: 'Initialization marker',
        map: theMap,
        draggable: true
      });
     
      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);
     
      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
      updateMarkerAddress('Dragging...');
      });
     
      google.maps.event.addListener(marker, 'drag', function() {
      updateMarkerStatus('Dragging...');
      updateMarkerPosition(marker.getPosition());
      });
     
      google.maps.event.addListener(marker, 'dragend', function() {
      updateMarkerStatus('Drag ended');
      geocodePosition(marker.getPosition());
      });
     
      //add click listener for new marker http://stackoverflow.com/questions/7083264/google-maps-api-v3-set-marker-and-get-point
      google.maps.event.addListener(theMap, 'click', function(e) {
      placeMarkerByMapClick(e.latLng, theMap);
      });
}

function addMarkerByExternalButton()
    {
        //alert("addMarker");
        var latLng = new google.maps.LatLng(43.60283295462482, -116.19584164278416);
        //var theMap = google.maps.Map(document.getElementById('mapCanvas'));
        var blueMapMarker = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
               
        // Set up our GMarkerOptions object
        markerOptions = {  };
        
        http://stackoverflow.com/questions/4236522/google-maps-api-v3-info-window-displaying-same-information-for-all-the-markers
        var contentString_1 =  "<b>BSU Broncos Stadium</b><br /> Boise, Idaho, USA<br><b><a href='http://broncosports.com'>BSU Athletics site</a></b><br /><img src='http://image.cdnllnwnl.xosnetwork.com/fls/9900/images/facilities/new_turf.jpg' />";
        var infowindow_1 = new google.maps.InfoWindow({content: contentString_1});
        
        
        var newMarkerFromExtButton = new google.maps.Marker({
            position: latLng,
            title: 'Marker added by external button',
            map: theMap,
            icon: blueMapMarker,
            animation: google.maps.Animation.DROP,
            draggable: false
            });

        newMarkerFromExtButton.setMap(theMap);
        
        // Update current position info.
        updateMarkerPosition(latLng);
        geocodePosition(latLng);
          
        // Add dragging event listeners.
        google.maps.event.addListener(newMarkerFromExtButton, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
        });
          
        google.maps.event.addListener(newMarkerFromExtButton, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(newMarkerFromExtButton.getPosition());
        });
          
        google.maps.event.addListener(newMarkerFromExtButton, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(newMarkerFromExtButton.getPosition());
        });
        
        //add other listeners
        google.maps.event.addListener(newMarkerFromExtButton, 'click', function() {
        infowindow_1.open(theMap,newMarkerFromExtButton);
        });
        
    }


//reference http://stackoverflow.com/questions/7083264/google-maps-api-v3-set-marker-and-get-point
function placeMarkerByMapClick(position, map) {
    //alert("placeMarker");
    var yellowMapMarker = "http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png";
     
    var newMarkerFromMapClick = new google.maps.Marker({
        position: position,
        map: map,
        title: "marker added by map click",
        icon: yellowMapMarker,
        animation: google.maps.Animation.DROP,
        draggable: true
        });
   
    // Update current position info.
    updateMarkerPosition(position);
    geocodePosition(position);
   
     
    // Add dragging event listeners.
    google.maps.event.addListener(newMarkerFromMapClick, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
    });
     
    google.maps.event.addListener(newMarkerFromMapClick, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(newMarkerFromMapClick.getPosition());
    });
     
    google.maps.event.addListener(newMarkerFromMapClick, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(newMarkerFromMapClick.getPosition());
    });
     
    //next line centers the map on the newly created marker. Disabled since the movement is a bit annoying.
    //map.panTo(position);
    }
     

function addMarkerByTypedCoords()
{
    //alert("addMarker");
    var lat=document.getElementById("lat").value;
    var lon=document.getElementById("lon").value;
   
    var latLng = new google.maps.LatLng(lat, lon);
    //var theMap = google.maps.Map(document.getElementById('mapCanvas'));
    var greenMapMarker = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
    // Set up our GMarkerOptions object
    markerOptions = { };

    var markerContent =  document.getElementById("markertitle").value;
    var infowindow_1 = new google.maps.InfoWindow({content: markerContent});

    var newMarkerFromTypedCoords = new google.maps.Marker({
        position: latLng,
        title: 'Marker added by typed coordinates',
        map: theMap,
        icon: greenMapMarker,
        animation: google.maps.Animation.DROP,
        draggable: true
        });
   
    newMarkerFromTypedCoords.setMap(theMap);
   
    // Update current position info.
    updateMarkerPosition(latLng);
    geocodePosition(latLng);
   
    // Add dragging event listeners.
    google.maps.event.addListener(newMarkerFromTypedCoords, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
    });
   
    google.maps.event.addListener(newMarkerFromTypedCoords, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(newMarkerFromTypedCoords.getPosition());
    });
   
    google.maps.event.addListener(newMarkerFromTypedCoords, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(newMarkerFromTypedCoords.getPosition());
    });
   
    //add other listeners
    google.maps.event.addListener(newMarkerFromTypedCoords, 'click', function() {
    infowindow_1.open(theMap,newMarkerFromTypedCoords);
    });
   
    theMap.panTo(latLng);
    }

    
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 800px;
    height: 800px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
  </style>
 
  <div id="mapCanvas"></div>
 
  <div id="infoPanel">
      <p>NOTE: Marker generated at map initialization is red.</p>
      <hr />
      <h3>Current marker information</h3>
      <b>Marker status:</b>
      <div id="markerStatus"><i>Click and drag the marker.</i></div>
      <b>Current position:</b>
      <div id="info"></div>
      <b>Closest matching address:</b>
      <div id="address"></div>
      <hr />
     
      <h3>Method 1: Add a predefined location marker</h3>
      <p>Marker will be blue. Click the blue marker to get an info window with photo.</p>
      <button onclick="addMarkerByExternalButton()"> Add marker at BSU Stadium</button>
     
      <hr />
      <h3>Method 2: Add new marker from manually entered coordinates</h3>
      <p>Marker will be green</p>
      <form id="typedcoords">
          <fieldset>
          <legend>Type coordinates to add a new marker</legend>
          <label for="lat">Title your new marker:</label>
          <input type="text" name="markertitle" id="markertitle" /><br />
          <label for="lat">Latitude (decimal degrees)</label>
          <input type="text" name="lat" id="lat" /><br />
          <label for="lon">Longitude (decimal degrees)</label>
          <input type="text" name="lon" id="lon" />
          <br />
          <button id="addMarker" title="Add Marker" type="button" onclick="addMarkerByTypedCoords()">Add Marker</button>
          </fieldset>
      </form>
      <hr />
     
      <h3>Method 3: Click map to create new marker</h3>
      <p>Marker will be yellow</p>
      <p>Just click anywhere on the map to create a simple new marker</p>
 
  </div>
</body>
</html>

This example has been tested successfully in Firefox 10 and Safari 5.1 on Mac, and IE and Firefox on Windows XP

References utilized to create this example:

http://code.google.com/apis/maps/documentation/javascript/reference.html

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers

http://stackoverflow.com/questions/4236522/google-maps-api-v3-info-window-displaying-same-information-for-all-the-markers

http://code.google.com/apis/maps/documentation/javascript/overlays.html#SimpleIcons

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/5865e223d316b238/e221a5a33c7775d3?pli=1

I'll be working with the GM API for several days, and will likely add more examples as I progress through this project.

Working notes for February 14, 2012

Today I am working on integrating SlickGrid into a project. So far, so good.

One task this has required is the insertion of a new CSS file into the page. My project structure displays all content inside of a single PHP file based on URL parameters. Therefore, when individual pages require special CSS, I need to make that happen within the page, not in the wrapper, to avoid unnecessary bandwidth usage.

Here is some Javascript that will load a CSS file into the page's header when called in the body:

<script type="text/javascript">
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "thedir/thefile.css");
document.getElementsByTagName("head")[0].appendChild(fileref);
</script>

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.