title: How do I call PL/SQL variables from within a Javascript function?
body: <p>I would like to display coordinates - retrieved from an Oracle database - as markers on a Google Map by calling pl/sql variables from within a javascript function. This is all done in APEX 5. Any help would be greatly appreciated!</p>
  
  <p>What works: I select <code>GEOMETRY</code> (SDO_GEOMETRY) in the <code>PHOTO</code> table into <code>l_lng</code> (longitude) and <code>l_lat</code> (latitude) variables:</p>
  
  <pre><code>SELECT t.x Longitude,
    t.y Latitude
  FROM photo,
    TABLE(sdo_util.getvertices(photo.geometry)) t;
  </code></pre>
  
  <p>Using <code>DBMS_OUTPUT.put_line(l_lng);</code> and <code>DBMS_OUTPUT.put_line(l_lat);</code>, I can see that <code>l_lng</code> and <code>l_lat</code> successfully stored the values because the output is: </p>
  
  <pre><code>-4.083714
  50.315475
  </code></pre>
  
  <p>Specifically, the javascript variable <code>myLatLng</code> needs to pull the coordinates from <code>l_lng</code> and <code>l_lat</code>.</p>
  
  <pre><code>var myLatLng = {lat: l_lat, lng: l_lng};
  </code></pre>
  
  <p>My full code:</p>
  
  <pre><code>DECLARE
  
  l_lng NUMBER;
  l_lat NUMBER;
  
  
  begin
  
  SELECT t.x Longitude,
    t.y Latitude 
    INTO l_lng, l_lat
  FROM photo,
    TABLE(sdo_util.getvertices(photo.geometry)) t
    WHERE photo.id=39;
  
  
  htp.print('
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;style&gt;
          #map {
              width: 500px;
              height: 400px;
          }
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function initialize() {
  
                  var myLatLng = {
                      lat: l_lat,
                      lng: l_lng
                  };
  
  
  
                  var map = new google.maps.Map(document.getElementById("map"), {
                      zoom: 17,
                      center: myLatLng
                  });
                  var marker = new google.maps.Marker({
                      position: myLatLng,
                      map: map,
                      title: 'Hello World!'
                 });
          }
  
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  ');
  end;
  </code></pre>
  
  <p>As suggested by @vmachan, I modified my ht.print statement to read:</p>
  
  <pre><code>htp.print('&lt;html&gt;');
  htp.print('&lt;head&gt;');
  htp.print('&lt;style&gt;
      #map {
          width: 500px;
          height: 400px;
          }
      &lt;/style&gt;
  ');
  
  htp.print('&lt;INPUT TYPE="hidden" NAME="p_lng" VALUE="'||l_lng||'"&gt;');
  htp.print('&lt;INPUT TYPE="hidden" NAME="p_lat" VALUE="'||l_lat||'"&gt;');
  htp.print(' 
  
      &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function initialize() {
  
                  var myLatLng = {
                      lat: p_lat,
                      lng: p_lng
                  };
  
  
  
                  var map = new google.maps.Map(document.getElementById("map"), {
                      zoom: 17,
                      center: myLatLng
                  });
          }
      &lt;/script&gt;
  ');
  htp.print('&lt;/head&gt;');
  htp.print('
      &lt;body&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/body&gt;
  ');
  htp.print('&lt;/html&gt;');
  </code></pre>