Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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=
share|improve this question
1  
What's the address? Maybe it contains a quote? – Kiro Coneski Nov 15 '12 at 20:32
Check the compiled page source. What does the line where the address should be look like? – Kiro Coneski Nov 15 '12 at 20:35
hi kiro. The address is Paris, france. I've tried to print the variable $dudi with "echo $dudi". Firebug (firefox) shows: (here tab space?) Paris, france. Chrome Inspector shows: "(here tab space?) Paris, france" (with the double scores) – Fred K Nov 15 '12 at 21:15
just in case, try <?php echo trim($dudi); ?> – Kiro Coneski Nov 15 '12 at 21:15
yes I've already tried the trim. Nothing to do. Always gray map! – Fred K Nov 15 '12 at 21:29

3 Answers

up vote 2 down vote

"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.

share|improve this answer
No errors in Firebug>Console>Errors ! In IE I don't know where is the console but the Firebug console should be pretty reliable... – Fred K Nov 15 '12 at 21:48
Well, then maybe try to geocode the address first and then set the marker using it's lattitude and longitude. Here's more about Geocoding: developers.google.com/maps/documentation/geocoding I know it's a little way around, but should work just fine. – Michal Leszczyk Nov 15 '12 at 22:03
No errors on IE, Chrome and Firefox console. I will try with latitude/longitute. Another thing: the Ennui's solution on Chrome works but has some bug (strange effects when click the marker and move the map). While if I manually write the address in the function it works on Chrome with bugs and don't work on IE and Firefox. This thing is obscure. – Fred K Nov 15 '12 at 22:14
After the UPDATE (see 1st post): hi michal, now I have two errors in console. I explained the details in the first post. thanks – Fred K Nov 16 '12 at 15:21
The only thing that comes to my mind (when it comes to CSS) is to set the DIVs size using width and height CSS rules. <div style="width: 600px; height: 400px;"> When it comes to the main.js problems - make sure you call your GoogleMaps initialize function when the DOM is loaded <body onload="initialize()"> – Michal Leszczyk Nov 17 '12 at 16:11
show 1 more comment
up vote 0 down vote

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.

share|improve this answer
hi ennui! sorry but it doesn't work. Chrome shows the map but the marker is in a totally wrong place. Firefox and IE don't show the map. Notice that I always see the map with gray background, zoom fader, etc – Fred K Nov 15 '12 at 21:04
EDIT: sorry, Chrome shows the map with the marker OK!!! While Firefox and IE don't show nothing (gray background, etc) :( – Fred K Nov 15 '12 at 21:23
Hola Ennui. Yeah, after the UPDATE (see 1st post) your solution works well on every browser! But actually it's pretty dirty! :) Could you check the update on the 1st post for a clean solution? Thanks SO MUCH! – Fred K Nov 16 '12 at 16:46
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.