谷歌地图在APEX地区消失

Question

我试图在我的apex页面地区之一显示地图，该地图将有可拖动的标记链接到其他地区的文本字段并显示经纬度地理编码。除了地图只出现0.5秒并且消失的一件事之外，万物都起作用。我认为这个问题是在编码的某个地方，因为我有其他类似的程序，其中地图工作非常好。我正在使用PL/SQL从数据库中的过程检索映射。

这里是我的程序：

create or replace PROCEDURE SHOW_LOCATION (
    map_div IN VARCHAR2 DEFAULT 'map-canvas', 
    issue_street_address IN VARCHAR2, 
    issue_post_code IN VARCHAR2, 
    city IN VARCHAR2, 
    lat_item IN VARCHAR2, 
    long_item IN VARCHAR2) 
is 
    a_mapstr VARCHAR2 (32000); 
begin 
    a_mapstr := ' 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> 
<script type="text/javascript"> 
    var map; 
    var marker; 
    function initialize(myAddress, myLat, myLng) { 
     var mapOptions = { 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }  
     map = new google.maps.Map(document.getElementById('||''''|| map_div ||''''||'),mapOptions); 
     geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ '||''''||'address'||''''||': myAddress}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var markerOptions = { 
        map: map, 
        draggable: true, 
        animation: google.maps.Animation.DROP, 
        flat: false, 
        position: results[0].geometry.location 
       } 
       map.setCenter(results[0].geometry.location); 
       marker = new google.maps.Marker(markerOptions); 
       google.maps.event.addListener(marker, '||''''||'dragstart'||''''||', function() {map.closeInfoWindow();}); 
       google.maps.event.addListener(marker, '||''''||'dragend'||''''||', function(event) { 
        document.getElementById("'||lat_item||'").value=event.latLng.lat(); 
        document.getElementById("'||long_item||'").value=event.latLng.lng(); 
       }); 
      } 
      else { 
       document.getElementById("'||map_div||'").innerHTML = "No mapdata found for given address. Did you enter a correct address?"; 
      } 
     }); 
    } 

    google.maps.event.addDomListener(window, ''load'', initialize); 
</script>'; 
-- 

sys.htp.p (a_mapstr); 
EXCEPTION 
    WHEN OTHERS 
    THEN 
     raise_application_error (-20000, 'error in show_map: ' || SQLERRM); 
    END SHOW_LOCATION; 

这是我的PL/SQL调用过程：

SHOW_LOCATION('map_canvas','P20_ISSUE_STREET_NAME','P20_ISSUE_POST_CODE','P20_CITY','P20_LONGITUDE','P20_LATITUDE'); 
sys.htp.p('<script type="text/javascript">'); 
sys.htp.p('initialize('||''''||'Leidscheplein, Amsterdam,NL'||''''||');'); 
sys.htp.p('</script>'); 

，这里是该地区我的html代码：

<div align="center" style="width: 100%; height: 300px;"> 
<div id="map_canvas" style="width: 500px; height: 300px"></div> 

Answer 1

在您的程序代码中：

google.maps.event.addDomListener(window, ''load'', initialize); 

在您的来电：

SHOW_LOCATION('map_canvas','P20_ISSUE_STREET_NAME','P20_ISSUE_POST_CODE','P20_CITY','P20_LONGITUDE','P20_LATITUDE'); 
sys.htp.p('<script type="text/javascript">'); 
sys.htp.p('initialize('||''''||'Leidscheplein, Amsterdam,NL'||''''||');'); 
sys.htp.p('</script>'); 

因此该地区被渲染和程序代码被调用。在这个代码中是一个在文档onload事件中注册的调用。显然，这个文件目前还没有准备好。
其次，你运行一个脚本，再次初始化地图。这个将会实例化，因为它在加载事件之前不会被延迟。
不久之后，文档已经生成并且onload将会触发，不带任何参数。我怀疑这导致了地图的简短外观，然后出现。

尝试通过从过程中除去在onload代码和函数调用后使用此代码（jQuery是安全的，因为顶点包括它在默认情况下，除非你恰巧是在3.2版本等）：

sys.htp.p('<script type="text/javascript">'); 
sys.htp.p('$(document).ready(function(){ initialize("'||'Leidscheplein, Amsterdam,NL'||'"); });'); 
sys.htp.p('</script>');