What is the proper way to wrap this php loop around the javascript

Question

Hi, I am mashing together the Google Maps 2 script with a Wordpress loop so there is a CMS platform for the map data. I have this working fine :

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);
$mapTitle  = $my_post->post_title;
$mapIMG = get_post_meta($post_id, 'mapImage', true);
$snip = get_post_meta($post_id, 'mapExcerpt', true);
echo "<div class=\"span-12\">";
echo "<div class=\"mapTitle\">";
echo $mapTitle;
echo "</div>";
echo "<img class=\"mapImage\" src=\"";
echo bloginfo('url');
echo "/wp-content/files_mf/";
echo $mapIMG;
echo "\" /> ";
echo "<div class=\"mapContent\">";
echo $snip;
echo "</div>";
echo "<div class=\"moreLink\">";
echo "<a href=\"";
echo $permalink = get_permalink( $post_id );
echo "\">Find out more &raquo; </a>";
echo "</div>";
echo "</div>";
?>')
map.addOverlay(marker);

However I am hoping to also be able to include the two variables at the start within the php loop so that both of those can also be generated by custom fields. Can someone please show me that the proper way to write this would be so that all of the data can be pulled in from fields within that post id? So the lat/long and title could also be set from within the post 182 fields.

Answer 1

Get rid of all echos and make it this way:

$snip = get_post_meta($post_id, 'mapExcerpt', true); 
?>
<div class="span-12"> 
<div class="mapTitle">
<?=$mapTitle?>
</div>
...etc

Answer 2

I think I get what you're asking. I think the biggest thing that would help you is looking at your coding conventions. Readability is very important. For example, try not to mix php with output too much. Do the php first, and then further down the page just echo your prepared variables where you need them. It makes things a lot easier to read. Also, single quotes are your friend.

I believe this fixes your problem:

<?php
$post_id = 182;
$my_post = get_post($post_id);
$mapTitle  = $my_post->post_title;
$mapIMG = get_post_meta($post_id, 'mapImage', true);
$snip = get_post_meta($post_id, 'mapExcerpt', true);
$permalink = get_permalink( $post_id );

// Is this what you mean??
$lat = $my_post->post_lat;
$long = $my_post->post_long;

$pass_to_function = '
    <div class="span-12">
        <div class="mapTitle">'.$mapTitle.'</div>
        <img class="mapImage" 
            src="'.bloginfo('url').'/wp-content/files_mf/'.$mapIMG.'" />
        <div class="mapContent">'.$snip.'</div>
        <div class="moreLink">
            <a href="'.$permalink.'">Find out more &raquo; </a>
        </div>
    </div>';

?>

var point = new GLatLng(<?php echo $lat.', '.$long; ?>);
var marker = createMarker(point,"<?php echo $mapTitle; ?>", '<?php echo $pass_to_function; ?>')
map.addOverlay(marker);

Answer 3

I'd do this as a comment, but there's no coding formating there, so...

"... I am going to be pulling from about 20 different post IDs..."

How are these post IDs retrieved? From a database? What data is being pulled? I'm guessing the latitude/longitude, the marker name, and the marker's ID, right? If that's the case, then something like this would work:

$sql = "SELECT id, lat, long, name FROM table..."; // whatever it would be
$res = mysql_query($sql);

while($row = mysql_fetchrow_array($res)) {
    $title = get_title($row['id']);
    $img = get_Post_Meta($row['id']);
    // and populate more variables for whatever data you need

    // start a heredoc
    echo <<<EOF
var point = new GLatLng({$row['lat']},{$row['long']});
var marker = createMarker(point,"{$row['name']}", '
    <div class="this">
       <div class="that">
           {$title}    <img src="{$img}" />
       </div>
    </div>
';

EOF;
    } // end of while loop

Just remember to sanitize any text you're inserting as Javascript code. If (say) the marker's name contains the same type of quotes you're inserting it inside of, it will cause a javascript syntax error, so be sure to escape the appropriate quotes for whatever you're inserting the variable into.