Why doesn't my custom marker show up on the map?

When working with Google Maps v3 I recently found myself asking: "Why doesn't my custom marker show up on the map?"

Watch out for these gotchas:

1. Your markers must be accessible online.

If you're working off localhost or a local development box, you need to externally host your custom marker images. Evidently they must be accessible by the Google Maps server or they simply wont show up on your map. From what I can tell it doesn't even throw an error in the console. You'll just never see your images.

2. Know your origin!

When defining the image object for your marker you must make sure you don't go outside the bounds of your image. Rather than just seeing a chopped off image its likely your marker just wont show up.

var image = {
	url: 'http://www.manta.com/manta/images/company_profile/map_tab/pushpin.png?v=3',
	// This marker is 20 pixels wide by 32 pixels tall.
	size: new google.maps.Size(26, 78),
	// The origin for this image is 0,0.
	origin: new google.maps.Point(10,0),
	// The anchor for this image is the base of the flagpole at 0,32.
	anchor: new google.maps.Point(0, 17)
};

The code above will result in the image below. I had to reduce the image size from 36 to 26 though otherwise it would have tried to go outside the bounds of the image and would result in the image not showing up.

 

But if we make that offset a -10, then the map will be empty!