How can I rotate an overlay image on Google Maps?

Question

I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.

So here's a possible use case. I'm building a website to help city planners test parking availability.

• The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
• The website script tests the selected polygon area for parking availability.
• When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
• I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
• This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
• Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)

(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)

All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.

Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.

Answer 1

I would draw and rotate in a <canvas> and then out that on. EDIT: place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.