Two or more markers are managed.
Two or more markers are managed by using the marker manager.
Example code
Source code of this demonstration
Main code
(function($){ window.addEvent("domready", function(){ var mapDiv = $('gmap'); var map = new google.maps.Map(mapDiv, { disableDefaultUI: true, zoom: 15, center: new google.maps.LatLng(35.6666870, 139.731859), mapTypeId: google.maps.MapTypeId.ROADMAP }); //The marker is made based on the parameter of the marker. var markers = [{ title: 'MMap.Marker', image: 'http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg', url: 'http://holyshared.github.com/MMap/Demos/marker.html', position: new google.maps.LatLng(35.6666870, 139.731859) }, { title: 'MMap.Marker.Image', image: 'http://holyshared.github.com/MMap/Demos/images/demo/img02.jpg', url: 'http://holyshared.github.com/MMap/Demos/marker.image.html', position: new google.maps.LatLng(35.6666870, 139.733859) }, { title: 'MMap.Marker.Images', image: 'http://holyshared.github.com/MMap/Demos/images/demo/img03.jpg', url: 'http://holyshared.github.com/MMap/Demos/marker.images.html', position: new google.maps.LatLng(35.6650870, 139.729859) }, { title: 'MMap.Window', image: 'http://holyshared.github.com/MMap/Demos/images/demo/img04.jpg', url: 'http://holyshared.github.com/MMap/Demos/window.html', position: new google.maps.LatLng(35.6686870, 139.728859) }, { title: 'MMap.MarkerLoader', image: 'http://holyshared.github.com/MMap/Demos/images/demo/img05.jpg', url: 'http://holyshared.github.com/MMap/Demos/marker.loader.html', visible: false, position: new google.maps.LatLng(35.6646870, 139.726859) }]; var view = new CurrentMarkerView(); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(view.getInstance()); var onClick = function(event){ event.preventDefault(); markerManager.active(this); } var onActive = function(event){ view.set('title', this.getTitle()); view.set('url', this.getURL()); } var manageMarkers = []; markers.each(function(context){ //markerClick var options = Object.merge(context, { onClick: onClick, onActive: onActive }); var imageMarker = new MMap.Marker.Image(options); manageMarkers.push(imageMarker); }); //The marker manager is made, and the managed marker is set. var markerManager = new MMap.MarkerManager({ markers: manageMarkers }); markerManager.setMap(map); //The arranged map is specified for all managed markers. markerManager.visibleAll(); markerManager.active(manageMarkers.getLast()); }); }(document.id));
View code
(function($){ var CurrentMarkerView = this.CurrentMarkerView = new Class({ Extends: MMap.MVCObject, Implements: [MMap.Events], initialize: function(){ this._setup(); }, _setup: function(){ var self = this; var title = new Element('h3', {'html': 'Information'}); this._container = new Element('div', {'class': 'currentMarkerView'}); title.inject(this._container); this._options = new Element('dl', {'class': 'states'}); var label = new Element('dt', {'html': 'Title:'}); var title = new Element('dd'); this._options.adopt([label, title]); this._title = title; var label = new Element('dt', {'html': 'Url: '}); var url = new Element('dd'); var link = new Element('a'); link.inject(url); this._options.adopt([label, url]); this._url = url; this._link = link; this._options.inject(this._container); }, getInstance: function(){ return this._container; }, title_changed: function(){ var title = this.get('title'); this._title.set('html', title); this._link.set('title', title); }, url_changed: function(){ var url = this.get('url'); this._link.set('html', url); this._link.set('href', url); } }); }(document.id));