<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 = '/images/map/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,
content
markerData.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 = 4;
// 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>
Reply With Quote
Make your maps explorable using the Google Maps API (work in progress)
Originally Posted by Redrobes
Posting Permissions
