Echo styles in google maps mashup and custom Wordpress fields

Question

Using wordpress, I deal with custom fields from specific posts to populate the content for the generated Google map. I am using this code

  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;
$snip = get_post_meta($post_id, 'mapExcerpt', true);
echo $title;
echo $snip;
?>')
      map.addOverlay(marker);

I am trying to execute a css echo but this causes a javascript error

  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;
$snip = get_post_meta($post_id, 'mapExcerpt', true);
echo "<div class='theTitle'>";
echo $title;
echo "</div>";
echo $snip;
?>')
      map.addOverlay(marker);

I get an error

missing ) after argument list

and the way out is

     var point = new GLatLng(48.5139,-123.150531);
  var marker = createMarker(point,"Lime Kiln State Park",
   '<div class='theTitle'>Site Title</div>Site excerpt')
   map.addOverlay(marker); 

Can someone please show me a more elegant (working) solution for this?

Answer 1

The generated code has uninsulated single quotes inside the single quotes passed to createMarker.

You need to change:

echo "<div class='theTitle'>";

at

echo "<div class=\"theTitle\">";

so the output will be:

var point = new GLatLng(48.5139,-123.150531);
var marker = createMarker(point,"Lime Kiln State Park",
   '<div class="theTitle">Site Title</div>Site excerpt')
map.addOverlay(marker);