Pastable version of Javascript googlemap wrapper class.

<pre class='prettyprint' language='javascript'>function MapWrapper(containerId, userDefinedOptions) {

MAPWRAPPER_SCOPE = this;
	this.ZOOM_LEVEL_MAX = 9;
	
	/*
	 * if caller does not provides DIV id that will contain map
	 * then a default ID 'map' will be used otherwise the provided ID.
	 */
  containerId = containerId || 'map';

/*
	 * markerObjects array container actual GoogleMaps marker objects.
	 */
	this.markerObjects = [];

/*
		* markers array container only lat, lng info as a json object, 
		* which will be used to create actual GoogleMaps Marker Objects
		*/ 	 
  this.markers = [];

/*
		*  As in V3 a maps may have more than one infowindows open
		* Make sure that only on infowindow is open at a time by
		* declaring one single object in the class.
		* this.infoWindow = new google.maps.InfoWindow();
		*/ 	 
	this.infoWindow = new google.maps.InfoWindow();

/*
   * Boolean variable, containing state whether the map
   * has new data/Markers to be updated.   
   */   
  this.hasUpdates = true;

/*
	 * Befire displaying infowidow, the map will be resized 
	 * if necessary, this boolean contains information whether 
	 * map is Resized?
	 */
  this.mapAdjusted = false;

/*
   * Googlemap object reference.
   */   
  this.map = null;

/*
   * Div reference that contains Googlemap.
   */   
  this.mapContainer = document.getElementById(containerId);

/*
	 * If mapContainer containes any information, save it first
	 * to use it later. in our case on Ãœbersicht page initially
	 * the mapContainer contain search parametes information.
	 */
	this.searchInfo = this.mapContainer.innerHTML;

/*
	 * Default class options.
	 */
  this.options = {
							startZoom	: 5,
				 centerLatitude : 52.525961,
				centerLongitude : 15.255119,
		showMinimizeControl	: false
	};
	
	/*
	 * add/update the option properties, if caller 
	 * provides new settings of class properites.
	 */
	if(userDefinedOptions !== undefined ) {
      for (var property in userDefinedOptions) {
	    	if(userDefinedOptions.hasOwnProperty(property)) {
					this.options[property] = userDefinedOptions[property];
				}	
			}
  }
}; // End Class constructor.

MapWrapper.prototype = {

init: function(data) {

this.markers = data;
		this.mapContainer.setAttribute(&quot;isMapVisible&quot;, true);
		var latlng = new google.maps.LatLng(this.options.centerLatitude, this.options.centerLongitude);
		/*
		 * JSON Object conating initial map settings
		 */ 	
		var mapoptions = {
				zoom: this.options.startZoom,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI: true,
				mapTypeControl: true, 
	    	mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
				navigationControl: true,
				navigationControlOptions: {
				style : google.maps.NavigationControlStyle.DEFAULT,
				position: google.maps.ControlPosition.LEFT
				}
	  };

/*
		 * Creating map.
		 */
		this.map = new google.maps.Map(this.mapContainer, mapoptions);

/*
		 * Add minimize control if provided in object's options.
		 */	
		if(this.options.showMinimizeControl) {
			customControl = new CICViewControl();
			customControl.index = 1;
			this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(customControl);
		}
		/*
		 * Add / Update markers on map.
		 */
    this.updateMarkers();

/*
		 * Check current zoom level again the ZOOM_LEVEL_MAX constant
		 */
    zoomChangeBoundsListener = google.maps.event.addListener(this.map, 'bounds_changed', function(event) {
			 if (this.getZoom() &gt; MAPWRAPPER_SCOPE.ZOOM_LEVEL_MAX) {
       	this.setZoom(MAPWRAPPER_SCOPE.ZOOM_LEVEL_MAX);
			 }		
       google.maps.event.removeListener(zoomChangeBoundsListener);
    });
			
	}, // End init function.

updateMarkers: function() {
		/*
		 * Clear markers, if exist, before drawing the new ones.
		 */
		if (this.markerObjects &amp;&amp; this.markerObjects.length &gt; 0) {
    	for (var i = 0; i &lt; this.markerObjects.length; i++) {
      	this.markerObjects[i].setMap(null);
    	}
  	}
		/*
		 * draw new icons.
		 */
     this.drawIcons();      
  }, // End updateMarkers function
  
 	drawIcons: function() {
 
    var mapBounds = new google.maps.LatLngBounds();

for(var i = 0; i &lt; this.markers.length; i++) {

/*
			 * continue if GEO-Coordinates maintained.
			 */
			if(parseInt(this.markers[i].lat, 10) === 0 || parseInt(this.markers[i].lng, 10) === 0) {
				continue;
			}
	
			/*
			 * Create google.maps.LatLng from GEO-Coordinates.
			 */		
			var latlng = new google.maps.LatLng(parseFloat(this.markers[i].lat),parseFloat(this.markers[i].lng));

/*
			 * Create google.maps.Marker on a specific LatLng.
			 */		
			var marker = new google.maps.Marker({
								position:latlng, 
								icon:this.createIcon(this.markers[i].position),
								map:this.map 	
							});

/*
		 * Add click event listernet on Marker.
		 */
                 google.maps.event.addListener(marker, 'click', function(target, value) {
                                            return function() {
			                     MAPWRAPPER_SCOPE.showInfoWindow(target, value);
                                            };
                                          }(marker, this.markers[i].idobjekt) );

/*
			 * If Marker's infowindow visible property is set to true, trigger the click event
			 */
			if(this.markers[i].isVisible) {
				this.hasUpdates = false;  
				google.maps.event.trigger(marker, &quot;click&quot;);
			}
		
			/*
			 * Extend mapbounds.
			 */
			mapBounds.extend(latlng);

this.markerObjects[this.markers[i].position] = marker;
		}

this.map.fitBounds(mapBounds);

createIcon: function(i) {

var icon = new google.maps.MarkerImage(&quot;/images/icons/haus&quot; + i +&quot;.gif&quot;,
						new google.maps.Size(22,21),
						new google.maps.Point(0,0),
						new google.maps.Point(14,14) );
   return icon;  
  },
  
  showInfoWindow: function(marker, idObjekt) {
		 this.infoWindow.close();	
     this.hasUpdates = false;

if(this.options.seite == &quot;merkzettel&quot; &amp;&amp; !this.mapAdjusted) {
				adjustMap();
			}

new Ajax.Request('/web/skripte/template/infowindow.cfm?idobjekt='+idObjekt+&quot;&amp;seite=&quot;+this.options.seite, {

onSuccess: function(response) {
				   MAPWRAPPER_SCOPE.infoWindow.setContent(response.responseText.strip());
				   MAPWRAPPER_SCOPE.infoWindow.open(MAPWRAPPER_SCOPE.map, marker);
				},

onFailure: function(response) {
				  MAPWRAPPER_SCOPE.infoWindow.open(MAPWRAPPER_SCOPE.map, marker);
				},

onComplete: function(response) {
				 if(MAPWRAPPER_SCOPE.options.seite == &quot;merkzettel&quot;) {								
				   getGesamtPreisMerkzettelMap(idObjekt,true); // liefert den Gesamtpreis in googlemap auf Merkzettel
				 }
				else {
				 getGesamtPreisUebersichtMap(idObjekt,true); // liefert den Gesamtpreis in googlemap auf Kurzansicht
				}
			}

});
  },

triggerInfoWinfow: function(idobjekt) {
		for(var i = 0; i &lt; this.markers.length; i++) {
			if(this.markers[i].idobjekt == idobjekt) {
				this.hasUpdates = false;  
				google.maps.event.trigger(this.markerObjects[this.markers[i].position], &quot;click&quot;);
			}
		}
	}
};</pre>
<a href="http://www.refactormycode.com/codes/1404-javascript-googlemap-wrapper-class" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://www.refactormycode.com/images/small_logo.gif" style="border:0" /></a>

Refactor :my => 'code'

Recent

Popular

Pastable version of Javascript googlemap wrapper class.