Echo styles into the mashup of a google map and wordpress custom fields

Question

Using wordpress, I am pulling in a custom fields from specific posts to fill in the content for a google generated 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 echo css style blocks 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 the error

missing ) after argument list

and the output 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 code you are generating has unescaped single quotes inside the single quotes passed into createMarker.

You need to change:

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

to:

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);