Google Maps provides a free API that you can use on your own website using your own map(s). You have to register your website to get a key code to make it work. It really helps if you know some javascript to get it going.

You basically cut up your map into 256x256 pieces and tell the script to use those instead of the real-world ones provided by Google. You do this for every zoom level you want to provide. Ideally, you use different images for each zoom level, so the labels remain legible when you zoom out. You can also place your own markers via javascript.

From what you are describing, Obsidian Portal is using a script that does the cutting for you automagically.

You can read more about the API here.