photoshop google tile cutter script not working

**kips** · 01-28-2014, 05:29 PM

Hello,

I found a script online that will cut my image into tiles in photoshop to be used in the google maps style.

everything worked great there the tiles were put into a folder and an index.html was made everything works great in my browser but when I put the html code into my web page all that happens is a blank spot saying loading tiles.

here is my INDEX.HTML

Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Archlord World Map</title>
		<meta charset="utf-8" />
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#map {
				width:100%;
				height:100%;
				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;
			}
		</style>
	</head>
	<body>
		<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>
		<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);
					map.setMapTypeId('custom');

				}
		</script>

	</body>
</html>

HERE is my files

**hender** · 01-30-2014, 03:22 AM

I've got the same issue
can anyone help us?

**jscheuer1** · 01-30-2014, 08:54 AM

I'd try an iframe.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**kips** · 01-30-2014, 01:19 PM

Originally Posted by jscheuer1

I'd try an iframe.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

That is the code,I don't even know how to get it working on my site, do I have to upload the folder with all the tiles and the index.html somewhere ? where in the code do I link to my tiles ?

all I have done at this point is process the script in photoshop it then spat out all the tiles and a index.html which is posted in my first post.

**jscheuer1** · 01-30-2014, 02:45 PM

You do need to upload all of the files required in order to get it to work, yes.

You said it worked as just index.html:

everything worked great there the tiles were put into a folder and an index.html was made everything works great in my browser

As long as that works, if you were to upload all of those files to their own folder(s) just like it is on the local machine, it should be fine. Then putting that index page inside of an iframe on your other page where you want it to appear should also work.

**kips** · 02-06-2014, 05:59 PM

Ill try it out, Been a long time since I built a webpage from a cpanel host forget what to do, have an account at atspace.com but just trying to figure out how and where I put my html and scripts in etc. Lacking the experience in setting up websites through one of them hosts

Thread: photoshop google tile cutter script not working

Thread Tools

Search Thread

photoshop google tile cutter script not working

Similar Threads

Conveyor belt slideshow script not working in Google Chrome

The page cutter script

PHP Album - Changing pop up background colors/colours, tile bar, path etc

Adding a background and have it tile

Bookmarks

Bookmarks

Posting Permissions