Mit Google Maps in Coldfusion

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

Frage

Ich versuche, die Google Maps API in einer Coldfusion-Vorlage zu verwenden, die eine Grenze Typ cflayoutarea Behälter ist. Allerdings ist die Karte einfach nicht angezeigt: 

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

Dabei gilt lat und lng sind die Koordinaten in degree.decimal Format. Ich habe auf die Linie aufgespürt, wo GBrowserIsCompatible () irgendwie nie wurde keine weitere Aktion TRUE und somit kehrt gemacht.

Wenn separat die Vorlage geöffnet funktioniert perfekt, aber eben nicht, wenn sie als cflayoutarea Behälter geöffnet. Wer hat Erfahrung in diesem? Irgendwelche Vorschläge werden sehr geschätzt.

Lawrence

Mit CF 8.01, Dreamweaver 8

Versucht, Ihren Vorschlag, aber immer noch nicht funktioniert; Die Karte zeigt nur, wenn der Angerufene Code inline ist. wenn dieser Container Seite jedoch noch aus einer anderen div genannt wurde die Karte verschwindet wieder.

Ich vermute, dass dieses Problem auf die cflayout Behälter verbunden ist; Ich werde die ExtJS doc schauen, um zu sehen, ob es irgendwelche Kabel zu einer Lösung ist.

War es hilfreich?

Lösung

Erfolg! (Art ...)

Schließlich habe es funktioniert, aber nicht in der Art und Weise Adam vorgeschlagen: 

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

Das Ganze muss in derselben Datei enthalten sein oder es würde nicht funktionieren. Mein Verdacht ist, dass die getElementByID Funktion, wie es steht, kann nicht nicht ein Element verweisen, die außerhalb der eigenen Datei. Wenn die div in einer anderen Datei (wie in Adams exmaple), kommt es zu einem undefinierten Karte, dh ein Kartenobjekt erstellt, aber mit nichts drin.

Also habe ich diese Frage denken jetzt auf eine andere Ebene gehoben wird: Wie Sie ein Element verweisen, die innerhalb eines Ajax-Container ist?

Andere Tipps

  

Also habe ich diese Frage denken jetzt auf eine andere Ebene gehoben wird: Wie verweisen Sie auf ein Element, das in ein Ajax-Container

?

Es sollte möglich seine Referenz ein Element über AJAX geladen - nur nicht, bis das Element auf dem Bildschirm ist (also nicht beim Laden der Seite). Es sieht aus wie getMap () löst alles. (Ist das richtig?)

Versuchen Sie folgendes: Nehmen Sie genau das, was Sie als Inline-Inhalte für die Map Registerkarte, und es der Inhalt map_content.cfm machen; und anstelle von Körper onload mit dem Ereignis auszulösen, schreiben Sie es inline, nachdem die div definiert ist: 

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

Vielleicht ist der Layout-Bereich hat nicht das Recht, Stil . Ich glaube, Sie haben die map_canvas a

geben 
position: absolute

oder 

position: relative

Das ist nur eine Vermutung.

CFLayoutArea wird ein neuer Tag AJAX hinzugefügt mit Coldfusion Version 8 (neben Tags wie CFWindow, CFDiv usw.)

Im AJAX belasteten Inhalten irgendeiner diese neuen Tags, externe JavaScript muss von der Seite enthält, enthalten sein. In Ihrem Fall, das wäre die Seite, die den -Tag enthält.

Versuchen Sie etwas wie folgt aus:

in index.cfm (oder was auch immer Ihre enthält Datei ist): 

<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 (Inhalt Ihrer Karte CFLayout tab): 

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top