Usando o Google Maps no ColdFusion

StackOverflow https://stackoverflow.com/questions/80278

Pergunta

Estou tentando usar a API do Google Maps em um modelo ColdFusion que é um contêiner cflayoutarea do tipo borda.No entanto, o mapa simplesmente não aparece:

<cfif isdefined("url.lat")>
    <cfset lat="#url.lat#">
    <cfset lng="#url.lng#">
</cfif>    
<head>
<script src=                        "http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxx" type="text/javascript">
        function getMap(lat,lng){       
            if (GBrowserIsCompatible()) {        
                var map = new GMap2(document.getElementById("map_canvas"));
                var pt= new GLatLng(lat,lng);
                map.setCenter(pt, 18,G_HYBRID_MAP);      
                map.addOverlay(new GMarker(pt));
            }    
        }    
</script>
</head>  
<cfoutput>
<body onLoad="getMap(#lat#,#lng#)" onUnload="GUnload()">
    Map:<br>
    <div id="map_canvas" style="width: 500px; height: 300px"/>
</body>
</cfoutput>"

onde lat e lng são as coordenadas em formato grau.decimal.Rastreei até a linha onde GBrowserIsCompatible() de alguma forma nunca retorna TRUE e, portanto, nenhuma ação adicional foi tomada.

Se aberto separadamente, o modelo funciona perfeitamente, mas não quando aberto como um contêiner cflayoutarea.Alguém tem experiência nisso?Qualquer sugestão é muito apreciada.

Lourenço

Usando CF 8.01, Dreamweaver 8

Tentei sua sugestão, mas ainda não funciona;o mapa só mostra quando o código de chamada está embutido.No entanto, se esta página contêiner for chamada de outro div, o mapa desaparecerá novamente.

Suspeito que esse problema esteja relacionado ao contêiner clayout;Vou procurar o documento Extjs para ver se há alguma pista para uma solução.

Foi útil?

Solução

Sucesso!(tipo de...)

Finalmente consegui funcionar, mas não da maneira que Adam sugeriu:

<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxx" type="text/javascript"></script>
<script type="text/javascript">
    getMap=function(lat,lng){               
        if (GBrowserIsCompatible()){
            var map = new GMap2(document.getElementById("map_canvas"));
            var pt = new GLatLng(lat,lng);
            map.setCenter(pt, 18,G_HYBRID_MAP);      
            map.addOverlay(new GMarker(pt));  
        }    
    }
</script>  

 <cflayout name="testlayout" type="border">
    <cflayoutarea name="left" position="left" size="250"/>
     <cflayoutarea name="center" position="center"> 
            <!--- sample hard-coded co-ordinates --->
        <body onLoad="getMap(22.280161,114.185096)">
        Map:<br />
        <div id="map_canvas" style="width:500px; height: 300px"/>
        </body>
      </cflayoutarea> 
<!---       <cflayoutarea name="center" position="center" source="map_content.cfm?lat=22.280161&lng=114.185096"/> --->
</cflayout>

A coisa toda deve estar contida no mesmo arquivo ou não funcionaria.Minha suspeita é que a função getElementByID, tal como está, não pode deixar de fazer referência a um elemento que está fora de seu próprio arquivo.Se o div estiver em outro arquivo (como no exemplo de Adam), isso resulta em um mapa indefinido, ou seja, um objeto de mapa é criado, mas sem nada nele.

Então acho que esta questão agora foi elevada a um nível diferente:como você faz referência a um elemento que está dentro de um contêiner ajax?

Outras dicas

Então acho que esta questão agora foi elevada a um nível diferente:como você faz referência a um elemento que está dentro de um contêiner ajax?

Deveria ser possível fazer referência a um elemento carregado via AJAX - mas não até que o elemento esteja na tela (portanto, não no carregamento da página).Parece que getMap() aciona tudo.(Isso está certo?)

Experimente isto:Pegue exatamente o que você tem como conteúdo embutido para a guia do mapa e torne-o o conteúdo de map_content.cfm; então em vez de usar body onload para disparar o evento, escreva-o inline, depois que o div for definido:

<body>
    Map:<br />
    <div id="map_canvas" style="width:500px; height: 300px"/>
    <script type="text/javascript">
        getMap(22.280161,114.185096);
    </script>
</body>

Talvez a área de layout não tenha o direito estilo.Eu acho que você pode ter que dar ao map_canvas uma

position: absolute

ou 

position: relative

Isso é apenas um palpite.

CFLayoutArea é uma nova tag AJAX adicionada com o ColdFusion versão 8.(Além de tags como CFWindow, CFDiv, etc.)

Dentro do conteúdo carregado em AJAX de qualquer uma dessas novas tags, o JavaScript externo deve ser incluído na página que as contém.No seu caso, seria a página que inclui a tag <cflayout>.

Tente algo assim:

em index.cfm (ou qualquer que seja o arquivo que contém):

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxx" type="text/javascript">
    function getMap(lat,lng){               
        if (GBrowserIsCompatible()) {        
            var map = new GMap2(document.getElementById("map_canvas"));
            var pt= new GLatLng(lat,lng);
            map.setCenter(pt, 18,G_HYBRID_MAP);      
            map.addOverlay(new GMarker(pt));
        }    
    }
</script>
<cflayout>...</cflayout>

map.cfm (conteúdo da guia CFLayout do seu mapa):

<cfif structKeyExists(url, "lat")>
    <cfset variables.lat = url.lat />
    <cfset variables.lng = url.lng />
</cfif>    
<head></head>  
<cfoutput>
    <body onLoad="getMap(#variables.lat#,#variables.lng#)" onUnload="GUnload()">
        Map:<br>
        <div id="map_canvas" style="width: 500px; height: 300px"/>
    </body>
</cfoutput>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top