Viget Inspire

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.