My first project a map plus some markers and styling

This is the first project in Javascript using the google maps api. 1: /* 2: this was my first program in javascript to explore the Google Maps API 3: */ 4: /* 5: This line adds a DomListener where the arguments are (1) the name of the DOM object (2) a string with the 6: event associated with the object that you are listening for and (3) the name of the function which runs when 7: the even occurs. 8: QN: How to you pass arguments to the function? Or do you avoid doing so? 9: */ 10: google.maps.event.addDomListener(window, 'load', booble); 11: function booble() { 12: /* 13: This section declares a few google LatLng objects to hold the co-ordinates of markers and locations. 14: Some points that I noticed about LatLng objects: 15: (1) Note that you cannot actually change the Lat or the Long of the object after you create it! 16: (2) You use the lat() or lng() methods to return a number with the Lat or Lng 17: */ 18: var chorleywood = new google.maps.LatLng(51.65,-0.48333); 19: var cw2 = new google.maps.LatLng(51.6505,-0.48333); 20: var hiroo = new google.maps.LatLng(35.6554357,139.71483349999994); 21: var myMarkers = []; 22: /* 23: addMyMarker takes three parameters ands adds on to myMarkers a new marker location 24: note that you can use the push() method of the array to push() on a newly created 25: marker object 26: */ 27: var addMyMarker = function(title, location){ 28: myMarkers.push(new google.maps.Marker({position:location,title:title, draggable:false})); 29: } 30: /* 31: use addMyMarker to push a few more markers on to the myMarkers array one by one 32: */ 33: addMyMarker("hello world", chorleywood); 34: addMyMarker("boo big boy",cw2); 35: /* 36: use a for loop to add on even more markers. Use the lat() and long() methods on the existing LatLng object 37: to get some numbers, 38: Note that I tried this function using cw2.lat() directly as a below but it broke the whole program stopping the 39: maps form displaying. I really don't know why this is. 40: */ 41: for (var x =1; x !=5 ; x++){ 42: var a = cw2.lat(); 43: var b = cw2.lng(); 44: var temp = new google.maps.LatLng(a + x * 0.0005,b); 45: addMyMarker("poo",temp); 46: } 47: //declare arrays which are 48: var malcolms_styles = new Array(); 49: var malcolms_green = new Array(); 50: malcolms_green = [ 51: {"stylers": [ 52: {"hue": "#bbff00"}, 53: {"weight": 0.5}, 54: {"gamma": 0.5} 55: ]}, 56: {"elementType": "labels", "stylers": [ 57: {"visibility": "off"} 58: ]}, 59: {"featureType": "landscape.natural", "stylers": [ 60: {"color": "#a4cc48"} 61: ]}, 62: {"featureType": "road", "elementType": "geometry", "stylers": [ 63: {"color": "#ffffff"}, 64: {"visibility": "on"}, 65: {"weight": 1} 66: ]}, 67: {"featureType": "administrative", "elementType": "labels", "stylers": [ 68: {"visibility": "on"} 69: ]}, 70: {"featureType": "road.highway", "elementType": "labels", "stylers": [ 71: {"visibility": "simplified"}, 72: {"gamma": 1.14}, 73: {"saturation": -18} 74: ]}, 75: {"featureType": "road.highway.controlled_access", "elementType": "labels", "stylers": [ 76: {"saturation": 30}, 77: {"gamma": 0.76} 78: ]}, 79: {"featureType": "road.local", "stylers": [ 80: {"visibility": "simplified"}, 81: {"weight": 0.4}, 82: {"lightness": -8} 83: ]}, 84: {"featureType": "water", "stylers": [ 85: {"color": "#4aaecc"} 86: ]}, 87: {"featureType": "landscape.man_made", "stylers": [ 88: {"color": "#718e32"} 89: ]}, 90: {"featureType": "poi.business", "stylers": [ 91: {"saturation": 68}, 92: {"lightness": -61} 93: ]}, 94: {"featureType": "administrative.locality", "elementType": "labels.text.stroke", "stylers": [ 95: {"weight": 2.7}, 96: {"color": "#f4f9e8"} 97: ]}, 98: {"featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [ 99: {"weight": 1.5}, 100: {"color": "#e53013"}, 101: {"saturation": -42}, 102: {"lightness": 28} 103: ]} 104: ]; 105: malcolms_styles = [ 106: {"featureType": "water", 107: "stylers": [ 108: {"color": "#19a0d8"} 109: ]}, 110: {"featureType": "administrative", "elementType": "labels.text.stroke", 111: "stylers": [ 112: {"color": "#ffffff"}, 113: {"weight": 6} 114: ]}, 115: {"featureType": "administrative", "elementType": "labels.text.fill", 116: "stylers": [ 117: {"color": "#e85113"} 118: ]}, 119: {"featureType": "road.highway", "elementType": "geometry.stroke", 120: "stylers": [ 121: {"color": "#efe9e4"}, 122: {"lightness": -40} 123: ]}, 124: {"featureType": "road.arterial", "elementType": "geometry.stroke", 125: "stylers": [ 126: {"color": "#efe9e4"}, 127: {"lightness": -20} 128: ]}, 129: {"featureType": "road", "elementType": "labels.text.stroke", 130: "stylers": [ 131: {"lightness": 100} 132: ]}, 133: {"featureType": "road", "elementType": "labels.text.fill", 134: "stylers": [ 135: {"lightness": -100} 136: ]}, 137: {"featureType": "road.highway", "elementType": "labels.icon"}, 138: {"featureType": "landscape", "elementType": "labels", 139: "stylers": [ 140: {"visibility": "off"} 141: ]}, 142: {"featureType": "landscape", 143: "stylers": [ 144: {"lightness": 20}, 145: {"color": "#efe9e4"} 146: ]}, 147: {"featureType": "landscape.man_made", 148: "stylers": [ 149: {"visibility": "off"} 150: ]}, 151: {"featureType": "water", "elementType": "labels.text.stroke", 152: "stylers": [ 153: {"lightness": 100} 154: ]}, 155: {"featureType": "water", "elementType": "labels.text.fill", 156: "stylers": [ 157: {"lightness": -100} 158: ]}, 159: {"featureType": "poi", "elementType": "labels.text.fill", 160: "stylers": [ 161: {"hue": "#11ff00"} 162: ]}, 163: {"featureType": "poi", "elementType": "labels.text.stroke", 164: "stylers": [ 165: {"lightness": 100} 166: ]}, 167: {"featureType": "poi", "elementType": "labels.icon", 168: "stylers": [ 169: {"hue": "#4cff00"}, 170: {"saturation": 58} 171: ]}, 172: {"featureType": "poi", "elementType": "geometry", 173: "stylers": [ 174: {"visibility": "on"}, 175: {"color": "#f0e4d3"} 176: ]}, 177: {"featureType": "road.highway", "elementType": "geometry.fill", 178: "stylers": [ 179: {"color": "#efe9e4"}, 180: {"lightness": -25} 181: ]}, 182: {"featureType": "road.arterial", "elementType": "geometry.fill", 183: "stylers": [ 184: {"color": "#efe9e4"}, 185: {"lightness": -10} 186: ]}, 187: {"featureType": "poi", "elementType": "labels", 188: "stylers": [ 189: {"visibility": "simplified"} 190: ]} 191: ] 192: /* to create a map object you have to pass two parameters to the Map method which is used to construct 193: the map object. One parameter is the DOM model div object that will hold the map and the other is the 194: mapOptions object literal. 195: The mapOptions object literal must have at a minimum "center as a google maps LatNng object plus a zoom level. 196: It can have other optional items as well - such as an array holding the style referred to as styles. 197: */ 198: var mapOptions = { 199: center: hiroo,//we are creating a LatLng object which is part of the mapOptions object literal 200: zoom: 15, //this can just be an integer 201: styles: malcolms_green //this has to be an array that conforms to the styles rules 202: }; 203: var bigMapOptions = { 204: center: chorleywood,//I can just write out the place name - much better!! 205: zoom: 15, 206: styles: malcolms_styles, 207: backgroundColor: "blue" 208: } 209: /* 210: This section actually creates the map objects. I am not sure whether it has to be at the end of the 211: function or not. Also I am not sure if it has to be before the markers section below 212: */ 213: var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); 214: var bigmap = new google.maps.Map(document.getElementById("big-map-canvas"),bigMapOptions); 215: /* 216: Go through the myMarkers array to display the markers using the setMap(mapname) method of the marker object 217: */ 218: for (var n = 0; n!= myMarkers.length; n++){ 219: myMarkers[n].draggable = true; 220: myMarkers[n].setMap(bigmap) 221: } 222: }