Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
ColdFusion is about making hard things easy. And this is just one more example of ColdFusion making it almost too easy, to add very powerful functionality to your applications. While getting a simple Google Map on to a page has never been terribly difficult, ColdFusion makes it possible in just one line of code, and then goes on to make a completely trivial to add markers and other advanced functionality to your Google Maps. Now the first thing you need before you start using Google Maps is a Google Maps API key. So to get that we are going, to go to Safari, and I will open a new tab and go to google.com/apis/maps/signup.html.
On this page you will get some information about Google Maps and you will need to agree to their terms of service. And then provide a website URL that you are going to be using for your application. In this case, we are doing localhost: 8500 and I'll click Generate API Key. And I get a nice long string that I am going to put into my application. I have two different ways I can do this. The first is directly to the ColdFusion Administrator. On the Settings page, if I scroll down to the bottom there is a Google Map API Key field.
And I need to paste API Key in here and click Submit. Every application on the server will then use this Google Map API Key by default. Now an API Key is only good for specific domain, so if you are running multiple domains off the same ColdFusion server, this is not the place to specify it. So I am going to undo and instead go back to CF Builder and in the Chapter8 folder, open Application.cfc. At the top with the rest of our settings, we are going to add, cfset this.googlemapkey=, and put in our Key.
Now this Key will be used for every Google Map on this particular application. So let's get our map running. I am going to go to googlemaps.cfm. And you will see I have a cfmap tag with a centeraddress attribute. And I am just putting the center of the map at the lynda.com offices here in Ventura, California. So let's go to the browser because this doesn't preview well inside CF Builder and let's go to that page. And there we have it. Our Google Map is all ready to use.
It has all the right zoom controls, pan controls. I can switch to Satellite or Hybrid mode. Everything is fully functional with just one line of code. But the default of the map isn't all that pleasant. We're way out here where we can see the entire US whereas I would be rather be closer in. So back in CF Builder, we can start adding additional attributes on to the cfmap tag. The first one I am going to add is our zoomlevel. I will set the zoomlevel to 10. And I am also going to set some markerwindowcontent.
Now the markerwindowcontent is what shows when I click on the centeraddress marker. So we will say 'This is the lynda.com office.' Now if I go back to Safari and reload this page, you can see I am now zoomed in at a nice level. And if I click on the center marker, it says, 'This is the lynda.com office.' Now I can put whatever HTML I want in here, so I could put a picture of the lynda.com office and a little bit of description of how to get here. And there is more we can do with the cfmap tag as well.
For example, I go over here and let's add an overview to the map and let's show a border around the map and let's put a title on it. Now if I go back to Safari and reload, I will now get a nice title at the top, directions for Dan and now I have my little overview paned done here where I can scroll around. And I can collapse that overview into the corner if I need to.
But I can do more than just drop a single point on the map. Let's go back to CF Builder and we I am going to change our cfmap tag and add a new tag, cfmapitem. And we are going to say that its address is Oxnard, CA. And then we are also going to show some markerwindowcontent for that one as well. And I will close my tag, switch back to Safari and reload.
We now have my center marker and I also have a marker here in Oxnard. And if I click on that one I can see 'Your hotel is in Oxnard.' So believe it or not this is just scratching the surface of what you can do with Google Maps. ColdFusion adds hooks to allow you to set bind attributes on markers to fill content, it allows you to specify custom marker colors and icons, and a host of other features.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101765 Viewers
61 Video lessons · 88526 Viewers
71 Video lessons · 72334 Viewers
56 Video lessons · 104054 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.