php variables inside javascript

Tue, 12/11/2007 - 23:11 — crounauer

Hi David,

What is the secret to using PHP variables inside Java Script?

I am busy with a google maps API intergration and am struggling to get Geo codes inside the javascript in order to make it generate maps dynamically. Could you perhaps help please?

I have the 3 variable I need which has been parsed with Magic Parser...

$hotelGeoLong
$hotelGeoLat 
$hotelName

and trying to get them in here...

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng($hotelGeoLat, $hotelGeoLong), 13);
		map.openInfoWindow(map.getCenter(),
               document.createTextNode("$hotelName"));
      }
    }

Thanks,
Simon

Wed, 12/12/2007 - 12:19 — dmorison

Hi Simon, The way I usually

Hi Simon,

The way I usually do this is to have a JavaScript function that I call to initialise the local variables; and then at some point you render the appropriate JavaScript to call that initialisation function from within a PHP section of your code.

Taking your function as an example; I would add your 3 parameters as actual JavaScript parameters to the function, like this:

    function initialize(hotelGeoLat,hotelGeoLong,hotelName) {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(hotelGeoLat,$hotelGeoLong), 13);
map.openInfoWindow(map.getCenter(),
               document.createTextNode(hotelName));
      }
    }

Notice how I have removed the PHP variable notation ($varname) and replaced them with JavaScript variables (which don't begin with $). Then, within your PHP segment, add the following; making sure that it occurs after the browser will have received the above JavaScript:

<?php
  print "<script type='text/javascript'>initialize(".$hotelGeoLat.",".$hotelGeoLon.",'".$hotelName."');</script>";
?>

Incidentally, when writing JavaScript apps I often use FireFox's "Error Console" (Tools > Error Console) which gives good error messages when things don't turn out as planned....! You normally need to clear all current errors before it will record new ones as most websites generate quite a few!

Hope this helps!
Cheers,
David.

Wed, 12/12/2007 - 13:48 — crounauer

Hi David, The error console

Hi David,

The error console is not showing any errors and the map does work when the co-ordinates are manually entered.

This is the code so far...

<script type="text/javascript">
    function initialize(hotelGeoLat,hotelGeoLong,hotelName) {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(hotelGeoLat, hotelGeoLong), 13);
map.openInfoWindow(map.getCenter(),
               document.createTextNode(hotelName));
      }
    }
</script>

<?php
print "<script type='text/javascript'>initialize(".$hotelGeoLat.",".$hotelGeoLong.",'".$hotelName."');</script>";
?>
<div id="map_canvas" style="width:600px; height:300px"></div>	

Just brings up a blank page. Any suggestions?
Thanks,
Simon

Wed, 12/12/2007 - 13:50 — crounauer

Actually the map does start

Actually the map does start loading as can be seen here, but then comes up with a zoom error!
http://www.scottishhotels.net/test/directions/(7329)Mercure-Ardoe-House-Aberdeen.html

Regards,
Simon

Wed, 12/12/2007 - 14:22 — dmorison

Hi Simon, 2 separate issues

Hi Simon,

2 separate issues here....

Firstly; as your method of initialising the map is by way of calling initalize() as generated by the PHP segment, this replaces the onload="initialize()" method, which since it is still there is calling the initialize() function without any parameters. This is why you are getting a zoom error; because it will have tried to load the map at 0,0! To fix this; simply remove onload="initialize()" from the BODY tag in your page.

Secondly, since inline JavaScript is executed as it occurs on the page, you must define the map_canvas DIV before you make the call; otherwise it doesn't exist at the time initialize() is called! To fix this, move the following code...

<div id="map_canvas" style="width:600px; height:300px">

...to somewhere BEFORE the point where you generate the call to initialize(). Here's the script I wrote to test this:

View Output

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="{link saved}"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function initialize(hotelGeoLat,hotelGeoLong,hotelName) {
      if (GBrowserIsCompatible()) {        
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(hotelGeoLat, hotelGeoLong), 13);        
        map.openInfoWindow(map.getCenter(), document.createTextNode(hotelName));
      }
    }
    //]]>
    </script>
  </head>
  <body onunload="GUnload()">
  <div id="map_canvas" style="width:600px; height:300px"></div>
  <?php
  $hotelGeoLat = 57.10210;
  $hotelGeoLong = -2.17957;
  $hotelName = "Mercure Ardoe House Aberdeen";
  print "<script type='text/javascript'>initialize(".$hotelGeoLat.",".$hotelGeoLong.",'".$hotelName."');</script>";
  ?>
  </body>
</html>

Hope this helps!
Cheers,
David.

Wed, 12/12/2007 - 14:27 — crounauer

Cheers David, thanks

Cheers David, thanks again.
Simon