Echo php into google map javascript

Question

Is it possible (and if so please explain how) to echo php into javascript, specifically for my purpose I am trying to echo the input of a custom field from the wordpress platform into the description of a google map. I am hoping I can give the client a cms backend to input the text that appears in the marker points on a map. What I am trying with no success is:

var point = new GLatLng(49.295308,-123.149297);
var marker = createMarker(point,"Site Title",'<div class="maptext"><p class="prepend-top caption">Title<\/p>

    <?php $the_query = new WP_Query('category_name=featured');
    while ($the_query->have_posts()) : $the_query->the_post();?>
    <?php if ( get_post_meta($post->ID, 'site-description', true) ) { ?>
    <?php echo get_post_meta($post->ID, 'site-description', $single = true); ?>
    <?php } ?>
    <\/div>')
          map.addOverlay(marker);

ok sarfaz was right with his orignal response and I was getting a parse error which was breaking it. what finally worked was this:

 var point = new GLatLng(48.134239,-122.764769);
      var marker = createMarker(point,"Port Townsend Marine Science Center",'<div class="maptext"><?php $the_query = new WP_Query('post_name=test-site');
while ($the_query->have_posts()) : $the_query->the_post();?><?php if ( get_post_meta($post->ID, 'map-content', true) ) { ?><?php echo get_post_meta($post->ID, "map-content", $single = true); ?><?php } ?><?php endwhile; ?><\/div>')
      map.addOverlay(marker);  

--- UPDATE ---

Just wanted to add that I found this to be the best way for me to grab posts since I always want a specific one linked to that marker :

  var point = new GLatLng(48.5139,-123.150531);
  var marker = createMarker(point,"Lime Kiln State Park", 
    '<?php $post_id = 182;
$my_post = get_post($post_id);
$title = $my_post->post_title;
echo $title;
echo $my_post->post_content;
?>')
      map.addOverlay(marker);

Answer 1

Yes, that is surely possible to have php echoed in javascript code. In your code you are missing the endwhile so only first subsequent line of your code is executing causing you unexpected result.

Update: Try t his:

var point = new GLatLng(49.295308,-123.149297);
var marker = createMarker(point,"Site Title","<div class=\"maptext\"><p class=\"prepend-top caption\">Title</p>

    <?php $the_query = new WP_Query('category_name=featured');
    while ($the_query->have_posts()) : $the_query->the_post();?>
    <?php if ( get_post_meta($post->ID, 'site-description', true) ) { ?>
    <?php echo get_post_meta($post->ID, 'site-description', $single = true); ?>

    </div>")
          map.addOverlay(marker);
    ..................

Answer 2

I think the problem simply comes from the new lines you generate in the javascript string. The output of the code will be something like this:

var marker = createMarker(point,"Site Title","<div class="\maptext\"><p class=\"prepend-top caption\">Title</p>
    thedatafromyourquery
    </div>")

what you want to have is something like this:

var marker = createMarker(point,"Site Title","<div class="\maptext\"><p class=\"prepend-top caption\">Title</p>" +
    "thedatafromyourquery" +
    "</div>")

Hope this helps.