Here is my code.
function CICOverlay(json) {
/*
* @param is a json object containing the search parameters
* - IDReiseart
* - Hotelart
* - IDLand
* - Region
*/
this.param = json.param;
/*
* @zielgebiet is an Array containing name and geodata of zielgebiet (Lang, Region, Ort oder Objekt)
*/
this.zielgebiet = json.data;
/*
* @hasOverlayText is boolean variable, overlays are the custom icons that represent zielgebiet
on googlemap. After creating overlays the text will be dynamically appended
in overly DIVs. after appending text it will be set to true.
*/
this.hasOverlayText = false;
/*
* @zielgebietReference is a Hash representation of zielgebiet object. with zielgebiet ID as Key.
*/
this.zielgebietReference = {};
/*
* @latlng is an instance of google.maps.LatLng.
*/
this.latlng = new google.maps.LatLng(45, 15);
// this.latlng = new google.maps.LatLng(52.639121, 14.864258);
/*
* @mapBounds represents a rectangle in geographical coordinates, including
one that crosses the 180 degrees longitudinal meridian
*/
this.mapBounds = new google.maps.LatLngBounds();
/*
* @options is json object contining the setting for our googlemap.
*/
this.options = {
zoom: 20,
center: this.latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
};
/*
* @map is an instance of google.maps.Map.
*/
this.map = new google.maps.Map(document.getElementById("googlemapsearch_body"),this.options);
/*
* @overlayControl is an instance of IconControl class. which is extension
of OverlayView class. in Order to gat access to the googlemao
Panes.
*/
this.overlayControl = new IconControl(this.map);
/*
* @that is a global reference to this object.
*/
that = this;
/*
* registring googlemaps event listeners.
*/
google.maps.event.addListener(this.map, 'idle', function(overlayControl, countries) {
return function() {
that.setOverlaysText(that.overlayControl, that.countries);
}
}(this.overlayControl, this.zielgebiet));
zoomChangeBoundsListener = google.maps.event.addListener(this.map, 'bounds_changed', function(event) {
//console.info(this.getZoom())
});
}
CICOverlay.prototype = {
setMarkers: function() {
/*
* @image is a custom image of Markers on googlemap.
*/
var image = new google.maps.MarkerImage('/images/icon.png', new google.maps.Size(170, 52),
new google.maps.Point(0,0), new google.maps.Point(0, 170));
/*
* @_url contains the URL for each marker, which will be remotely called on clicking
the marker.
*/
var _url = "?";
this.mapBounds = new google.maps.LatLngBounds();
// Looping over the param object's properties.
for(property in this.param) {
var value = (this.param[property]) ? this.param[property] : "";
if(_url.length > 1) { _url += "&"; }
_url += property + "=" + value;
}
for (var i = 0; i < this.zielgebiet.length; i++) {
var jsonObj = this.zielgebiet[i];
var markerIndex = jsonObj.idparent;
this.zielgebietReference[markerIndex] = {'name': jsonObj.name, 'angebot':jsonObj.numberOfProducts, 'id': jsonObj.idparent}
var url = _url + "&sucheGoogleMapType=" + jsonObj.type + "&sucheGoogleMapIDParent=" + jsonObj.idparent;
var latlng = new google.maps.LatLng(parseFloat(jsonObj.lat), parseFloat(jsonObj.lng));
var marker = new google.maps.Marker({
position: latlng,
map: this.map,
icon: image,
zIndex: parseInt(markerIndex)
});
this.mapBounds.extend(latlng);
google.maps.event.addListener(marker, 'click', function(_url) {
return function() {
updateKarteRecherche(_url)
}
}(url));
}
},
setOverlaysText: function(overlayControl, countries) {
for(var i = 0; i < overlayControl.icons_.length; i++) {
if( overlayControl.icons_ && overlayControl.icons_[i]) {
var zIndex = overlayControl.icons_[i].style.zIndex;
var overlay = overlayControl.icons_[i];
var childs = overlay.childNodes;
var len = childs.length;
while (len--) {
if (childs[len].className.indexOf("gmap") >= 0 ) {
overlay.removeChild(childs[len]);
}
}
var name = document.createElement('div');
name.className = 'gmapZielgebietName';
name.id = "gmapIconZielgebietName_" + this.zielgebietReference[zIndex].id;
name.appendChild(document.createTextNode(this.zielgebietReference[zIndex].name));
overlayControl.icons_[i].appendChild(name);
var angebot = document.createElement('div');
angebot.className = 'gmapAngebot';
angebot.id = "gmapIconZielgebietAngebote_" + this.zielgebietReference[zIndex].id;
if(this.zielgebietReference[zIndex].angebot.indexOf("-1") < 0) {
angebot.appendChild(document.createTextNode(this.zielgebietReference[zIndex].angebot ));
}
overlayControl.icons_[i].appendChild(angebot);
}
}
this.hasOverlayText = true;
}, /* End: setOverlaysText*/
fitBounds: function() {
this.map.fitBounds(this.mapBounds);
console.info()
}
}
/*
In Order to get access to the Pans and MapCanvasProjection
create a custom class that extends OverlayView.
*/
function IconControl(map) { this.setMap(map);}
// Extend OverlayView so we can access MapCanvasProjection.
IconControl.prototype = new google.maps.OverlayView();
IconControl.prototype.onAdd = function() {};
IconControl.prototype.draw = function() {
this.icons_ = this.getPanes().overlayImage.childNodes;
};
but the Marker in top side, remain outof view port.