Using Google maps within a .cfc

Report · Jun 25, 2019

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.

Report · Jun 25, 2019

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.

/Charlie (troubleshooter, carehart.org)

Report · Jun 25, 2019

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.

Report · Jun 25, 2019

Did you read Charlie's second paragraph?

Report · Jun 25, 2019

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>

Report · Jun 25, 2019

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.

/Charlie (troubleshooter, carehart.org)

Report · Jun 25, 2019

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

Report · Jun 25, 2019

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.

/Charlie (troubleshooter, carehart.org)

Report · Jun 25, 2019

It works fine in a .cfm within a <Cfsavecontent

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

Report · Jun 26, 2019

Try this:

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

Report · Jun 26, 2019

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

Report · Jun 26, 2019

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?

Report · Jun 26, 2019

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

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

Report · Jun 26, 2019

I tested with the following and it works:

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

Report · Jun 26, 2019

Also works without the cfoutput!

Report · Jun 26, 2019

Could you send me yourmap settings by PM?

Report · Jun 26, 2019

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

Is yours in a .CFC component?

Report · Jun 26, 2019

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

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

</cffunction>

</cfcomponent>

maptest.cfm

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

Report · Jun 26, 2019

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

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

showProperty(#url.prop_id#)

});

</script>

</cfoutput>

Report · Jun 26, 2019

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