View Full Version : Game Maps With Google Maps Functionality

01-18-2010, 10:40 PM
A website/wiki campaign site called Obsidian Portal allows the uploading of campaign maps with the functionality of a google map. I've used google and as many different search terms as I can think of to try and find a process to do this on a private website.

Since I've come up empty I've decided to reach out to the wealth of mapping knowledge I've found here.

So, my question is... Does anyone know how to accomplish this?

Here is a link if you don't know what I'm talking about: http://www.obsidianportal.com/campaign/denizens/maps/show/1343

01-18-2010, 10:43 PM
I've never uploaded anything there and I don't know if anyone else here has either...maybe they have. There was a post a few weeks back (maybe as far back as 8 weeks) about doing so but I don't know if anyone has yet. You might get more help by asking over there.

01-18-2010, 11:24 PM
I wasn't really wanting to know if anyone here had uploaded something to Obsidian Portal, I was simply using it as an example of what I want to try and accomplish.

I want to know if anyone knows a way to take a map that I have made (in photoshop if that matters) and place it into a google map/earth like interface. The Primary goals I would like to accomplish are...

1. Click and drag navigation
2. Zoom in/out capability
3. The ability to place markers (preferably with mouse-over information)

01-19-2010, 01:51 AM
CoyoteMax has done that so he might be the one to ask...hope he reads this.

01-19-2010, 02:20 AM
I've done something similar, but it did not have the ability to add new information (at least not as I'm able to work things). I used the Zoomify export from photoshop (cs3, i think cs4 has it as well, I don't recall if previous versions do - i know ps7 does not).

I believe it uses Flash as a basis so if you had flash programming knowledge you may be able to incorporate other options.

I was going to link in some other posts where we talked about this, but "zoomify" is not working as a search term :(

Found the link to the map I posted with the function enabled though!

01-19-2010, 02:34 AM
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 (http://code.google.com/intl/en-EN/apis/maps/).

01-19-2010, 03:03 AM
You could also use the Zoomify tiles then, it chops into 256x256. Instead of using the zoomify itself, just grab the images it creates.

01-19-2010, 05:05 AM
This is most relevant to my interests. Now all I need is one of those table-sized smart PCs so i can have fancy schmancy maps, then when its battle time ... ZOOOOOOOOOOM! .. oh look, 1inch grids.


On a more serious note, if you download Google Earth, you might be able to tell it to use your own world, and thus use your maps offline. I'm guessing. It follows logically in my mind though.

01-19-2010, 06:08 AM
I spent a bit of time looking, it does appear that the google maps API can be used to create maps using custom map tiles and custom data.

I'll admit though, not being a programmer I started to nod off a bit when it started getting into examples.

Google Earth doesn't appear to have anything modifiable in this regard, all I could find was for custom maps using already existing imagery. Of course i only spent an hour looking, and there might be better search terms than I used, so someone else may have better luck.

Custom Map Types

Note: This is an Advanced Topic
If you find the GTileLayerOverlay too limiting, you can define your own custom map type, and develop an entirely new display paradigm. To do so, construct a GMapType object and add it to the map using the GMap2.addMapType() method.
Constructing a map type from scratch is an involved process. You will need to build a way to define and retrieve dynamic data to display on the map given current coordinates, and you will need to determine yourself how to reference and display tile images. How you do that is up to you; however, we can help you a little by explaining how Google Maps implements its tile references.

01-19-2010, 07:57 AM
Hi, i have created custom google maps for my campaign. It's pretty awesome, you can create custom icons (http://www.powerhut.co.uk/googlemaps/custom_markers.php), overlays etc. You'd need an API-key (http://code.google.com/intl/nl/apis/maps/signup.html) registered at google. I generated a 6-level-deep map with fractal terrain pro and there's also PS scripts for tiling images. To make the images check the documentation as to how google map projects and coordinates (http://code.google.com/intl/nl/apis/maps/documentation/overlays.html#Tile_Overlays)are used. Too bad my personal webserver is not connected to the web else i'd show the link. If you have question about creating it let me know. I attached the java-scripts + 3 levels of images (level 6 is over 300K images ;) I created in case you wanne check it. (the code is uncommented as I never intended to share it so you'd need to haves some knowledge of Javascript to apply this. Also the conversion from coordinates to tiles is a bit odd as i used the standard FT-pro export function and needed to convert coordinates to these). cheers

01-19-2010, 08:12 AM
If this:


is what your interested in then a) See my sig and b) enter this months challenge cos I am giving 3 copies away to top three winners by vote !

01-19-2010, 01:31 PM
If this:


is what your interested in then a) See my sig and b) enter this months challenge cos I am giving 3 copies away to top three winners by vote !

I was actually very interested in this. I was wanting to have a map interface that not only had a zoom interface, but also a "plotting" mechanism that showed the progress/travels of adventuring groups. Haven't found something that had the latter without delving far into flash though.

01-19-2010, 03:20 PM
The app does not have any drawing tools in it but it can drop a lot of icons down before it slows down at all. So you can drop dots, arrows or lines down. It has a pathing tool so that you can drop multiple items down based on the mouse move. Here is that demo vid showing its options.


Basically the app is a map manager with loads of tokens which you can add or update over the net which turns it into a pan and zoom based VTT so it had a chat and multiple client interfaces added. Anyway, you can update any of the images using a paint package and reimport those images in and it will add it to the view. I.e. the map you see is not a frozen version, its dynamic like in the way I moved some of those barriers and path tokens. Certainly a vector app like Inkscape is going to do better paths and PS / Gimp has the raster paint facility and this app does not do that but conversely this does the compositing of multiple inkscape and PS images maintaining scale into your world and links that with text, documents, photos, art, web pages and of course other maps. So thats what this one is all about.

Theres a free demo on the website tho there is no import / export with it.

01-20-2010, 08:20 AM
After reading about this i've decided to design my atlas in the google map style and by doing so supply you all with a tutorial since i come from a programming background i cant see this being an issue.

I've managed to doodle my map, but i simply cant get it to look right. Please bare with me

01-20-2010, 03:29 PM
Redrobes: Awesome program. I really like it and it's something I'm definitly going to keep in mind for future purchase. The only thing is that it doesn't quite match my purposes. Since ady is offering to freely teach me how to do it myself that's what I'd rather do. I'm more of the "Teach a man to fish" type than the "Give a man a fish". Plus, the main feature I'm looking for is the ability to put it up online so that myself AND my players can pull up the map at any time whether we're at the game table or not.

Ady: I await your tutorial with great anticipation.

01-20-2010, 07:21 PM
Thanks tommy. Heres the situation summary. Using Google Maps is better because a) its free and b) if you can find a good host then its online all the time. Using Google Maps is worse because a) it only serves flat images so that you cant change the maps in any way without uploading a whole new set of tiles. Its good for non editable maps - you have to have the maps in some other app and generate the tile set from it. That app has to be able to store huge maps or have levels of detail tile sets all of its own. So you may require a zoom capable map editor to even get at something that will generate the tiles for you. At least if you want more than about a 3 level deep tile zoom range. I have seen loads of people do the GMaps stuff but other than google I have never yet seen anyone do one that is deeper than just a few levels. The best I ever saw is SeerBlue's thing on here with the CWBP mainly covering my Thrubmorton tile 7. Search for that post cos it had some info on how to do it. There are some flash web things too. There is one where its a tunnel of art with the middle bit of the art joining up to the next bit and it goes on and on until it loops back to the original. Its well cool. Ill try to find the link and edit it in if I can.

I would be interested in Ady's and anyones scripts to generate the data to go with tiles and the tile breaker app too. I think with some python, perl and some image magick it could be done pretty easily. I think that some of the GIS apps can do it. I think it was either GeoControl or was it Global Mapper that could do it. Theres must be other ways too. I am sure there are some web sites where you load big images in and it does it for you but not more than one big image.

Finally I should mention that as of V1.08 (current latest), which all the version patches are free for the boxed app, there is a built in web server so that any browser can obtain PNG images served from the one app hosting. That does mean that the app has to be running for the duration you want it serving and the right map loaded and you have to set your networking up to allow a port to forward to the app through NAT routers etc i.e. the usual faff for serving something networking from local machine but it will allow a position X,Y and Zoom scale and image size to be requested and it returns back a web page showing the image. Obviously its static and you cant do much with it other than to request another image a bit to one side or more or less zoomed in etc. When connected as a VTT then clients can connect in and move their character tokens about and the GM can move the map about for the clients and all the usual VTT goodness in real time - but you need to be connected with the app for each person. Its the same app for player clients and GM server.

Edit - This is the thread

This is the almost but not quite working page its referring to. Whats a google maps API key then ? And this is maybe another reason why its not as simple as it ought to be.

Zoom Quilt:

Ahh it was indeed Global Mapper. Useful page of info here - most from SeerBlue:

01-28-2010, 05:21 PM
I attempted this a while back:

Link (http://sixmitchells.co.uk/maps/Anguin/seadragonajax.html)

I took ages trying to find out how to do this, and it appears that Microsoft have a product call Deep Zoom Composer that can do it all for you (apart from draw your map of course)

Deep Zoom Composer (http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en)

Hope this is what you are looking for. :-)

04-01-2010, 03:48 PM
lots of great stuff here

11-19-2011, 04:39 AM
Wow that is pretty awesome!

11-20-2011, 07:08 AM
Another option, which eliminates the annoyance of an API Key and gives you more freedom than Google Maps is OpenLayers.

It supports simple single images, "Tiled Map Services" (static image tiles in a particular arrangement), Web Map Services and Web Feature Services (Advanced services provided by special map servers), and non-standard map services like OSM, Google Maps, and Bing Maps.

PS: Didn't notice this was a necrothread.