Nginx – How to create custom content for nginx error 502 page, keep origin url on browser

The root directive is the problem here. Quote from the doc:

note: Keep in mind that the root will still append the directory to the request so that a request for "/i/top.gif" will not look in "/spool/w3/top.gif" like might happen in an Apache-like alias configuration where the location match itself is dropped. Use the alias directive to achieve the Apache-like functionality.

Basically, only use root for real roots: if the content is to be at / use root. If it's going to end on a subfolder, use alias:

location  /map/ {
  alias  /home/user/public_html/map/;
}

Also check what user nginx is running as and make sure that this user can access /home/user/public_html/map

Firstly, set your root directive outside the location block - in this case, above the error_page - directive. See the nginx pitfalls page. The reason for this is that many directives (including error_page) need to know paths relative to something - and all paths are assumed to be relative (i.e. /404.html is not in the root of your file system - it is relative to your document root).

server{
    #listen 80; - not needed
    server_name www.foo.com;
    root    /srv/www/foo/public_html;
    expires     1M;
    access_log  /srv/www/foo/logs/access.log;
    error_log   /srv/www/foo/logs/error.log;

    error_page 404 /404.html;

    location / {
        index   index.html;
        rewrite ^/(.*)/$ /$1 permanent;
        try_files "${uri}.html" $uri $uri/ =404;
    }

    location = /404.html {
        internal;
    }       
}

If the above does not resolve your error, increase the verbosity of your error_log (e.g. to 'info') and see what page nginx is actually serving when you hit a 404.