Utilisation de Google Maps dans ColdFusion

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

Question

J'essaie d'utiliser l'API Google Maps dans un modèle ColdFusion qui est un conteneur cflayoutarea de type bordure. Cependant, la carte ne s'affiche tout simplement pas: 

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

où lat et lng sont les coordonnées au format degré.décimal. J'ai tracé jusqu'à la ligne où GBrowserIsCompatible () en quelque sorte ne retourne jamais TRUE et aucune action supplémentaire n'a donc été entreprise.

S'il est ouvert séparément, le modèle fonctionne parfaitement mais ne fonctionne pas lorsqu'il est ouvert en tant que conteneur cflayoutarea. Quelqu'un a de l'expérience dans ce domaine? Toute suggestion est très appréciée.

Lawrence

Utilisation de CF 8.01, Dreamweaver 8

J'ai essayé votre suggestion mais cela ne fonctionne toujours pas; la carte ne s'affiche que lorsque le code de l'appelant est en ligne. Toutefois, si cette page de conteneur a été appelée depuis un autre div, la carte disparaîtra à nouveau.

Je soupçonne que ce problème est lié au conteneur cflayout; Je vais regarder dans la documentation d'Extjs pour voir s'il y a des pistes pour une solution.

Était-ce utile?

La solution

Succès! (en quelque sorte ...)

Enfin, cela a fonctionné, mais pas comme suggéré par Adam: 

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

Le tout doit être contenu dans le même fichier, sinon cela ne fonctionnerait pas. Je soupçonne que la fonction getElementByID, dans sa version actuelle, ne peut pas faire référence à un élément situé en dehors de son propre fichier. Si la div se trouve dans un autre fichier (comme dans l’exemple d’Adam), il en résulte une carte non définie, c’est-à-dire qu’un objet de carte est créé mais qu’il ne contient rien.

Donc, je pense que cette question est maintenant élevée à un niveau différent: comment référencez-vous un élément qui se trouve dans un conteneur ajax?

Autres conseils

  

Donc, je pense que cette question est maintenant élevée à un niveau différent: comment référencez-vous un élément qui se trouve dans un conteneur ajax?

Il devrait être possible de référencer un élément chargé via AJAX - mais seulement tant que l'élément n'est pas à l'écran (donc pas au chargement de la page). Il semble que getMap () déclenche tout. (Est-ce vrai?)

Essayez ceci: Prenez exactement ce que vous avez en tant que contenu en ligne pour l'onglet Carte, et faites-en le contenu de map_content.cfm; then au lieu d'utiliser body onload pour déclencher l'événement, écrivez-le en ligne après la définition de la div: 

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

Peut-être que la zone de présentation n'a pas le style approprié. Je pense que vous devrez peut-être donner à map_canvas un 

position: absolute

ou 

position: relative

Ce n'est qu'un pressentiment.

CFLayoutArea est une nouvelle balise AJAX ajoutée à ColdFusion version 8. (En plus des balises telles que CFWindow, CFDiv, etc.)

Dans le contenu chargé en AJAX de l'une de ces nouvelles balises, du code JavaScript externe doit être inclus à partir de la page qui le contient. Dans votre cas, ce serait la page qui comprend le & Lt; cflayout & Gt; tag.

Essayez quelque chose comme ça:

dans index.cfm (ou quel que soit votre fichier contenant): 

<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 (contenu de votre carte, onglet CFLayout): 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top