PHP variable in jQuery function for display Google Map

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=

Check the compiled page source. What does the line where the address should be look like? — Kiro Coneski
– Kiro Coneski, Commented Nov 15, 2012 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
– Fred K, Commented Nov 15, 2012 at 21:15
yes I've already tried the trim. Nothing to do. Always gray map! — Fred K
– Fred K, Commented Nov 15, 2012 at 21:29

Michal Leszczyk · Accepted Answer · 2012-11-15 21:31:54Z

2

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

answered Nov 15, 2012 at 21:31

Michal Leszczyk

1,90916 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Fred K Over a year ago

No errors in Firebug>Console>Errors ! In IE I don't know where is the console but the Firebug console should be pretty reliable...

Michal Leszczyk Over a year ago

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.

Fred K Over a year ago

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 Over a year ago

After the UPDATE (see 1st post): hi michal, now I have two errors in console. I explained the details in the first post. thanks

Michal Leszczyk Over a year ago

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()">

|

Ennui · Accepted Answer · 2012-11-15 20:34:54Z

0

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.

answered Nov 15, 2012 at 20:34

Ennui

10.2k3 gold badges37 silver badges42 bronze badges

3 Comments

Fred K Over a year ago

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 Over a year ago

EDIT: sorry, Chrome shows the map with the marker OK!!! While Firefox and IE don't show nothing (gray background, etc) :(

Fred K Over a year ago

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!

qwertmax · Accepted Answer · 2012-12-06 18:52:10Z

0

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

answered Dec 6, 2012 at 18:52

qwertmax

3,4702 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

PHP variable in jQuery function for display Google Map

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related