Web Standards, JavaScript, and Kittens

Menu

Simple introduction to Google Maps Part 2 – Markers

Back in February I wrote a simple introduction to using Google Maps. ColdFusion makes this relatively easy, but there are times when you may want to use the Google Map service natively. It’s also important to note that CFMAP makes use of the previous version of Google Maps. If you want to make use of the new hotness, you have to do it “by hand.” As my blog post (hopefully) showed, this isn’t terribly difficult at all. I thought I’d post a sequel that dealt with another part of the puzzle – markers. ColdFusion makes this really easy as well with the cfmapitem tag. Here’s what I found when digging into the docs.

Google groups markers into an area they called overlays. Overlays include:

Markers (duh)

Lines

Polygons (you see – Math is important)

Circles

and finally – “Info Windows”

The last item, “Info Windows”, is actually something you have already seen if you’ve played with cfmap. When you create a marker with cfmapitem and supply a value for markerwindowcontent, you are actually creating both a marker and an Info Window. The info window is the little “cartoon voice” window that pops up when you click on the marker. Let’s look at a simple example that creates a map and then puts a marker on top of it:

I create the marker object with with a position (a longitude and latitude – we’ve all memorized our long/lat values, right?) and a title. There’s more options to the marker object, but this will give you a basic marker with a title. The setMap function simply allows me to set the map for the marker. You can also provide it when you create the marker:

First – I added a query on top to get order information from the database. This includes address information for each order. Now look into our JavaScript. Because my order data isn’t geocoded, I have to ask Google to geocode the data for me. I loop over each order and request such data and when I get it back, I use it to create a marker. Note the title includes a bit of information about the order itself. Not terribly complex but closer to a real application. You can see this one here: http://www.coldfusionjedi.com/demos/april132011/test2.cfm In case it isn’t obvious, the title for the marker shows on mouse over.

Ok – so what about the cute little info windows? Let’s look at our next example:

I’m going to focus on what’s new here and that’s the code right after the marker creation. You can see I make a new infowindow object. The content here is totally arbitrary, but I figured order details would be nice. Finally we add a click event to make it open when the marker is clicked. Still relatively simple, right? You can run this one here: http://www.coldfusionjedi.com/demos/april132011/test3.cfm

Time for our final demo. What spurred this blog post was a request from someone for the ability to center a map based on a click elsewhere in the page. Here’s how I solved that – and note – there is probably a much nicer way to do this.

So first a quick note – I modified my query to not get orderid 4. That order was consistently not geolocating so I thought i’d just remove it. Right away you may notice something new – I’ve created an array called markers and a variable called lastinfowindow. The reason why for this will become evident real quick like.

Scroll down a bit to where I create the marker. I wanted a way to associate the order ID with the marker (and again, why will be made clear), so I kinda cheated a bit. Objects in JavaScript can be manipulated much like CFCs in ColdFusion. I can add an arbitrary value – as I’ve done here – to store the order id. That kind of bugs me. I could have create a new object instead and stuffed the marker as one key and the value as another – but this works. I also store a copy of the infowindow object. Finally this is appended to my array. The end result is that I’ve now got a global object that contains a reference to all my markers. Apparently (and I could be wrong), Google Maps do not provide an easy way to get all the markers in a map. From what I see they recommend exactly this approach – storing them within an array.

So – next up is a click handler defined using jQuery syntax. If you look down a bit you can see I’m outputting the orders in a set of P blocks. I’ve asked jQuery to set up a click handler on those paragraphs. When you click, I grab the order id (I love data-* properties!) and then look for it within my markers array. If I find it – I first see if I need to close an existing infowindow. I then pan the map to the location and open the infowindow. All in all – rather simple? If you want to demo this, please be aware of the console.log messages I used to debug. Use in a Chrome browser or Firebug-enabled Firefox.

Post navigation

Sponsors

The Author

I'm Raymond Camden, a developer advocate for IBM. My primary focus is on MobileFirst, hybrid mobile development, and client-side technologies. If you would like me to speak to your group, just drop me a line.