Highlighted

Using Google maps within a .cfc

Community Beginner ,
Jun 25, 2019

Copy link to clipboard

Copied

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.

TOPICS
Advanced techniques

Views

716

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using Google maps within a .cfc

Community Beginner ,
Jun 25, 2019

Copy link to clipboard

Copied

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.

TOPICS
Advanced techniques

Views

717

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 25, 2019 0
Adobe Community Professional ,
Jun 25, 2019

Copy link to clipboard

Copied

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 (server troubleshooter, carehart.org)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Community Beginner ,
Jun 25, 2019

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Advocate ,
Jun 25, 2019

Copy link to clipboard

Copied

Did you read Charlie's second paragraph?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Community Beginner ,
Jun 25, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
Jun 25, 2019

Copy link to clipboard

Copied

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 (server troubleshooter, carehart.org)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Community Beginner ,
Jun 25, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
Jun 25, 2019

Copy link to clipboard

Copied

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 (server troubleshooter, carehart.org)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Community Beginner ,
Jun 25, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Community Beginner ,
Jun 26, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

Also works without the cfoutput!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

Could you send me yourmap settings by PM?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Community Beginner ,
Jun 26, 2019

Copy link to clipboard

Copied

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

Is yours in a .CFC component?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
Community Beginner ,
Jun 26, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0
BKBK LATEST
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2019 0