Google map customization (Javascript based)


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2.  
  3. function load(){
  4.  
  5. //<![CDATA[
  6. if (GBrowserIsCompatible()) {
  7.  
  8. var map = new GMap2(document.getElementById("map"));
  9. //map.addControl(new GSmallMapControl());
  10. map.enableScrollWheelZoom();
  11.  
  12. // Set up the copyright information
  13. var myCopyright = new GCopyrightCollection("Custom Layer");
  14. myCopyright.addCopyright(new GCopyright(1,new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0,'©2008 LPA'));
  15.  
  16. // Create the tile layer overlay and
  17. var tilelayers = [new GTileLayer(myCopyright , 1, 15)];
  18. tilelayers[0].getTileUrl = CustomGetTileUrl;
  19. var custommap = new GMapType(tilelayers, new GMercatorProjection(17), "Custom Layer", {errorMessage:"No data available"});
  20. map.addMapType(custommap);
  21. map.setMapType(custommap);
  22.  
  23.  
  24. map.setCenter(new GLatLng(35.460669951495305, 10.546875), 1);
  25. addCustomIcon("country.xml", 10);
  26.  
  27.  
  28. GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
  29.  
  30. if(newLevel==12){
  31. map.setZoom(15);
  32. map.setCenter(new GLatLng(1.290506, 103.850663));
  33. }
  34.  
  35. if(oldLevel ==1){
  36. map.setZoom(10);
  37.  
  38. }
  39.  
  40. if(oldLevel == 15){
  41. map.setZoom(11);
  42. }
  43. if(newLevel == 15){
  44. map.clearOverlays();
  45. }
  46.  
  47. if(newLevel == 11){
  48. map.clearOverlays();
  49. map.setCenter(new GLatLng(1.33746396806039, 103.82080078125), 11);
  50. }
  51. if(newLevel <= 10){
  52. map.clearOverlays();
  53. map.setCenter(new GLatLng(1.371443, 103.833160), 10);
  54. }
  55.  
  56. });
  57.  
  58. GEvent.addListener(map, "clearoverlays", function() {
  59.  
  60. var zoomLevel = map.getZoom();
  61.  
  62. if(zoomLevel == 15){
  63.  
  64. //project location display
  65.  
  66. var request = GXmlHttp.create();
  67. request.open("GET", "position.xml", true);
  68. request.onreadystatechange = function() {
  69. if (request.readyState == 4) {
  70. var xmlDoc = GXml.parse(request.responseText);
  71. // obtain the array of markers and loop through it
  72. var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  73.  
  74.  
  75. for (var i = 0; i < markers.length; i++) {
  76. // obtain the attribues of each marker
  77. var lat = parseFloat(markers[i].getAttribute("lat"));
  78. var lng = parseFloat(markers[i].getAttribute("lng"));
  79. var point = new GLatLng(lat,lng);
  80. var label = markers[i].getAttribute("label");
  81.  
  82. var url= "../project/"+markers[i].getAttribute("loc")+"/";
  83.  
  84. map.addOverlay(createMarker(point, i, url));
  85. }
  86. }
  87. }
  88. request.send(null);
  89. //end of display
  90. }
  91.  
  92. if(zoomLevel == 11){
  93.  
  94. addCustomIcon("district.xml", 15);
  95.  
  96.  
  97. }
  98.  
  99. });
  100.  
  101. function addCustomIcon(xmlfile, zoomlevel){
  102.  
  103. // district overlay display
  104. var circleIcon = new GIcon(G_DEFAULT_ICON);
  105. //var zoom = map.getZoom();
  106. var size = 10;
  107.  
  108. circleIcon.image = "icon10.png";
  109. circleIcon.iconSize = new GSize(size,size);
  110. circleIcon.shadow = "transparent10.png";
  111. circleIcon.shadowSize = new GSize(size,size);
  112. circleIcon.iconAnchor = new GPoint(size/2, size/2);
  113.  
  114. var markerOptions = { icon:circleIcon };
  115.  
  116. // for customized marker
  117. var req = GXmlHttp.create();
  118. req.open("GET", xmlfile, true);
  119. req.onreadystatechange = function() {
  120. if (req.readyState == 4) {
  121. var xmlDoc = GXml.parse(req.responseText);
  122. // obtain the array of markers and loop through it
  123. var zones = xmlDoc.documentElement.getElementsByTagName("zone");
  124.  
  125. for (var i = 0; i < zones.length; i++) {
  126. // obtain the attribues of each marker
  127. var lat = parseFloat(zones[i].getAttribute("lat"));
  128. var lng = parseFloat(zones[i].getAttribute("lng"));
  129. var point = new GLatLng(lat,lng);
  130. var marker = new GMarker(point, markerOptions);
  131. map.addOverlay(marker);
  132.  
  133. GEvent.addListener(marker, "click", function(latlng) {
  134. if(latlng)
  135. map.setCenter(latlng, zoomlevel);
  136. });
  137.  
  138. }
  139.  
  140. }
  141. }
  142. req.send(null);
  143. //end of display
  144.  
  145.  
  146.  
  147. }
  148.  
  149.  
  150.  
  151.  
  152.  
  153. }
  154. }
  155.  
  156. //----------------------------other functions ----------------------------------
  157. function createMarker(point, i, url) {
  158.  
  159. var blueIcon = new GIcon(G_DEFAULT_ICON);
  160. var size = 20;
  161.  
  162. blueIcon.image = "icon15_"+i+".png";
  163. blueIcon.iconSize = new GSize(size,size);
  164. blueIcon.shadow = "transparent10.png";
  165. blueIcon.shadowSize = new GSize(size,size);
  166. blueIcon.iconAnchor = new GPoint(size/2, size/2);
  167.  
  168. var markerOptions = { icon:blueIcon };
  169.  
  170. var marker = new GMarker(point, markerOptions);
  171. marker.value = i;
  172.  
  173.  
  174. GEvent.addListener(marker, "click", function(latlng) {
  175.  
  176.  
  177. var target = "floatwindow";
  178.  
  179. /*
  180.   var pixel = map.fromLatLngToContainerPixel(latlng);
  181.   document.getElementById(target).style.top = pixel.y;
  182.   document.getElementById(target).style.left = pixel.x;
  183.   */
  184. document.getElementById(target).innerHTML = ' Fetching data...';
  185.  
  186. if (window.XMLHttpRequest) {
  187. req = new XMLHttpRequest();
  188. } else if (window.ActiveXObject) {
  189. req = new ActiveXObject("Microsoft.XMLHTTP");
  190. }
  191. if (req != undefined) {
  192. req.onreadystatechange = function() {
  193. if (req.readyState == 4) { // only if req is "loaded"
  194. if (req.status == 200) { // only if "OK"
  195.  
  196. var str = req.responseText;
  197. var result = str.replace(/src=\"/gi, "src=\""+url);
  198.  
  199. document.getElementById(target).innerHTML = result;
  200. } else {
  201. document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
  202. }
  203. }};
  204.  
  205. req.open("GET", url+"index.html", true);
  206. req.send("");
  207. }
  208.  
  209. document.getElementById("cross").style.zIndex = 5;
  210. document.getElementById("floatwindow").style.zIndex = 4;
  211. });
  212.  
  213. return marker;
  214. }
  215.  
  216. function CustomGetTileUrl(a,b) {
  217.  
  218. var z = b;
  219. var f = "/sg"+b+"/"+"Tile_"+a.x+"_"+a.y+"_"+z+".jpg";
  220.  
  221. return f;
  222. }
  223.  
  224. function toggleBack(){
  225. document.getElementById("cross").style.zIndex = 1;
  226. document.getElementById("floatwindow").style.zIndex = 2;
  227. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.