Scalable google maps overlay

Question

Is it possible to add an image overlay to a google map that scales as the user zooms?

My current code works like this:

var map = new GMap2(document.getElementById("gMap"));

var customIcon = new GIcon();
customIcon.iconSize = new GSize(100, 100);
customIcon.image = "/images/image.png";

map.addOverlay(new GMarker(new GLatLng(50, 50), { icon:customIcon }));

However, this adds an overlay that maintains the same size as the user zooms in and out (it is acts as a UI element like the sidebar zoom control).

Answer 1

There is a zoomend event, fired when the map reaches a new zoom level. The event handler receives the previous and the new zoom level as arguments.

http://code.google.com/apis/maps/documentation/reference.html#Events_GMap

Answer 2

Well after messing around trying to scale it myself for a little bit I found a helper called EInserts which I'm going to check out.

Addition:

Okay EInserts is about the coolest thing ever. It even has a method to allow you to drag the image and place it in development mode for easy lining up.

Answer 3

You might want to check out openlayers

It's a very capable Javascript API - it supports a bunch of back ends, allowing you to transparently switch between, say, Google Map tiles and Yahoo Map tiles.