I’ve never really had to write a mashup really, but I recently came across an urge (for whatever reason) to create a mashup, or simple interface, where one can supply Google Maps with a little bit of data, and return a very nifty result.

If you want to try it out you can download the source code. Otherwise keep reading to get a feel for the input parameters and the intended results.

IP Locator:

This mashup takes advantage of the Google Maps API in such a way that if you provide a known IP address, it will do a query on a site to determine where that IP is geographically located. These coordinates are then passed to the Google Maps API and we get a Google map focused on that latitude and longitude point. This field automatically defaults to your browser’s public IP address (note that I’ve had weird results with my home IP showing up in California when I am pretty sure it should be near VA – but it really could be Cox as my ISP so I’m not sure if it’s a bad source to use or not yet….)

Marker Image:

The form you enter your information on also allows you to upload an image. I haven’t worked out all the bugs in this just yet, but right now if you upload an image in (lowercase) .jpg / .jpeg / .png it will be automatically resized as a thumbnail for the marker on the map. If you click the image it invokes the common lightbox JavaScript and CSS to provide a popup of the larger image (pretty nifty). I still want to figure out why capital file extensions aren’t working and why I can’t get the popup to black out the rest of the screen as the code does on other sites….

Description:

When you enter a description it automatically provides this as the caption on the location marker for Google. For an extra feature, if you select one of the preset IPs for a foreign country it will attempt to translate it by parsing the output from Google Translator. The biggest bug here is that I’ve got something wrong with the handling of the parsed output from Google and the foreign language characters that are non-typical US characters are completely mutilated.

I’m open to any ideas or suggestions anyone may have as I’d love to work out a few kinks and actually have a fun and pretty useless mashup just because I can.

The current to do list is:

  1. Fix the parsing of Google Translator output, or locate a better API. Currently a lot of improper characters are output on the foreign languages even though Google displays them propely on their site (perhaps they’d work if the user’s browser was set to that locale’s encoding - not sure).
  2. Implement safety check if the user refreshes the results page. Currently the init function tries to reuplooad the image even if it’s not there (or already there).
  3. Objectify all these functions into much more expandable classes to allow more than one marker on the same map.
  4. Clean up a lot of repetitive code.
  5. Lower case extensions (.jpg/.jpeg/.png) work fine; however, upper case extensions blow-up (.JPG/.JPEG and not sure on .PNG). Thumbnails of the images are still being made on the plus side, but since the images themselves aren’t uploading the thumbnails are just black - do’h!
  6. Create a downloadable XML file with the data the user enters so the points do not have to be lost but can be re-uploaded to any other Google Map application.

Comments