Quartz Composer JavaScript

Question

I'm really stuck so any help would be appreciated. TIA!

I have a Quartz Composition in which I want to display a Streetview (from Google Maps) and be able to control the navigation (as in be able to advance forward, etc.). This would mean I need a JavaScript for it and I've got no idea on how to link the JavaScript Patch in QC with the Google Maps API.

So how could I add two strings, representing Lat and Long and display the Streetview?

Here is a sample HTML from Google doing that:

<!DOCTYPE html>
    <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
    var panoramaOptions = {
      position:bryantPark,
      pov: {
        heading: 90,
        pitch:0,
        zoom:0
      }
    };
    var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
    myPano.setVisible(true);
  }
</script>
</head>
<body onload="initialize()">
  <div id="pano" style="width: 1280px; height: 1024px"></div>
</body>
</html>

How could I do this in Quartz Composer JavaScript Patch or any other patch?

Thanks a lot!

P.S.: It already works partially by loading the page with CoGe Webkit Plugin for QC. But I have no idea on how to control the JavaScript inside the HTML via QC. Any other way to send variables from QC to a HTML page or anything similar?

score 1 · Answer 1 · answered Nov 20 '11 at 20:51

Really easy actually, hope it will help others as well.

HTML:

function initialize(x, y) {
    var pos = new google.maps.LatLng(x, y);
    // whatever else you need it to do
}

QC:

initialize(x, y)

Thanks to the creator of the CoGe WebKit plugin, Tamas Nagy for the answer!

Quartz Composer JavaScript

1 Answers1