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("isMapVisible", 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() > 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 && this.markerObjects.length > 0) {
for (var i = 0; i < 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 < 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, "click");
}
/*
* 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("/images/icons/haus" + i +".gif",
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 == "merkzettel" && !this.mapAdjusted) {
adjustMap();
}
new Ajax.Request('/web/skripte/template/infowindow.cfm?idobjekt='+idObjekt+"&seite="+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 == "merkzettel") {
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 < this.markers.length; i++) {
if(this.markers[i].idobjekt == idobjekt) {
this.hasUpdates = false;
google.maps.event.trigger(this.markerObjects[this.markers[i].position], "click");
}
}
}
};
Refactorings
No refactoring yet !
I have written a googlemap Wrapper class for my website. And need a code review and suggestions how I can improve it.
Thanks.