PHP variable in jQuery function for display Google Map - php

Question

I'm going mad. I get the value (it's the address of an home) from a Wordpress custom field (input type) with this code:
<?php $dudi=get_post_meta($post->ID, 'addr', true); ?>
It's good! Now I have to "pass" this variable $dudi to a jQuery function (it's gMap, for display Google maps):
$(function() {
$("#map").gMap({ markers: [
{ address: '<?php echo $dudi; ?>',
html: "blah blah<br>blah blah" }
],
zoom: 10 });
});
and now with the tag <div id="map"></div> gMap should display the map with the marker on the specified address (value in the variable $dudi) but doesn't work!
Notice that if I manually write the address (in place of <?php echo $dudi; ?>) it works on Chrome with bugs (strange effects when click the marker and move the map) and don't works on IE and Firefox
Don't know... I've tried in any way but nothing to do... and I need this for tomorrow! :(
Hope in you guys!!
UPDATE:
Oh my God! I'm going for steps because it's not clear if the issue is caused by the passing of the variable or by a html/css conflict. So for the moment I have manually written the address in the jQuery function bypassing the variable.
Well, after many headaches I've found that the map goes in conflict with the css:
max-width: 100%;
Infact, when I comment that line the map shows correctly.
NOW, I restored the variable and now the map doesn't work on any browser (aka gray backgroud) BUT it shows correctly the zoom fader and in the browser console I have two errors TypeError: a is null in the file main.js. Unfortunately I don't know this file and I'm not able to fix some codes.
Hope you guys... again!
if needed...
1st error
H(ff,hb);var Kh=256/360,Lh=256/(2*Math.PI);ff.prototype.fromLatLngToPixel=function(a,b){var c=128+a.lng()*Kh,d=Db(Math.sin(Xb(a.lat())),-0.9999,0.9999),d=128+0.5*Math.log((1+d)/(1-d))*-Lh,f=1<<b;return new r(u(c*f),u(d*f))};
2nd error
Oh(Sj,"arrow",1);function qi(a,b,c){!a.lat&&!a.lon&&(a=new P(a.y,a.x));this.Aa=a;this.Nu=i;this.na=0;this.N=this.mb=!1;this.Oo=[];this.V=[];this.Ra=Mj;this.Mg=this.cl=i;this.Ub=!0;this.Dg=this.rf=!1;this.g=i;if(b instanceof Qj||b==i||c!=i)this.Ra=b||Mj,this.Ub=!c,this.ha={icon:this.Ra,clickable:this.Ub};else{b=this.ha=b||{};this.Ra=b.icon||Mj;this.mv&&this.mv(b);if(b.clickable!=i)this.Ub=b.clickable;if(b.isPng)this.rf=!0}b&&Ob(this,b,"id,icon_id,name,description,snippet,nodeData".split(","));this.Zu=Tj;if(b&&b.getDomId)this.Zu=

Answer 1

"Chrome shows the map with the marker OK!!! While Firefox and IE don't
show nothing (gray background, etc)"
If Ennui's solution works fine at Chrome, then check the other browsers consoles - they should output some kind of errors. That's what usually happens when GoogleMaps show 'gray background' instead of a map.

Answer 2

A quick and dirty solution would be to echo the $dudi variable somewhere on the page in a hidden div. For example:
<p style="display:none" id="dudi">
<?php echo get_post_meta($post->ID, 'addr', true); ?>
</p>
Then in your jQuery:
var dudi = $('p#dudi').text();
Didn't have time to test this but I think it should work for your purposes.

Answer 3

try to find css stype for img tag
max-width: none;
and replace it to:
max-width: none;