Google Maps jQuery Plugin with ExpressionEngine

Yesterday Carolyn blogged about a site we did for NCGives. One of their requests was to have the ability to add locations to an ExpressionEngine weblog and have them display on a Google Map. Seemed easy enough until I realized we also had to make external map controls, display content both in the map bubble and on the page, color code the map points, and auto zoom/center the map. I looked around for existing solutions, such as the SL Google Map Extension, but nothing I found did exactly what our client was requesting. I knew that one of our developers, Brian Landau, had experience with Google Maps, so I started talking to him about what we could do.

Initially, I setup a weblog in ExpressionEngine that would take in all of the location information. Aside from the standard content about the location, I put in two text input custom fields for longitude and latitude. Since the client wouldn't know the longitude and latitude coordinates, I put in a link to this website in the field instructions, which converts a standard address.

After the weblog was setup I worked with Brian to get a template outputting markup that would work with his Google Maps plugin. It was easy with ExpressionEngine because I could open a single weblog entries tag and output the variables the plugin could use to create the map. The client wanted to show just the location titles below the map and have them link to the pin point, so JavaScript creates that link and hides the rest of the content. One of the nice things about doing it this way is that even if JavaScript is turned off and you can't see the map, you still get all of the ExpressionEngine content displaying on the page.

See the map at http://ncgives.org/map/

You might notice that the jQuery metadata plugin is using the "data" attribute to grab the id, longitude, latitude, and category (which determines the color of the pin point). Brian is working on adding support for microformats instead using the data attribute, so stay tuned for that.

So if you're looking to put a Google Map in your ExpressionEngine project, check out this blog post about his creation of his jQuery Google Maps plugin over on the Viget Extend blog, or find more information on how to use it on Github.