Hi Leute
Ich hab mal versucht eine eigene Karte von einem Spiel mit Google Maps API zu erstellen, jedoch scheint es irgendwo zu einem Fehler zu kommen und ich weiß echt nicht wo er ist.
Meine Tiles sind hier: http://chrishd.fomalhaut.uberspace.de/bp/tiles/tile_0_0-0.png
Wäre echt klasse wenn jemand mal drüber schauen könnte ob er den fehler findet warum die Map nicht angezeigt wird.
Ich hab mal versucht eine eigene Karte von einem Spiel mit Google Maps API zu erstellen, jedoch scheint es irgendwo zu einem Fehler zu kommen und ich weiß echt nicht wo er ist.
Meine Tiles sind hier: http://chrishd.fomalhaut.uberspace.de/bp/tiles/tile_0_0-0.png
Wäre echt klasse wenn jemand mal drüber schauen könnte ob er den fehler findet warum die Map nicht angezeigt wird.
Code:
<html>
<head>
<!-- Load the Google Maps API javascript file -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<!-- Load the Google info bubble javascript file -->
<script type="text/javascript">
var script = '<script type="text/javascript" src="http://google-maps-' +
'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble';
if (document.location.search.indexOf('compiled') !== -1) {
script += '-compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<style>
// you'll need this for IE if using bootstrap or some other frameworks
// also, IE sucks ass
#nuvia-map img
{
max-width: none;
}
</style>
</head>
<body>
<!-- Container for displaying latitude longitude coordinates when you click on the map. This is handy for when you are needing to get the lat/lng values for markers. -->
<div id="latLng"></div>
<!-- Container for the actual map. -->
<div id="nuvia-map" style="width:512px; height:512px; margin: 0px auto; border:2px solid #000;"></div>
<script type="text/javascript">
/* <![CDATA[ */
/* Array of marker data for creating your markers and marker info bubbles. */
var markers =
{
"Steelwell\'s Landing":{lat:56.02, lng:-11.16, title:'Steelwell\'s Landing', flat:true, type:'city1', zoom:{3:true,4:true}, image:'/images/nicubunu/sign_post.svg.png',
info:"Small oasis village in the middle of the Great Gozal Desert."},
"Gozal":{lat:69.47, lng:-76.42, title:'Gozal', flat:true, type:'city2', zoom:{3:true,4:true}, image:'/images/nicubunu/sign_crossroad.svg.png',
info:"Rebel stronghold and capital city of Gozal (rebel) controlled lands. Gozal is a sprawling city with five distinct districts each ruled by descendants of the Imperial traitor Karazal."}
};
/* Array for markers that are loaded onto the map. */
var activeMarkers = [];
/* Global variable that will contain the Google Maps object. */
var map = null
// Google Maps Demo object
var Demo = Demo || {};
// The path to your tile images.
Demo.ImagesBaseUrl = 'http://chrishd.fomalhaut.uberspace.de/bp/tiles/';
// NuviaMap class
Demo.NuviaMap = function (container)
{
// Create map
// This sets the default info for your map when it is initially loaded.
map = new google.maps.Map(container,
{
zoom: 1,
center: new google.maps.LatLng(-2, 2),
mapTypeControl: false,
streetViewControl: false,
zoomControl: true,
zoomControlOptions:
{
style: google.maps.ZoomControlStyle.SMALL
}
});
// Set custom tiles
map.mapTypes.set('nuvia', new Demo.ImgMapType('nuvia', '#4E4E4E'));
map.setMapTypeId('nuvia');
// Loop through the marker info array and load them onto the map.
for (var key in markers)
{
var markerData = markers[key];
var marker = new google.maps.Marker(
{
position:new google.maps.LatLng(markerData.lat, markerData.lng),
map:map,
title:markerData.title,
flat:markerData.flat,
visible:false,
infoBubble:new InfoBubble({
maxWidth: 300,
contentmarkerData.image ? '<img src="'+markerData.image+'" width="80" align="left">' : '')+'<h3>'+markerData.title+'</h3>'+(markerData.info ? '<p>'+markerData.info+'</p>' : ''),
shadowStyle: 1,
padding: '10px'
}),
// You can use custom icons, default icons, etc. In my case since a city was a marker the circle icon works pretty well.
// I adjust the scale / size of the icon depending on what kind of city it is on my map.
icon:
{
path: google.maps.SymbolPath.CIRCLE,
scale: markerData.type == 'city1' ? 3 : 5
}
});
// We need to trap the click event for th emarker so we can pop up an info bubble.
google.maps.event.addListener(marker, 'click', function()
{
this.infoBubble.open(map, this);
});
activeMarkers.push(marker);
}
// This is dumb. We only want the markers to display at certain zoom levels so this handled that.
// Google should have a way to specify zoom levels for markers. Maybe they do but I could not find them.
google.maps.event.addListener(map, 'zoom_changed', function()
{
var currentZoom = map.getZoom();
for(var i = 0; i < activeMarkers.length; i++)
{
var thisTitle = activeMarkers[i].title;
if(markers[thisTitle]['zoom'][currentZoom])
activeMarkers[i].setVisible(true);
else
activeMarkers[i].setVisible(false);
}
});
// This handles the displaying of lat/lng info in the lat/lng info container defined above in the HTML.
google.maps.event.addListener(map, 'click', function(event)
{
$('#latLng').html("Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng());
});
};
// ImgMapType class
Demo.ImgMapType = function (theme, backgroundColor)
{
this.name = this._theme = theme;
this._backgroundColor = backgroundColor;
};
// Let Google know what size our tiles are and what our min/max zoom levels should be.
Demo.ImgMapType.prototype.tileSize = new google.maps.Size(256, 256);
Demo.ImgMapType.prototype.minZoom = 1;
Demo.ImgMapType.prototype.maxZoom = 5;
// Load the proper tile.
Demo.ImgMapType.prototype.getTile = function (coord, zoom, ownerDocument)
{
var tilesCount = Math.pow(2, zoom);
if (coord.x >= tilesCount || coord.x < 0 || coord.y >= tilesCount || coord.y < 0)
{
var div = ownerDocument.createElement('div');
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = this._backgroundColor;
return div;
}
var img = ownerDocument.createElement('IMG');
img.width = this.tileSize.width;
img.height = this.tileSize.height;
// This tells what tile image to load based on zoom and coord info.
img.src = Demo.Utils.GetImageUrl('tile_' + zoom + '_' + coord.x + '-' + coord.y + '.png');
return img;
};
// Just basically returns the image using the path set way above and the name of the actual image file.
Demo.Utils = Demo.Utils || {};
Demo.Utils.GetImageUrl = function (image)
{
return Demo.ImagesBaseUrl + image;
};
// Opacity.
Demo.Utils.SetOpacity = function (obj, opacity /* 0 to 100 */ )
{
obj.style.opacity = opacity / 100;
obj.style.filter = 'alpha(opacity=' + opacity + ')';
};
// Create ye ol' map.
google.maps.event.addDomListener(window, 'load', function ()
{
var nuviaMap = new Demo.NuviaMap(document.getElementById('nuvia-map'));
});
/* ]]> */
</script>
<script data-rocketsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/rocketscript"></script>
</body>
</html>