Adding Google Streetview to ColdFusion CFMAP

This post is more than 2 years old.

A reader asked if it was possible to integrate Google's StreetView API with CFMAP. Turns out this was rather simple once you read the docs. Here is a pretty simple example to get you started.

First, I'm going to create a page with a simple map on it and a cfajaxonload to run my init function when everything is done loading.

<html>

<head> <script>

function init() { } </script> </head> <body>

<cfmap centeraddress="Lafayette, LA" zoomlevel="15" name="mainMap">

</body> </html> <cfset ajaxOnLoad("init")>

Nothing here should need much explanation. I've got the map - I've got my ajaxOnLoad, and I've got an empty init function begging to be filled. Now normally I'd slowly add the bits in, but since the code is so simple I'm going to go ahead and now show the final template.

<html>

<head> <script>

function init() { ColdFusion.Map.addEvent("mainMap","click",function(overlay,overlaylnglt) { address = arguments[arguments.length-1]; var loc = new GLatLng(address.lat(),address.lng()); panoramaOptions = { latlng:loc }; var myPano = new GStreetviewPanorama(document.getElementById("streetDiv"), panoramaOptions); }); } </script> </head> <body>

<cfmap centeraddress="Lafayette, LA" zoomlevel="15" name="mainMap">

<div id="streetDiv" style="width:500px;height:500px"></div>

</body> </html> <cfset ajaxOnLoad("init")>

So what changed? I begin by adding an event handler for my map. I can do it via the native Google Map functions or use the ColdFusion.Map.addEvent API as a wrapper. This is where things got slightly weird. Turns out you normally get sent two arguments - the overlay you clicked on (if any), and the location. However in my testing I would get three arguments when I clicked on a marker. The argument we care about is the location and that's always last so thats why I use the length of arguments to get it into a variable. This location object has longitude and latitude values I can grab to to create a proper Google Long/Lat object. Once done, I set this into an object and create a new GStreetviewPanorama. Notice I tell it to use a new DIV I created. This DIV will show the street view. You must include a height and width for this div. Obviously Google's street view supports other options, but for quick and dirty you can't beat how darn simple that is. You can view a demo of this by clicking the button below. In case it isn't obvious, you need to click on the map to load the street view.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Robb Hartzog posted on 2/16/2011 at 4:17 AM

ColdFusion never stops amazing me with how it makes things so simple, great example.

Only thing I ran into is not knowing about the Google Map API Key. A search turned up that you had to register for one at http://code.google.com/apis... and then stick the key in the Settings section of the CF Administrator. Thought i'd point it out just in case anyone else hasn't used this before.

Comment 2 by Misty posted on 2/20/2011 at 9:17 AM

Hi Ray! Does this StreetView Works Only for US and Canada and No Other Country

Comment 3 by Raymond Camden posted on 2/20/2011 at 9:58 AM

I'm not aware of any such restrictions. Did you check the docs?

Comment 4 by Misty posted on 2/20/2011 at 9:40 PM

Hi, There in the docs there is no such information provided about country restrictions

Comment 5 by Raymond Camden posted on 2/20/2011 at 9:43 PM

Then ... I guess it's ok? Not quite sure what you are asking now. :) If the docs don't say there is a country restriction, then there probably is not.

Comment 6 by ja posted on 8/6/2011 at 1:01 AM

Ray, I'm really making good use of all your varied code examples..
Currently I'm wanting to add this google map/streetview to my jQM site:
- I'm using the "Collaspible Block" on page two of my site to show a Customers Details
- Here is a picture of my page 2 (details) http://cerberus.clearwave.c...
- I named one of the blocks "Map", and added your code to the block (see below)
- I also added your javascript to the top of the page, but unsure where to place the "<cfset ajaxOnLoad("init")>" part?
-----------------------------------
<div data-role="collapsible" data-collapsed="true">
<h3>Map</h3>
<cfoutput>#rsTicketDetail.custAddress#
<cfmap centeraddress=">#rsTicketDetail.custZip#" zoomlevel="15" name="mainMap"></cfoutput>
<div id="streetDiv" style="width:350px;height:250px"> </div>
</div>
--------------------------------------
Can you give some tips on using Maps (cfmap or just google) in jQuery Mobile (jQM).. such as..
- Where is the best place to place the cfquery? (At the top of the page, or right before the data-role?
- When does jQM run the query? During page load, or when the element is clicked on? (wondering about performance)

Thanks, ja

Comment 7 by Raymond Camden posted on 8/6/2011 at 5:33 PM

Well you've got a few things going on here. But - I'd recommend NOT using cfmap with JQM. You probably can do it, but cfmap spits out it's own JS and when you are using any other JS, you may get conflicts. Not saying you will, but in general, I don't recommend using any of CF's front end stuff with other, very customized, JS.

So that being said, I'd switch to using Google Maps natively. I've got a few blog posts on it here. It's not hard at all. (More work than just "cfmap" of course, but easily doable.)

Get it running that way.

As to your specific question about ajaxOnLoad, while I don't recommend using it, there is something similar for JQM, and that's the various page loading events.

Hope this helps a bit.

I've done posts on Google's Static Map API and JQM before, but not one on the "real" Map API and JQM. (Well, 'real' isn't a fair thing to say - the static map api is pretty darn nice.) I'll see if I can write something up.

You know, the more I think about it, the more I think the static API is better for mobile anyway. But - this gives me a reason to play with the full API and JQM.

Comment 8 by Raymond Camden posted on 8/6/2011 at 7:18 PM
Comment 9 by ja posted on 8/8/2011 at 1:33 AM

Thanks for the post(s)..
Ofcourse, as most of us here have, we (I) have been making "full-use" of your "google map code" examples with CF. And ofcourse you make me look better than I really am as always..

but anyway in my particular app I need to make full use of google map v3 so a dispatch tech can 1) view the address, 2) see directions to the address from his geolocation, 3) see streetview if available, etc.. I did find this link that really looks good, plan to give it a whirl.. http://jquery-ui-map.google...

Your examples are priceless to me in that you always show both the CF query interaction ("how" you got there..) as well as the resulting page(s).

Comment 10 by Raymond Camden posted on 8/9/2011 at 1:23 AM

Thanks for the kind words. I did another example here:

http://www.coldfusionjedi.c...

Comment 11 by ja posted on 8/9/2011 at 1:51 AM

I have taken your example (on another page), and the sample at googlecode, and customized them to my application..
- My page displays and the To & From fields are filled out fine..
- But the Map display is blank
- And the Get Directions button does nothing at all?

Here are links to my page image sample and code text:
- http://cerberus.clearwave.c... (their code works fine!)
- http://cerberus.clearwave.c... (their code w/my changes won't work?)
- http://cerberus.clearwave.c... (here is my code)

Comment 12 by Raymond Camden posted on 8/9/2011 at 2:01 AM

Well you want to work on one issue at a time - the map display. Is this online where we can run it? Seeing the code isn't quite enough.

Comment 13 by ja posted on 8/9/2011 at 2:09 AM

sadly, no.. What's interesting is I can make their From & To boxes "Dynamic" using cfquery, and the page works fine..

If you compare the two, I did delete out all of their "meta tags, links to more samples, etc"

Comment 14 by Raymond Camden posted on 8/9/2011 at 2:09 AM

Can you post the changes then perhaps?

Comment 15 by Raymond Camden posted on 8/9/2011 at 2:12 AM

I'd also recommend making use of console.log to debug stuff.

For example, right after the pageshow line:

$('#gmap-3').live("pageshow", function() {
console.log("in pageshow for my thing");

Comment 16 by ja posted on 8/9/2011 at 2:18 AM

Here is the original demo page from googlecoder:
- http://cerberus.clearwave.c...

Notice the following changes:
- Line 47 : added in my cfquery
- Line 97 : added in my dynamic To: value

This page runs fine displaying both the Map & the Directions

Comment 17 by ja posted on 8/9/2011 at 6:31 PM

Ray, Here is my console.log results when I click the "Get Directions" button:
- http://cerberus.clearwave.c...

Comment 18 by Raymond Camden posted on 8/9/2011 at 6:40 PM

Looks like Google's libraries are not loading. Switch to your net panel and see.

Comment 19 by Raymond Camden posted on 8/9/2011 at 6:41 PM

Specifically, your issue is in this block I believe:

<script src="http://www.google.com/jsapi..." type="text/javascript"></script>
<script type="text/javascript">
google.load("maps", "3", {'other_params':'sensor=true'});
google.load("jquery", "1.5");
</script>

Comment 20 by ja posted on 8/9/2011 at 6:47 PM

Here is my console.log2 Network results Tab when I click the "Get Directions" button:
- http://cerberus.clearwave.c...
- Should there be more listed here?

Comment 21 by Raymond Camden posted on 8/9/2011 at 6:49 PM

That's the same URL.

It would be a _lot_ easier if I could run this. I know you didn't want to post the URL here, but if you want to privately share the site with me, I'd be willing to check there.

Comment 22 by ja posted on 8/9/2011 at 7:00 PM

Ray, That link should have been: http://cerberus.clearwave.c...
- Currently the site is on a VM Server via a local IP, behind our FW..
- I’d love to let you take a look if I knew of a way to allow it..
- One thing that still bugs me is that the actual Demo here: http://jquery-ui-map.google... works fine with my cfquery & dynamic “To: value?
- If you look at their demo and notice the link that shows up for their “Get Directions” button? (http://jquery-ui-map.google... Maybe this is part of the issue?

Comment 23 by Raymond Camden posted on 8/9/2011 at 7:06 PM

In the network tab, you want to look at Scripts, or Other. Google's library uses DOM injection (I believe) to dynamically load other scripts. Check em both - look for errors.

Sorry - your last two bullets don't make sense to me. Your 3rd bullet says the actual demo works, then you say "works fine with my cfquery ..." - can you rewrite that? I can't parse what you are saying exactly.

As for directions - again - let's ignore that till we get the map to show up at all. I truly think your issue is with the google.load comments.

Comment 24 by ja posted on 8/9/2011 at 7:59 PM

Sorry about the confusion here..

- Here is the correct link to googles Demo: http://jquery-ui-map.google... (works fine ofcourse)
- I can then copy that sample demo into my Dreamweaver site, add in my "cfquery statement", and replace the Static "To box" value with my Dynamic data, preview the page in Chrome, and the Map will display just fine using my values from my cfquery!

The console is now hanging at: http://cerberus.clearwave.c... (when I click on the Map link?) can't get to the other tabs?

Comment 25 by ja posted on 8/11/2011 at 12:18 AM

Ray, I'm ashamed to admit that I found the trouble and it was fairly simple..
- I needed to add the data-ajax="false" attribute to my href (since I'm calling a new page)
- Now that the JQM code is not interfering, the "acctNum" is passed to the p6.cfm map page displaying the map with the dynamic data. Even the Directions work!

- Here's my updated code on my p2.cfm page..
- <div data-role="collapsible" data-collapsed="true">
<h3>Map</h3>
<cfoutput><p>#rsTicketDetail.mapAddress#</p></cfoutput>
<cfoutput><a data-ajax="false" href="p6.cfm?id2=#rsTicketDetail.acctNum#">Map</a></cfoutput>
</div>

Thanks again for the help..
ps: note to self: "what other cool CF application/tools/training/code snippets can I pilfer from planet-ray.."

Comment 26 by Raymond Camden posted on 8/11/2011 at 1:03 AM

Very happy it worked out for you.

Comment 27 by Rookie posted on 9/7/2011 at 2:57 PM

I think the Google guys must have changed something cause it is not working any more.. Unless, it is just a temporary thing, but the main street view site seems to work.. The coldfusion example was working fine until a few days ago, but today I am getting a black square box every time I try it. Any thoughts?

Comment 28 by Raymond Camden posted on 9/8/2011 at 5:57 AM

I think I found out why.

https://groups.google.com/f...

Notice they talk about version 2.s. If you look at the scripts output by CF, we are using 2.x, which folks specifically say is still broken.

I'd just switch to using Google Maps natively. I've got a few blog posts on that.

Comment 29 by rookie posted on 9/8/2011 at 1:51 PM

the google forum guys have the following suggestion: "please use 2 or 2.s for your production sites, and not 2.x".

How do we set this up in our coldfusion examples?

Also, I will check out the native option you suggested.

Cheers

Comment 30 by Raymond Camden posted on 9/8/2011 at 2:50 PM

That's the thing - you can't. CF spits out the JS libraries itself. You can't control it.

Comment 31 by rookie posted on 9/9/2011 at 4:35 PM

Well I didn't do anything and both my code and your demo are working fine again. The Google guys must have fixed the bug! The good thing that came out of this, is that now I also know how to use the maps natively. Keep up the good work, love your blog. May the Flex be with you!

Comment 32 by Mike posted on 9/16/2011 at 3:16 AM

is this broken again - streetview doesnt seem to show when i run the code her :(

Comment 33 by Raymond Camden posted on 9/16/2011 at 6:03 AM

Working for me.