var centreLat=0.0; var centreLon=0.0; var initialZoom=1; var imageWraps=false; //SET THIS TO false TO PREVENT THE IMAGE WRAPPING AROUND var map; //the GMap3 itself var gmicMapType; var allowedBounds = new google.maps.LatLng(centreLat, centreLon);; var boundLimits; var currentZoom = initialZoom; function GMICMapType() { this.Cache = Array(); this.opacity = 1.0; } GMICMapType.prototype.tileSize = new google.maps.Size(256, 256); GMICMapType.prototype.maxZoom = 19; GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var c = Math.pow(2, zoom); var c = Math.pow(2, zoom); var tilex=coord.x,tiley=coord.y; if (imageWraps) { if (tilex<0) tilex=c+tilex%c; if (tilex>=c) tilex=tilex%c; if (tiley<0) tiley=c+tiley%c; if (tiley>=c) tiley=tiley%c; } else { if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c)) { var blank = ownerDocument.createElement('DIV'); blank.style.width = this.tileSize.width + 'px'; blank.style.height = this.tileSize.height + 'px'; return blank; } } var img = ownerDocument.createElement('IMG'); var d = tilex; var e = tiley; var f = "t"; for (var g = 0; g < zoom; g++) { c /= 2; if (e < c) { if (d < c) { f += "q" } else { f += "r"; d -= c } } else { if (d < c) { f += "t"; e -= c } else { f += "s"; d -= c; e -= c } } } img.id = "t_" + f; img.style.width = this.tileSize.width + 'px'; img.style.height = this.tileSize.height + 'px'; img.src = "maps/worldmap/"+f+".jpg"; this.Cache.push(img); return img; } GMICMapType.prototype.realeaseTile = function(tile) { var idx = this.Cache.indexOf(tile); if(idx!=-1) this.Cache.splice(idx, 1); tile=null; } /*GMICMapType.prototype.name = "Image Cutter"; GMICMapType.prototype.alt = "Image Cutter Tiles"; GMICMapType.prototype.setOpacity = function(newOpacity) { this.opacity = newOpacity; for (var i = 0; i < this.Cache.length; i++) { this.Cache[i].style.opacity = newOpacity; //mozilla this.Cache[i].style.filter = "alpha(opacity=" + newOpacity * 100 + ")"; //ie } }*/ function getWindowHeight() { if (window.self&&self.innerHeight) { return self.innerHeight; } if (document.documentElement&&document.documentElement.clientHeight) { return document.documentElement.clientHeight; } return 0; } function resizeMapDiv(world) { //Resize the height of the div containing the map. //Do not call any map methods here as the resize is called before the map is created. var d=document.getElementById("map"); var offsetTop=0; for (var elem=d; elem!=null; elem=elem.offsetParent) { offsetTop+=elem.offsetTop; } /*var height=getWindowHeight()-offsetTop-64; if (height>=0) { d.style.height=height+"px"; }*/ d.style.minHeight = "700px"; if (world == "chocobo") { d.style.minHeight = "800px"; } } /* Disable and enable dragging based on zoom level. */ function draggingManager(map, curr_zoom, old_zoom) { console.info("current zoom " + curr_zoom); console.info("old zoom " + old_zoom); if (curr_zoom <= 1) { if (old_zoom > 1) { map.setCenter(new google.maps.LatLng(centreLat, centreLon)); } map.draggable = false; } else { map.draggable = true; } currentZoom = curr_zoom; return; } /* These are for drag and drop markers. */ function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latlng) { document.getElementById('info').innerHTML = [ latlng.lat(), latlng.lng() ].join(', '); } /* End D&D Marker */ function init_map() { resizeMapDiv(world); var latlng = new google.maps.LatLng(centreLat, centreLon); var myOptions = { zoom: initialZoom, backgroundColor: '#355a74', minZoom: 2, maxZoom: 5, draggable: true, center: latlng, panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: false, streetViewControl: false, overviewMapControl: true, mapTypeControlOptions: { mapTypeIds: ["CoNmap"] }, mapTypeId: "CoNmap" } map = new google.maps.Map(document.getElementById("map"), myOptions); gmicMapType = new GMICMapType(); map.mapTypes.set("CoNmap",gmicMapType); ///////////////////////////////////////////////////////////////////////////////////// //Add any markers here e.g. // var marker = new google.maps.Marker({ // map:map, // position: new google.maps.LatLng(x,y), // title: "My Marker" // }); ///////////////////////////////////////////////////////////////////////////////////// var iconBase = "maps/sword/"; markers = []; marker_listeners = []; locations = []; locationsDiv = []; marker_counter = 0; function createLocationMarker(latlng, id_text, div_id, shop_marker) { marker_icon = iconBase + 'ball.png'; marker_shadow = iconBase + 'ball_shadow.png'; // let hot and cold fall back to ball. don't include in this array var icons = ['sword', 'track', 'graph', 'bubble', 'crack']; var index = icons.indexOf(shop_marker); if (index >= 0) { marker_icon = iconBase + shop_marker + '.png'; marker_shadow = iconBase + shop_marker + '_shadow.png'; } var marker = new MarkerWithLabel({ map: map, position: latlng, labelContent: id_text, labelVisible: false, labelClass: 'locationName', labelAnchor: new google.maps.Point(20, 0), icon: marker_icon, shadow: marker_shadow, visible: false }); marker.set('div_id', div_id); //if (shop_marker == "sword") { marker_listeners[marker_counter] = google.maps.event.addListener(marker, "click", function() { var div_id = marker.get('div_id'); show(div_id); }); marker_counter += 1; //} google.maps.event.addListener(marker, "mouseover", function() { marker.set('labelVisible',true); }); google.maps.event.addListener(marker, "mouseout", function() { marker.set('labelVisible',false); }); return marker; } markers[0] = createLocationMarker(new google.maps.LatLng(-22.2688,108.281), "Alexandria", "world_alexandria", 'sword'); locations[0] = "Alexandria"; locationsDiv[0] = "world_alexandria"; markers[1] = createLocationMarker(new google.maps.LatLng(-15.623,122.52), "Alexandria Harbor", "world_alexandria_harbor", 'ball'); locations[1] = "Alexandria Harbor"; locationsDiv[1] = "world_alexandria_harbor"; markers[2] = createLocationMarker(new google.maps.LatLng(38.5482,37.9688), "Black Mage Village", "world_black_mage_village", 'ball'); locations[2] = "Black Mage Village"; locationsDiv[2] = "world_black_mage_village"; markers[3] = createLocationMarker(new google.maps.LatLng(-21.943,49.2188), "Burmecia", "world_burmecia", 'sword'); locations[3] = "Burmecia"; locationsDiv[3] = "world_burmecia"; markers[4] = createLocationMarker(new google.maps.LatLng(-32.5468,37.2656), "Cleyra", "world_cleyra", 'ball'); locations[4] = "Cleyra"; locationsDiv[4] = "world_cleyra"; markers[5] = createLocationMarker(new google.maps.LatLng(44.0876,26.0156), "Conde Petie", "world_conde_petie", 'ball'); locations[5] = "Conde Petie"; locationsDiv[5] = "world_conde_petie"; markers[6] = createLocationMarker(new google.maps.LatLng(54.1624,22.1484), "Mountain Path", "world_mountain_path", 'ball'); locations[6] = "Mountain Path"; locationsDiv[6] = "world_mountain_path"; markers[7] = createLocationMarker(new google.maps.LatLng(-61.2702,-71.3672), "Daguerreo", "world_daguerreo", 'ball'); locations[7] = "Daguerreo"; locationsDiv[7] = "world_daguerreo"; markers[8] = createLocationMarker(new google.maps.LatLng(-37.1603,74.5312), "Dali", "world_dali", 'sword'); locations[8] = "Dali"; locationsDiv[8] = "world_dali"; markers[9] = createLocationMarker(new google.maps.LatLng(53.7487,81.9141), "Desert Palace", "world_desert_palace", 'ball'); locations[9] = "Desert Palace"; locationsDiv[9] = "world_desert_palace"; markers[10] = createLocationMarker(new google.maps.LatLng(42.5531,77.3438), "Earth Shrine", "world_earth_shrine", 'ball'); locations[10] = "Earth Shrine"; locationsDiv[10] = "world_earth_shrine"; markers[11] = createLocationMarker(new google.maps.LatLng(57.5158,-72.4219), "Esto Gaza", "world_esto_gaza", 'ball'); locations[11] = "Esto Gaza"; locationsDiv[11] = "world_esto_gaza"; markers[12] = createLocationMarker(new google.maps.LatLng(-26.4312,97.7344), "Evil Forest", "world_evil_forest", 'ball'); locations[12] = "Evil Forest"; locationsDiv[12] = "world_evil_forest"; markers[13] = createLocationMarker(new google.maps.LatLng(68.3992,-47.8125), "Fire Shrine", "world_fire_shrine", 'ball'); locations[13] = "Fire Shrine"; locationsDiv[13] = "world_fire_shrine"; markers[14] = createLocationMarker(new google.maps.LatLng(36.3151,32.6953), "Fossil Roo", "world_fossil_roo", 'ball'); locations[14] = "Fossil Roo"; locationsDiv[14] = "world_fossil_roo"; markers[15] = createLocationMarker(new google.maps.LatLng(-45.8288,52.7344), "Gizamaluke's
Grotto", "world_gizamalukes_grotto", 'ball'); locations[15] = "Gizamaluke's
Grotto"; locationsDiv[15] = "world_gizamalukes_grotto"; markers[16] = createLocationMarker(new google.maps.LatLng(-38.5482,92.8125), "Ice Cavern", "world_ice_cavern", 'ball'); locations[16] = "Ice Cavern"; locationsDiv[16] = "world_ice_cavern"; markers[17] = createLocationMarker(new google.maps.LatLng(48.4584,1.75781), "Iifa Tree", "world_iifa_tree", 'ball'); locations[17] = "Iifa Tree"; locationsDiv[17] = "world_iifa_tree"; markers[18] = createLocationMarker(new google.maps.LatLng(24.8466,-107.578), "Ipsen's Castle", "world_ipsens_castle", 'ball'); locations[18] = "Ipsen's Castle"; locationsDiv[18] = "world_ipsens_castle"; markers[19] = createLocationMarker(new google.maps.LatLng(-67.7428,37.6172), "Lindblum", "world_lindblum", 'sword'); locations[19] = "Lindblum"; locationsDiv[19] = "world_lindblum"; markers[20] = createLocationMarker(new google.maps.LatLng(-63.0749,41.1328), "Dragon's Gate", "world_dragons_gate", 'ball'); locations[20] = "Dragon's Gate"; locationsDiv[20] = "world_dragons_gate"; markers[21] = createLocationMarker(new google.maps.LatLng(-68.911,31.6406), "Lindblum Harbor", "world_lindblum_harbor", 'ball'); locations[21] = "Lindblum Harbor"; locationsDiv[21] = "world_lindblum_harbor"; markers[22] = createLocationMarker(new google.maps.LatLng(61.2702,28.4766), "Madain Sari", "world_madain_sari", 'ball'); locations[22] = "Madain Sari"; locationsDiv[22] = "world_madain_sari"; markers[23] = createLocationMarker(new google.maps.LatLng(57.1362,-74.5312), "Mount Gulug", "world_mount_gulug", 'ball'); locations[23] = "Mount Gulug"; locationsDiv[23] = "world_mount_gulug"; markers[24] = createLocationMarker(new google.maps.LatLng(68.7841,60.1172), "Mognet Central", "world_mognet_central", 'ball'); locations[24] = "Mognet Central"; locationsDiv[24] = "world_mognet_central"; markers[25] = createLocationMarker(new google.maps.LatLng(-30.1451,69.6094), "North Gate", "world_north_gate", 'sword'); locations[25] = "North Gate"; locationsDiv[25] = "world_north_gate"; markers[26] = createLocationMarker(new google.maps.LatLng(-35.7465,78.0469), "Observatory
Mountain", "world_observatory_mountain", 'ball'); locations[26] = "Observatory
Mountain"; locationsDiv[26] = "world_observatory_mountain"; markers[27] = createLocationMarker(new google.maps.LatLng(-32.8427,-68.2031), "Oeilvert", "world_oeilvert", 'ball'); locations[27] = "Oeilvert"; locationsDiv[27] = "world_oeilvert"; markers[28] = createLocationMarker(new google.maps.LatLng(-57.9848,151.523), "Quan's Dwelling", "world_quans_dwelling", 'ball'); locations[28] = "Quan's Dwelling"; locationsDiv[28] = "world_quans_dwelling"; markers[29] = createLocationMarker(new google.maps.LatLng(-54.9776,44.2969), "Qu's Marsh 1", "world_qus_marsh_1", 'ball'); locations[29] = "Qu's Marsh 1"; locationsDiv[29] = "world_qus_marsh_1"; markers[30] = createLocationMarker(new google.maps.LatLng(48.4584,-56.9531), "Shimmering Island", "world_shimmering_island", 'ball'); locations[30] = "Shimmering Island"; locationsDiv[30] = "world_shimmering_island"; markers[31] = createLocationMarker(new google.maps.LatLng(-50.2893,89.6484), "South Gate", "world_south_gate", 'sword'); locations[31] = "South Gate"; locationsDiv[31] = "world_south_gate"; markers[32] = createLocationMarker(new google.maps.LatLng(-56.5595,109.688), "Treno", "world_treno", 'ball'); locations[32] = "Treno"; locationsDiv[32] = "world_treno"; markers[33] = createLocationMarker(new google.maps.LatLng(-1.05463,-101.602), "Water Shrine", "world_water_shrine", 'ball'); locations[33] = "Water Shrine"; locationsDiv[33] = "world_water_shrine"; markers[34] = createLocationMarker(new google.maps.LatLng(-47.9899,-46.7578), "Wind Shrine", "world_wind_shrine", 'ball'); locations[34] = "Wind Shrine"; locationsDiv[34] = "world_wind_shrine"; markers[35] = createLocationMarker(new google.maps.LatLng(49.6107,50.625), "Qu's Marsh 2", "world_qus_marsh_2", 'ball'); locations[35] = "Qu's Marsh 2"; locationsDiv[35] = "world_qus_marsh_2"; markers[36] = createLocationMarker(new google.maps.LatLng(23.2413,-78.75), "Qu's Marsh 3", "world_qus_marsh_3", 'ball'); locations[36] = "Qu's Marsh 3"; locationsDiv[36] = "world_qus_marsh_3"; markers[37] = createLocationMarker(new google.maps.LatLng(-51.618,-85.7812), "Qu's Marsh 4", "world_qus_marsh_4", 'ball'); locations[37] = "Qu's Marsh 4"; locationsDiv[37] = "world_qus_marsh_4"; /* Make all the markers visible */ for (var i = 0; i < markers.length ; i++ ) { markers[i].visible = true; } ///////////////////////////////////////////////////////////////////////////////////// /* This is the drag and drop marker from http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html var ddmarker = new google.maps.Marker({ position: latlng, title: 'Drag and Drop', map: map, draggable: true }); // Update current position info. updateMarkerPosition(latlng); //geocodePosition(latlng); // Add dragging event listeners. google.maps.event.addListener(ddmarker, 'dragstart', function() { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener(ddmarker, 'drag', function() { updateMarkerStatus('Dragging...'); updateMarkerPosition(ddmarker.getPosition()); }); google.maps.event.addListener(ddmarker, 'dragend', function() { updateMarkerStatus('Drag ended'); //geocodePosition(ddmarker.getPosition()); });*/ /* End drag and drop marker */ /* Do a zoom-change listener. */ var zoom_listener = google.maps.event.addListener(map, 'zoom_changed', function() { //console.info("current zoom before dragging manager " + currentZoom); new_zoom = map.getZoom(); allowedBounds = set_allowed_bounds(new_zoom); boundLimits = set_bound_limits(allowedBounds); if (!allowedBounds.contains(map.getCenter())) { //console.info("we probably just broke PAN"); //map.panToBounds(allowedBounds); // this is a pretty lousy fallback but I haven't found magic numbers yet. map.panTo(new google.maps.LatLng(0,0)); //console.info("we probably just tried to fix PAN"); } draggingManager(map, new_zoom, currentZoom); //console.info("current zoom after dragging manager " + currentZoom); }); /* Do a center-changed listener to try to limit panning. PAN! */ /* bounds of the desired area. This is what was tricky before */ /* I think this will need to be based on zoom level. */ function set_allowed_bounds(zoom) { /* where is zoom one? we don't need this there. */ if (zoom == 2) { allowedBounds = new google.maps.LatLngBounds( /* good at level 2 */ new google.maps.LatLng(-16,-10), new google.maps.LatLng(16,10) ); } else if (zoom == 3) { allowedBounds = new google.maps.LatLngBounds( /* good at level 3 */ new google.maps.LatLng(-60,-80), new google.maps.LatLng(60,80) ); } else if (zoom == 4) { allowedBounds = new google.maps.LatLngBounds( /* good at level 4 */ new google.maps.LatLng(-72,-135), new google.maps.LatLng(72,135) ); } else if (zoom == 5) { allowedBounds = new google.maps.LatLngBounds( /* good at level 5 */ new google.maps.LatLng(-78,-155), new google.maps.LatLng(78,155) ); } return allowedBounds; } function set_bound_limits(allowedBounds) { var boundLimits = { maxLat : allowedBounds.getNorthEast().lat(), maxLng : allowedBounds.getNorthEast().lng(), minLat : allowedBounds.getSouthWest().lat(), minLng : allowedBounds.getSouthWest().lng() }; return boundLimits; } var lastValidCenter = map.getCenter(); var newLat, newLng; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); if (allowedBounds.contains(center)) { // still within valid bounds, so save the last valid position lastValidCenter = map.getCenter(); return; } newLat = lastValidCenter.lat(); newLng = lastValidCenter.lng(); if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){ newLng = center.lng(); } if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){ newLat = center.lat(); } map.panTo(new google.maps.LatLng(newLat, newLng)); }); draggingManager(map, initialZoom, currentZoom); $("#mapwrapper").css({'width': $("#map").width()+'px'}); } var last = null; function show(id) { var itm = "#"+id; //console.log(id); var itm = $(itm); if (!itm) { // do nothing } else { $(".metalocation").hide(); $(itm).show(); if (last && last != itm) { $(last).hide(); } last = itm; } } google.maps.event.addDomListener(window, 'load', init_map); //google.maps.event.addDomListener(window, 'resize', resizeMapDiv); /* global scoped var to use in the show maps function below */ mapdivs = "hidden"; function mapToggler() { dumpListeners(); createListeners(mapdivs); adjustFloat(mapdivs); displayMapDivs(mapdivs); if (mapdivs == "hidden") { mapdivs = "visible"; } else { mapdivs = "hidden"; } } function dumpListeners(){ console.log(marker_listeners); for (var i = 0; i < marker_listeners.length; i++) { element = marker_listeners[i]; google.maps.event.removeListener(element); } } function createListeners(status) { if (status=="hidden") { //we are making the divs all visible, so we set the listeners to be links to hashes. $(markers).each(function(i,marker){ marker_listeners[i] = google.maps.event.addListener(marker, "click", function() { var primaryURL = document.URL.split("#"); window.location = primaryURL[0] + "#" + locationsDiv[i]; }); //GEvent.addListener(marker, "click", function(){ var primaryURL = document.URL.split("#"); window.location = primaryURL[0] + "#" + locationsDiv[i] }); }); } else { //we are reverting back to the standard GMap click actions. $(markers).each(function(i,marker){ marker_listeners[i] = google.maps.event.addListener(marker, "click", function() { var div_id = marker.get('div_id'); show(div_id); }); }); } } function adjustFloat(status) { if (status=="hidden") { //we are making the divs all visible, so we need to break the float. $(".metalocation").css("clear","both"); } else { $(".metalocation").css("clear","none"); } } function displayMapDivs(status) { if (status=="hidden") { //we are making the divs all visible, so we need to... make the divs all visible. idiot. $(".metalocation").hide(); $(".metalocation").show(); } else { $(".metalocation").hide(); } }