jQuery Image Pin plugin

[x1nick]

Basically need to be able to create something like below:

 

 

I need to be able to specify and x and y cordinate of where to display the pin, then when a user clicks the pin I can carry out some javascript (ajax request and put contents in a div)

 

Does anything like this exist?

[haku]

Yes. The Google Maps API (currently version 3.0) does this. However, it's not really something you just pick up and do, it takes a while to learn. You'll have to spend some time studying up on their documentation.

[x1nick]

I want to do it with a custom image though, not google maps

[x1nick]

Also need a way of a user clicking the image, and creating a pin. Then store the X,Y cordinates of where the user clicked on the image

 

Know this is possible, just not too sure the best way to go about doing it

[haku]

The google maps API allows you to both use custom images as your pins, as well as drop pins when the map is clicked on.

[nafetski]

It's easy enough.

 

For your image, you'll want to have it wrapped with a container that has relative positioning (or have the image be a background image)

 

Then you can listen for click inside that area.

 

Then look into the jquery function offset().  It takes the offset of that element, so you could find out what the coordinates are.

 

At that point you could just insert dom elements with absolute positioning based off that coordinate.