SAPO Mapas API

				<html>
					<head>
						<title>Test SAPO.Maps.Marker</title>
						<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
						
						<script type="text/javascript">
							var map, marker;
							
							function init(){
								map = new SAPO.Maps.Map('map');
								
								map.events.register('popupopen', this, events.popupopened);
								map.events.register('popupopen', this, events.popupclosed);
							}
							
							function isValid(){
								if (marker == null) {
									alert('add a marker to your map');
									return false;
								}
								return true;
							}
							
							function draggableMarker(){
								marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(-9.13774, 38.7115479), {draggable: true});
								map.addOverlay(marker);
							}
							
							function simpleMarker(){
								marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(-9.13774, 38.7115479));
								map.addOverlay(marker);
							}
							
							function remove_marker(){
								if (!isValid()) return;
								map.removeOverlay(marker);
								marker = null;
							}
							
							function hide_marker(){
								if (!isValid()) return;
								
								marker.hide();
							}
							
							function show_marker(){
								if (!isValid()) return;
								
								marker.show();
							}
							
							function enableEvents(){
								if (!isValid()) return;
								marker.registerEvent('mouseover', this, events.mouseover);
								marker.registerEvent('mouseout', this, events.mouseout);
								marker.registerEvent('mousedown', this, events.mousedown);
								marker.registerEvent('mouseup', this, events.mouseup);
								marker.registerEvent('click', this, events.click);
								marker.registerEvent('dbclick', this, events.dbclick);
								marker.registerEvent('drag', this, events.drag);
								marker.registerEvent('dragstart', this, events.dragstart);
								marker.registerEvent('dragend', this, events.dragend);
								marker.registerEvent('popupclosed', this, events.popupclosed);
								marker.registerEvent('popupopened', this, events.popupopened);
							}
							
							function disableEvents(){
								if (!isValid()) return;
								cleanMsg();
								marker.unRegisterEvent('mouseover', this, events.mouseover);
								marker.unRegisterEvent('mouseout', this, events.mouseout);
								marker.unRegisterEvent('mousedown', this, events.mousedown);
								marker.unRegisterEvent('mouseup', this, events.mouseup);
								marker.unRegisterEvent('click', this, events.click);
								marker.unRegisterEvent('dbclick', this, events.dbclick);
								marker.unRegisterEvent('drag', this, events.drag);
								marker.unRegisterEvent('dragstart', this, events.dragstart);
								marker.unRegisterEvent('dragend', this, events.dragend);
								marker.unRegisterEvent('popupclosed', this, events.popupclosed);
								marker.unRegisterEvent('popupopened', this, events.popupopened);
							}
							
							function enableDragging(){
								if (!isValid()) return;
								marker.enableDragging();
							}
							
							function disableDragging(){
								if (!isValid()) return;
								marker.disableDragging();
							}
							
							function changeStyle(){
								if (!isValid()) return;
								var style = {
									markerImage: 'http://openlayers.org/dev/img/marker-gold.png',
					 				radius: 10
								};
								
								marker.setStyle(style);
							}
							
							function setlonlat(){
								if (!isValid()) return;
								marker.setLonLat(new OpenLayers.LonLat(-9, 39));
							}
							
							function clone(){
								if (!isValid()) return;
								marker = marker.clone();
								map.addOverlay(marker);
							}
							
							var events = {
								mouseover: function(){ addMsg('mouseover'); },
								mouseout: function(){ addMsg('mouseout'); },
								mousedown: function(){ addMsg('mousedown'); },
								mouseup: function(){ addMsg('mouseup'); },				
								click: function(m){ addMsg('click'); m.openPopup("<div>Hello world</div>");},
								dbclick: function(){ addMsg('dbclick'); },
								drag: function(){ addMsg('drag'); },
								dragstart: function(){ addMsg('dragstart'); },
								dragend: function(){ addMsg('dragend'); },
								popupclosed: function(){ addMsg('popupClosed'); },
								popupopened: function(){ addMsg('popupOpened'); }
							}
							
							function addMsg(msg){
								var elem = document.getElementById('debug');
								elem.innerHTML += ' -' + msg + '- ';
							}
							
							function cleanMsg(){ document.getElementById('debug').innerHTML = ''; }
							
						</script>
					</head>
					<body onload="init();">
						<div id='map' style='width:50%; height:400px;'></div>
						<p>This script tests and shows the SAPO.Maps.Marker type</p>
						<br />
						<div>
							<input type="button" onclick="draggableMarker();" value="Add Draggable Marker" />
							<input type="button" onclick="simpleMarker();" value="Add Marker" />
							<input type="button" onclick="remove_marker();" value="Remove Last Marker" />
							<input type="button" onclick="hide_marker();" value="Hide Last Marker" />
							<input type="button" onclick="show_marker();" value="Show Last Marker" />
							<input type="button" onclick="enableEvents();" value="Turn Events On" />
							<input type="button" onclick="disableEvents();" value="Turn Events Off" />
							<input type="button" onclick="enableDragging();" value="Enable Dragging" />
							<input type="button" onclick="disableDragging();" value="Disable Dragging" />
							<input type="button" onclick="changeStyle();" value="Change marker style" />
							<input type="button" onclick="setlonlat();" value="Set LonLat" />
							<input type="button" onclick="clone();" value="Clone" />
						</div>
						<div id="debug"></div>
					</body>
				</html>
MAPAS API

Galeria de exemplos: Marker
