You’re going to have to do perspective matching. First display the image of the soccer field in the background of an OpenGL window. Use glDrawPixels to do this. Next, set up a camera (using gluPerspective) that looks at a wireframe version of your flat soccer field from a point similar to wherever the image was photographed. Your wireframe soccer field will now overlay the image of the field. But they probably won’t line up very well. So you have to keep adjusting the position and field of view of the camera until the wireframe version of the field exactly matches the underlying image. If I was doing it, I’d put in GUI elements that let me interactively change the X,Y,Z location of the camera, it’s pan, tilt, and FOV. This would help zero in on a solution faster. If you don’t want to mess with GUIs, you can just go into the code, tweak all those variables, recompile and execute, over and over again until you converge on a solution. So you see, this is not a trivial thing to do using OpenGL.
Do you have any 3D graphics software you could use instead? An animation package like Maya, Max, or Lightwave, or perhaps a CAD package would probably be an easier way to go than writing code.