Thursday, August 23, 2012

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.

Saturday, August 18, 2012

The power of introverts



I just finished reading Quiet, by Susan Cain. It is by far the best book I have read in a very long time. I can relate completely to her description of extroversion being prized by society, and quietness being condemned.  I have lived with such condemnation my entire life. I have even sought medical treatment to be "cured" of the affliction. This book made me aware that I am not alone in this. It has also given me a new perspective on my place and value in society.
 
This is worth sharing:
In a culture where being social and outgoing are prized above all else, it can be difficult, even shameful, to be an introvert. But, as Susan Cain argues in this passionate talk, introverts bring extraordinary talents and abilities to the world, and should be encouraged and celebrated.


I am very thankful to have finally found employment in an organization that has other people like me, and values my contribution and strengths rather than coercing me to be something I am not.  If only other groups of people in my life could be as understanding.

Wednesday, August 8, 2012

Capturing Facebook Atom feed via PHP cURL

I have been working on how to retrieve the RSS feed of our company Facebook page for inclusion in our website. Thanks to the answer by Francois Deschenes on a Stack Overflow topic, I have the beginnings of a functional solution:

$curl_handle=curl_init();
curl_setopt($curl_handle, CURLOPT_URL,"https://www.facebook.com/feeds/page.php?format=atom10&id=111111111111111"); curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT,5);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER,1);
curl_setopt($curl_handle, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl_handle, CURLOPT_USERAGENT, array('User-Agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Safari/534.45'));
curl_setopt($curl_handle, CURLOPT_VERBOSE, true);
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);

if (empty($buffer))
    {
    print "Sorry, request failed.";
    }
else
    {

    (do stuff with the feed)
           }

I will update this posting as this project progresses.