Javascript class to build Googlemaps mapplet

Update: Alhough this works, I now know that its not the best way to do this so don’t use it!

I have many Google maps dotted all over my site and was getting annoyed with many Javascript funtions to build these maps when they were commonly the same. So, I decided to create a Javascript class to do this for me therefore only having one block of code and then re-using it.

This is only the first version so stay tuned for updates and if anyone has any improvements then let me know. This version has functions to:

• Build map
• Create marker with infowindow
• Get data from XML data file (if in correct format)
• Get data from GeoRSS feed

Here is the class:

//----------------------------------------------------
// === Create an array of GIcons() ===
var gicons = [];
gicons["silver"] = new GIcon(G_DEFAULT_ICON, "path/silv-marker.png");
gicons["green"] = new GIcon(G_DEFAULT_ICON, "path/green_mkr.png");
gicons["red"] = new GIcon(G_DEFAULT_ICON, "path/red_mkr.png");
gicons["pin"] = new GIcon(G_DEFAULT_ICON, "path/blue-pushpin.png");
gicons["pin"].iconSize = new GSize(32, 32);
// NOTE: DOWNLOAD THE IMAGES ABOVE - CAN GET FROM MANY SITES
//----------------------------------------------------

//----------------------------------------------------
//--- GooglemapsJSClass  -----------------------------
//----------------------------------------------------
//--- Class to handle all objects used on website  ---
//----------------------------------------------------
//--- Version: 0.9 -----------------------------------
//----------------------------------------------------
GooglemapsJSClass = {
	
	//------------------------------------------------
	// GMapConfig - Object for GoogleMaps
	GMapletConfig : function (MapID) {

		//get ID of map container
		this.MapContainerID = MapID;
	
	
		//Function to load map with settings
		this.MapInit = function() {
			
			if (GBrowserIsCompatible()) {
				
				//Get map container
				var container = document.getElementById(this.MapContainerID);
			
				//Init new GMap2 obj
				mapObj = new GMap2(container, {draggableCursor:"crosshair"});
		
				// ----------------- Set configs -----------------
				// Enable dragging?
				if (this.disableDragging == true){
				mapObj.disableDragging();
				}
			
				// Enable info window?
				if (this.disableInfoWindow == true){
					mapObj.disableInfoWindow();
				}
			
				// Use scroll wheel?
				if (this.scrollWheelZoom == true){
					mapObj.enableScrollWheelZoom();
					GEvent.addDomListener(mapObj.getContainer(), "DOMMouseScroll", wheelevent);
        			mapObj.getContainer().onmousewheel = wheelevent;
				}
			
				//Use Double Click zoom?
				if (this.doubleClickZoom == true){
					mapObj.enableDoubleClickZoom();
				}
			
				//Include type control?
				if (this.typeControl == true){
					mapObj.addControl(new GMapTypeControl());
				}
			
				//Select map type
				switch (this.mapType){
    				case 'satellite': { mapObj.setMapType(G_SATELLITE_MAP); break }
					case 'physical': { mapObj.setMapType(G_PHYSICAL_MAP); break }
    				case 'hybrid': { mapObj.setMapType(G_HYBRID_MAP); break }
    				default: { mapObj.setMapType(G_NORMAL_MAP); break }
  				}			
			
				//Select map zoom/pan control
				switch (this.mapControl){
    				case 'smallzoom': { mapObj.addControl(new GSmallZoomControl()); break }
    				case 'large': { mapObj.addControl(new GLargeMapControl()); break }
    				default: { mapObj.addControl(new GSmallMapControl()); break }
  				}
			
				//Include Scale control?
				if (this.ScaleControl == true){
					mapObj.addControl(new GScaleControl());
				}
			
				//Include Overview control?
				if (this.OverviewControl == true){
					mapObj.addControl(new GOverviewMapControl());
				}
			
				//Include Continuous zoom?
				if (this.ContZoom == true){
					mapObj.enableContinuousZoom();
				}

				//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
				// Set centre and zoom
        		mapObj.setCenter(new GLatLng(this.centreLat, this.centreLng), this.zoom);
				//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
				
			}
			
			// Stops page scrolling when using the wheel
			function wheelevent(e){
    			if (!e){
    				e = window.event;
    			}
    			if (e.preventDefault){
    				e.preventDefault();
				}
			}
			//e
				
			return true;
		
		}
		
		//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
		//Function to load map with settings
		this.AddMyLayers = function(layerVar) {
			
			this.myLayer = layerVar;
			mapObj.addOverlay(this.myLayer);
			
			return true;
			
		}
	
	},
	//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	
	//Function to create marker with click event to display html
	createMarker : function (point,html,iconType){

		var marker = "";
        marker = new GMarker(point, iconType);
		
        GEvent.addListener(marker, "click", function(){
        	marker.openInfoWindowHtml(html);
        });
		this.marker = marker;
        return this.marker;
	},
	//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	
	
	//Function to get XML data and display each point
	getXMLData : function (theUrl, iconType){
		
		var myURL = theUrl;
		var iconStyle = iconType;
		var MyMarkersArr = new Array();
		
		GDownloadUrl(myURL, function(data, responseCode) {
  			var xml = GXml.parse(data);
  			var markers = xml.documentElement.getElementsByTagName("marker");

		
			for (var i = 0; i < markers.length; i++) {
				
    			point= new GLatLng(parseFloat(markers[i].getAttribute("lat")),

				parseFloat(markers[i].getAttribute("lng")));

    			html = markers[i].getAttribute("infowindow");

    			MyMarkersArr[i] = new GooglemapsJSClass.createMarker(point,html,iconStyle);
    			mapObj.addOverlay(MyMarkersArr[i]);

  			}
			

		});
		return true;
	},
	//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	
	
	//Function to get GeoRSS feed data and display points
	getGeoRSSData : function (theRSSUrl, iconType){
		
		var geoxml = new GGeoXml(theRSSUrl);
			
		mapObj.addOverlay(geoxml);
		
		return true;
		
	}
	//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	

//End Class
}
//-------------------------------------------------

Simply stick this in a javascript.js and link to it from your other page and then insert and configure the following in Javascript tags;

//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//Def var to hold new objects
var MapObj;
var myMarker;
var xmlData;
var geoRSSData;
// DONT EDIT THE ABOVE

//Call codeon page load
window.onload=function(){

	
	//New GooglemapsJsClass Object - Set Configs
	
	// Centre map Latitude
	GooglemapsJsClass.GMapletConfig.prototype.centreLat = -2.747360;
	
	// Centre map Longitude
	GooglemapsJsClass.GMapletConfig.prototype.centreLng = 35.266113;
	
	// Centre Zoom level
	GooglemapsJsClass.GMapletConfig.prototype.zoom = 6;
	
	// true = disable map dragging / false = enable dragging
	GooglemapsJsClass.GMapletConfig.prototype.disableDragging = false;
	
	// true = disable the info window pop up / false = allow pop ups
	GooglemapsJsClass.GMapletConfig.prototype.disableInfoWindow = false;
	
	// true = enable zooming by double click / false = disable this
	GooglemapsJsClass.GMapletConfig.prototype.doubleClickZoom = true;
	
	// true = enable zoom by mouse wheel scroll / false = turn this off
	GooglemapsJsClass.GMapletConfig.prototype.scrollWheelZoom = true;
	
	// true = show map type control / false = hide this
	GooglemapsJsClass.GMapletConfig.prototype.typeControl = true;
	
	//MAP TYPE
	// default: NORMAL MAP / physical: PHYSICAL MAP / hybrid: HYBRID MAP / satellite: SATELLITE MAP
	GooglemapsJsClass.GMapletConfig.prototype.mapType = 'default';
	
	//MAP CONTROL
	// default: GSmallMapControl / smallzoom: GSmallZoomControl / large: GLargeMapControl
	GooglemapsJsClass.GMapletConfig.prototype.mapControl = 'default';
	
	// true = show scale control / false = hide this
	GooglemapsJsClass.GMapletConfig.prototype.ScaleControl = false;
	
	// true = show overview map in corner / false = hide this
	GooglemapsJsClass.GMapletConfig.prototype.OverviewControl = false;
	
	// true = smooth the zoom / false = turn this off
	GooglemapsJsClass.GMapletConfig.prototype.ContZoom = true;
	
	//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	// Create new object using above settings
	MapObj = new GooglemapsJsClass.GMapletConfig("ID OF MAP DIV");
	
	//Load Map
	MapObj.MapInit();
	
	//Create a marker object
	myMarker = new GooglemapsJsClass.createMarker(var of Marker point, myMarkerText, gicons["pin"]);
	
	//Create XML object from file + add markers
	xmlData = new GooglemapsJsClass.getXMLData("XML FILE PATH", gicons["silver"]);
	
	//Create GeoRSS Object from georss feed + plot points
	geoRSSData = new GooglemapsJsClass.getGeoRSSData("GEORSS URI", gicons["silver"]);

}
//-------------------------------------------


//Add onunload function
window.onunload=GUnload;
//<<<<<<<< END <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

This should give you a Google map in the DIV which you specified earlier – an example of mine is here.