Usando Google Maps en ColdFusion

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

Pregunta

Estoy intentando utilizar la API de Google Maps en una plantilla de ColdFusion que es un contenedor cflayoutarea de tipo borde.Sin embargo, el mapa simplemente no 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>"

donde lat e lng son las coordenadas en formato grado.decimal.He rastreado hasta la línea donde GBrowserIsCompatible() de alguna manera nunca devuelve VERDADERO y, por lo tanto, no se tomaron más medidas.

Si se abre por separado, la plantilla funciona perfectamente, pero no cuando se abre como contenedor cflayoutarea.¿Alguien tiene experiencia en esto?Cualquier sugerencia es muy apreciada.

lorenzo

Usando CF 8.01, Dreamweaver 8

Probé tu sugerencia pero aún no funciona;el mapa solo se muestra cuando el código de llamada está en línea.Sin embargo, si se llamó a esta página contenedora desde otro div, el mapa desaparece nuevamente.

Sospecho que este problema está relacionado con el contenedor cflayout;Buscaré el documento Extjs para ver si hay alguna pista que conduzca a una solución.

¿Fue útil?

Solución

¡Éxito!(algo así como...)

Finalmente lo hizo funcionar, pero no de la manera que Adam sugirió:

<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>

Todo debe estar contenido en el mismo archivo o no funcionará.Mi sospecha es que la función getElementByID, tal como está, no puede hacer referencia a un elemento que está fuera de su propio archivo.Si el div está en otro archivo (como en el ejemplo de Adam), da como resultado un mapa indefinido, es decir, se crea un objeto de mapa pero sin nada en él.

Entonces creo que esta pregunta ahora se eleva a un nivel diferente:¿Cómo se hace referencia a un elemento que está dentro de un contenedor ajax?

Otros consejos

Entonces creo que esta pregunta ahora se eleva a un nivel diferente:¿Cómo se hace referencia a un elemento que está dentro de un contenedor ajax?

Debería ser posible hacer referencia a un elemento cargado a través de AJAX, pero no hasta que el elemento esté en la pantalla (por lo tanto, no al cargar la página).Parece que getMap() activa todo.(¿Está bien?)

Prueba esto:Tome exactamente lo que tiene como contenido en línea para la pestaña del mapa y conviértalo en el contenido de map_content.cfm; entonces en lugar de usar body onload para activar el evento, escríbalo en línea, después de definir el div:

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

Quizás el área de diseño no tenga el derecho estilo.Creo que es posible que tengas que darle un toque al map_canvas.

position: absolute

o 

position: relative

Eso es sólo una corazonada.

CFLayoutArea es una nueva etiqueta AJAX agregada con la versión 8 de ColdFusion.(Además de etiquetas como CFWindow, CFDiv, etc.)

Dentro del contenido cargado con AJAX de cualquiera de estas nuevas etiquetas, se debe incluir JavaScript externo desde la página que las contiene.En su caso, esa sería la página que incluye la etiqueta <cflayout>.

Pruebe algo como esto:

en index.cfm (o cualquiera que sea el archivo que lo contiene):

<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 (contenido de la pestaña CFLayout de su 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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top