Using Google maps within a .cfc

[coder1957**]

I am rendering web pages exclusively using AJAX content. 

One "object" I cannot get to work is Google maps.

Everything else is contained within a .cfc component and cfsavecontent. 

Using this method I can only put a static map image.

Anyone know if / how to insert a dynamic map using this method?

Either using CFMAP or a javascript / jquery equivalent.  I've tried both.

[Charlie Arehart]

Have you tried it first in a cfm (in such a cfsavecontent)? I can imagine why it may not work, and perhaps taking the cfc out of the equation will help you better find the problem.

If it doesn't. can you offer a simple few line standalone demo, first working without cfsavecontent? Then show using it? I realize you won't want to share your google maps api key.

[coder1957**]

Absolutely - I HAVE tried it in a standalone .cfm

But that's "old school". 

Works FINE

It's simply a matter of it not working within a cfsavecontent or within a component. 

[EddieLotter]

Did you read Charlie's second paragraph?

[coder1957**]

So that would be:

<cfmap name="gmap_nearby"     centerlatitude="#chapter.google_lat#"

        centerlongitude="#chapter.google_long#"

doubleclickzoom="true"

    scrollwheelzoom="true"

    showscale="false"

    tip="#application.chapters_r_called_singular# Map"

zoomlevel="#chapter.google_zoom#"

showcentermarker="true"

showmarkerwindow="true"

height="470"

width="#map_wid#"

overview="true"

>

and the exact same thing wrapped up in <cfsavecontent tags?

or replace <cfmap with (although now I look at this code months later not convinced it is for an interactive map -

where is that person? )

<div id="map" style="display:none">

<img border="0" height="400" width="600" src="https://maps.googleapis.com/maps/api/staticmap?center=#house.google_lat#,#house.google_long#&zoom=#h...">

</div>

[Charlie Arehart]

Please help us help you.

First, I understand that doing it in a cfm is "old school". I'm just trying to find where things break.

Second, it's not clear if you are saying that it DOES or DOES NOT work for you when in a cfm and also WITHIN a cfsavecontent. Can you clarify? For instance, if it fails when in a cfm AND in a cfsavecontent, then we know THAT's the issue (not about being in a cfc).

Third, I had asked if you could provide a standalone example. You just offered us a code fragment, with all your vars names. Please don't make us go find what values would work for those. When I said standalone, I meant an example that any of us could run, simply by plugging in our own maps API key. (I don't use the feature enough to know I have one. But I meant if someone else reading along may also have one and be willing to try things out.)

But again, please don't JUST give us the code. Please answer what I ask about in the "second" point above. That may save us time from even trying to get it working. Or it would direct our attention in where to look to understand the problem.

[coder1957**]

Sorry I wasn't clear. 

In a cfm template <cfmap > works fine.

When adding <cfmap > in a <cfsavecontent > within a component in a .cfc file it fails.

The only error I get is a console error ... parseJSON

[Charlie Arehart]

Please read more carefully what I have been writing. I'm sorry if it's not been as brief as you may prefer.

a) what about running it in a cfm AND in a cfsavecontent? you have said it's "ok in cfm", and "not ok in cfsavecontent in a cfc". But I have asked now twice: what if you do it NOT in a CFC but ALSO in a cfsavecontent? I'm trying to help you see if the problem is about being in a cfsavecontent, regardless of whether in a cfc, as was your starting point.

b) If that cfmap in a cfsavecontent DOES somehow work in a cfm but not in a cfc, then we'll cross that bridge next

c) and in that case, again please share a working standalone example of the cfmap, and of the cfsavecontent and what you do with its resulting variable. You may say "it's simple and obvious", but if that was you wouldn't be asking about it, and we'd not have to keep asking you more about it. 🙂

Again, just trying to help, but help us help you.

[coder1957**]

It works fine in a .cfm within a <Cfsavecontent

<cfsavecontent variable="zmap">

<cfmap name="gmap_nearby"     centerlatitude="#map.google_lat#"

        centerlongitude="#map.google_long#"

doubleclickzoom="true"

    scrollwheelzoom="true"

    showscale="false"

    tip=""

zoomlevel="10"

showcentermarker="true"

showmarkerwindow="true"

height="470"

width="800"

overview="true"

>

</cfsavecontent>

<tr><Td colspan="9">#zmap#</td></tr>

[BKBK]

Try this:

<cfsavecontent variable="zmap">

<cfoutput>

<cfmap name="gmap_nearby"     centerlatitude="#map.google_lat#"

        centerlongitude="#map.google_long#"

doubleclickzoom="true"

    scrollwheelzoom="true"

    showscale="false"

zoomlevel="10"

showcentermarker="true"

showmarkerwindow="true"

height="470"

width="800"

overview="true">

</cfoutput>

</cfsavecontent>

<cfoutput>#zmap#</cfoutput>

[BKBK]

Oh, while you're on the subject, it is worth your while to look at

https://cfdocs.org/cfmap

https://static.raymondcamden.com/cfuitherightway/cfmap/index.html

[coder1957**]

The output had no effect except to render the JSON error.

I am looking at Camden's contribution trying to make sense of it ... and where (stupid question???) does the google map key go?

[BKBK]

You have to define the Google-map key in Application.cfc, thus:

<cfset this.googlemapKey="your_key">

Alternatively, set it in the Settings page in the ColdFusion Administrator.

[BKBK]

I tested with the following and it works:

<cfset x=500>

<cfsavecontent variable="myMap">

<cfoutput>

<cfmap name="myTestMap"

centerlatitude="71.094224"

centerlongitude="42.339641"

doubleclickzoom="true"

overview="true"

scrollwheelzoom="true"

showscale="true"

tip="My test Map"

zoomlevel="4"

showcentermarker="true"

showmarkerwindow="true"

height="#x#"

width="#x#"

>

</cfoutput>

</cfsavecontent>

<cfoutput>#myMap#</cfoutput>

[BKBK]

Also works without the cfoutput!

[BKBK]

Could you send me yourmap settings by PM?

[coder1957**]

What is your environment?  CF version??  Windows?  Linux?  Version?

Is yours in a .CFC component?

[BKBK]

ColdFusion 2018 Update 3

Windows 10

I tested the code I gave you earlier in a CFM page as well as by means of a CFC. Both tests succeeded. The CFC test follows:

Maptest.cfc

<cfcomponent>

<cffunction name="displayGoogleMap" >

    <cfargument name="mapName" >

    <cfargument name="centerLatitude" >

    <cfargument name="centerLongitude" >

    <cfargument name="height" >

    <cfargument name="width" >

    <cfargument name="tip" >

    <cfsavecontent variable="myMap">

    <cfmap name="#arguments.mapName#"

        centerlatitude="#arguments.centerLatitude#"

        centerlongitude="#arguments.centerLongitude#"

        doubleclickzoom="true"

        overview="true"

        scrollwheelzoom="true"

        showscale="true"

        tip="#arguments.tip#"

        zoomlevel="4"

        showcentermarker="true"

        showmarkerwindow="true"

        height="#arguments.height#"

        width="#arguments.width#"

    >   

    </cfsavecontent>

    <cfreturn myMap>

</cffunction>

</cfcomponent>

maptest.cfm

<cfoutput>#createobject("component","Maptest").displayGoogleMap('myTestMap',71.094224,42.339641,600,800,'My test Map')#</cfoutput>

[coder1957**]

The difference is I am using Javascript to load the cfc

function showProperty(locID){

var e = new (realty);

var myProp = e.get_map(window.locID);

map.innerHTML=myProp;

}

so as I load the cfm I use a

<cfoutput>

<script>

jQuery(document).ready(function($) {

    showProperty(#url.prop_id#)

});

</script>

</cfoutput>

[BKBK]

coder1957**  wrote

The difference is I am using Javascript to load the cfc

function showProperty(locID){

var e = new (realty);

var myProp = e.get_map(window.locID);

map.innerHTML=myProp;

}

so as I load the cfm I use a

<cfoutput>

<script>

jQuery(document).ready(function($) {

    showProperty(#url.prop_id#)

});

</script>

</cfoutput>

It's unclear to me what's going on here.

to load the cfc...

followed by

so as I load the cfm...

I am lost. Besides, this all seems unnecessary. If you wished to use Javascript, then you could avoid cfmap altogether and use Raymond Camden's example: https://static.raymondcamden.com/cfuitherightway/cfmap/index.html