How to implement a map in JavaScript?

Question

Hey there,

I'm wondering, what would be the simplest approach to turn this:

{x: 0, y: 0, image: 'map_00_00.png',
x: 50, y: 0, image: 'map_01_00.png',
x: 50, y: 50, image: 'map_01_01.png'}

Into something like a Google Map. I'd like to stay with jQuery. Would you use some plugin for dragging? Or just go with some simple events?

I'm thinking the simplest approach would be to load all images at once, position them with CSS, and add some dragging to show hidden parts of viewport.

Still I'm very curious about what other people think.

Answer 1

The easiest way might just be to add a custom map type to a Google Map via the Google Maps API. Have a look at the ImageMapType which might work for you.

Answer 2

Check out the OpenLayers project. It's an open source map interface implementation (works a lot like Google Maps). You can get some ideas from there.

Answer 3

So I hacked around this morning and it's pretty simple.

1. One div is positioned at [0, 0] and has 100% width and height.
2. Inside is another div, which is absolute positioned, initially at [0, 0] but this one will move as we drag. Also, everything is inside this one.
3. You can't use jQuery's Draggable implementation. The thing is, you don't want to drag div number 2 itself, because you would drag it away :-)

So I implemented my own drag-n-drop, which receives events on top div and moves underlying one. Checkout the source code!