Join Daniel Short for an in-depth discussion in this video Creating a map with markers, part of ColdFusion 9: AJAX Controls and Techniques.
- View Offline
Now this page gives you some information about what the Maps API is and what you're going to get with your Google Maps API key. There are also some terms of service you should read through. And once you've read through all that, you can agree to their terms and conditions and then enter in the URL for the site that are actually going to be using Google Maps on. In this case, I'm doing all my testing on localhost. So I'll choose localhost and click Generate API Key. If I scroll back up here to the top, I can see here's my API Key. So I need to copy this big long line of text and I have a couple of different ways that I can actually get this key into my application.
The easiest is by adding it to your Application.cfc. So I'll open Application.cfc and up at the top where we've defined all of our application settings, I'll do this.GoogleMapKey= and I'll enter in my API key. So that sets this Google Map Key for my entire application. If I need to set the Map Key on a page -by-page basis, let me just create a ColdFusion page here real quick. We'll call it basicmap. I can do that by using cfajaximport.
I can pass it some params. And right now the only param available is actually the googlemapskey. But it's going to be a structure. And I'll say googlemapkey= and pass in my key. So there are your two ways to go your googlemapskey into your application, one through the app.cfc and one directly on your page. I'm going to delete this one on my page for now, because I have it in my Application.cfc file. And let's start by creating a cfmap. So all I need to create a cfmap is a size for my map and where I want the center of that map to be.
So let's set the size for our map to say 400 pixels tall, 600 pixels wide. And I'm going to set the centeraddress to be Ventura, California. Now this centeraddress can be anything that you could map at maps.google.com. So if you go to maps.google.com, you enter an address and it shows you where it's at, you can enter it in here. The cfmap is actually making the same request of Google as if you were doing it directly from their site.
So let's save our file. Go over to Firefox. And I already have my Chapter 7 folder opened here. We will load basicmap.cfm. And it looks like I've misspelled my attributes. So let's go in here and correct that. I need two s's on address. There we go. I do make mistakes. Reload our page. And there we go. So we now have Ventura, California as the center of our map. Now unfortunately that's way up here. So what I can do to get in closer is to set a zoom level.
So I'll choose zoomlevel. And I'll say 13. That's a pretty good zoom level. Go over here and reload. And now I'm zoomed-in nice and tight on Ventura, California. But this doesn't really tell me what that supposed to be here in Ventura, California. And plus it's kind of in the middle of the city and you don't even know why I'm showing you this information. So let's go back over here and change things up a little bit. Let's put in the lynda.com headquarters address at 4443 Market St.
And let's set some markerwindowcontent. So lynda.com headquarters, hit a break tag, Located at 4443 Market Street, Ventura, California. All right, let's go back and take another look at our map. And we should see our little marker move here when I reload. There we go. It was up here. Now it's down here on Market Street. And if I click on there, I can now see the content that I've typed in for that markerwindowcontent attribute.
And that's all it takes to get a simple map on your page. Make sure you remember to set up a Google Map Key for your site and the rest is as simple as a single cfmap tag. The rest of this chapter is going to cover customizing your maps and giving them a whole lot more power.
- Manipulating and securing container contents
- Debugging AJAX behaviors
- Building UI elements such as accordions and border layouts
- Using rich prompts with cfmessagebox
- Understanding advanced cffileupload
- Sorting and grouping data in grids
- Binding data to form fields
- Creating a map with markers