Jump to content

Custom map image like google maps


Recommended Posts

I have a map in different formats one is a 4000 x 4000 pixel image of my fantasy world map, the other is the same map but broken up into tiles.

I am trying to figure out how I can get this into kml, cvs xml or whatever so I can make an interactive map from it. 

I am wanting to put markers on towns, castles, portals and dungeons and then when them markers are clicked a image or swf file shows up showing a map of the town, castle, portal and dungeon. 

I am then wanting to place routes from portals to where they lead and also put markers where bosses etc may be located on the map. 

here is an image of the map 


and here is an example of what I am wanting to do, If you click the tullan and  delfrase  red markers you will see.




I found this script but I am having trouble creating a free website and loading the stuff to use it  

<!DOCTYPE html>
<html lang="en">
		<title>Archlord World Map</title>
		<meta charset="utf-8" />
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
			#map {
				color: #CCC;
				background: #EFEFEF;
			span.loading {
				display: block;
				text-align: center;
				font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
		<div id="map"><span class="loading">loading tiles...</span></div>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

			 * = PS_Bramus.GoogleMapsTileCutter Config
			 * ----------------

				var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false

			 * Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
			 * ----------------

				function getNormalizedCoord(coord, zoom) {
					if (!repeatOnXAxis) return coord;

					var y = coord.y;
					var x = coord.x;

					// tile range in one direction range is dependent on zoom level
					// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
					var tileRange = 1 << zoom;

					// don't repeat across Y-axis (vertically)
					if (y < 0 || y >= tileRange) {
						return null;

					// repeat across X-axis
					if (x < 0 || x >= tileRange) {
						x = (x % tileRange + tileRange) % tileRange;

					return {
						x: x,
						y: y


			 * Main Core
			 * ----------------

				window.onload = function() {

					// Define our custom map type
					var customMapType = new google.maps.ImageMapType({
						getTileUrl: function(coord, zoom) {
							var normalizedCoord = getNormalizedCoord(coord, zoom);
							if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
								return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
							} else {
								return 'empty.jpg';
						tileSize: new google.maps.Size(256, 256),
						maxZoom: 5,
						name: 'PS_Bramus.GoogleMapsTileCutter'

					// Basic options for our map
					var myOptions = {
						center: new google.maps.LatLng(0, 0),
						zoom: 2,
						minZoom: 0,
						streetViewControl: false,
						mapTypeControl: false,
						mapTypeControlOptions: {
							mapTypeIds: ["custom"]

					// Init the map and hook our custom map type to it
					var map = new google.maps.Map(document.getElementById('map'), myOptions);
					map.mapTypes.set('custom', customMapType);



I am not very knowledgeable in this area but know enough html to be able to code the image inserts etc, If someone can help me to get the map up and running on a host site with 1 marker and route I could then do the rest of the 500+ markers routes I need

any and all help would be appreciated 

Edited by kipslacher
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.