Getting Google Maps in your CMS

A few weeks ago I finished my first big Google Maps project. My client ‘Gemeente Deurne’ asked me to make an interactive map where they could show their inhabitants where valuable trees where found within the city. I decided to use Google Maps for this project. Gemeente Deurne wanted to show single trees, lines of trees and small forests (shapes). To do this I needed to come up with a way to store this information in the database. In this post I want to show you how I did this.

After some testing and thinking I came up with the following format to save the coordinates as a single string.

For a line:

{line}::{51.46501341580547:5.792863368988037},{51.4642714876185:5.794955492019653},{51.46358302094324:5.794869661331177},{51.46343596846251:5.793324708938599}

Points:

{point}::{51.46501341580547:5.792863368988037},{51.4642714876185:5.794955492019653},{51.46358302094324:5.794869661331177},{51.46343596846251:5.793324708938599}

Shape:

{fill}::{51.46501341580547:5.792863368988037},{51.4642714876185:5.794955492019653},{51.46358302094324:5.794869661331177},{51.46343596846251:5.793324708938599}

After I came up with this format I needed an easy way to let users insert these coordinates in my database. I wanted to make something that had the least impact, so I didn’t need to rewrite the whole CMS that I allready had written. Therefore I created a small Flash widget that easily could be hooked into the CMS. I did a little jQuery magic to make this possible. First I load the regular edit page. When the page is done loading I let jQuery look for a textfield called ‘treeCoordinates’. When jQuery finds the textfield it hides it and places my Flash widget below it. In this way the user only sees the Flash widget and not the data it outputs. The Flash widget writes all it’s data directly in the invisible textfield. The nice thing about this is the CMS doensn’t care that the textfield is actually filled by a Flash widget instead of a user.

This is what the editor looks like with a visible textfield:

Another vital part of my little coordinate system is my AS3 parser. The parser reads the string from the database and converts in to Google maps LatLng objects. I want to share the parser with you so you can use this in your own Google Maps project. The parser can be found on GitHub: http://gist.github.com/458361

If you want to see the complete project please see this video from my portfolio:

If you have any comments or questions, please leave a comment.