Content-Type not setting properly while displaying file

Question

I have a server which serves file content from a CRM. I am using fancybox to display file content. following is the code -

JQuery code -

$url = 'https://docs.google.com/viewer?url=<server-url>/filename.php?id='+$documentId+'&name='+$name+'&embedded=true';
$.fancybox.open({
            padding: 0,
            href: $url,
            type: 'iframe',
        });

Now on server side my PHP code is -

public function _func_getFile($docId, $fileName, $download){
        $data = null;
        $contentTypeMap = array('doc' => 'application/msword', 'docx' => 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'pdf' => 'application/pdf', 'jpg' => 'image/jpeg', 'jpeg' => 'image/jpeg', 'png' => 'image/png');
        if($this->getConnectedToAPI()){
            $data = <CRM serves file data here>
            if($download){
                header('Content-disposition: attachment; filename='.$fileName);
            }else{
                header('Content-disposition: inline; filename='.$fileName);
            }
            $extn = trim(strtolower(array_pop(explode(".", $fileName))));
            header('Content-type: '.$contentTypeMap[$extn]);
            echo $data;
        }
    }

Now problem is that when I try to get a .doc file or a .pdf file, it does not show file properly in fancybox. Google Doc viewer either shows an error like this -

Or sometimes I get the doc file like a pure text file, with no formatting (XMLs are responsible for formatting, which is my guess). However, if I set the Content-type for pdf as application/msword, it work properly in all cases for pdf. But for doc same issue persists.

Can someone please point out where I am going wrong? My guess is that there is something wrong with Content-Type not being set properly according to extension of file.

PS - I am able to download all file types properly. There is no issue for download for any type of file with this code.