Inserir o mapa numa página

Google:

Para colocar um mapa na página é necessário indicar o centro do mapa bem como o nível de zoom inicial. Se pretender que seja possível efectuar zoom com a roda do rato, terá de invocar a função: enableScrollWheelZoom.

var gmap = new GMap2(document.getElementById('google_div'));
			  gmap.setCenter(new GLatLng(39.70453, -8.12714), 4); 
			  gmap.enableScrollWheelZoom(); 

SAPO:

Por omissão já é possível efectuar zoom com a roda do rato bem como o mapa já se encontra centrado.

var smap = new SAPO.Maps.Map('sapo_div');

Se pretender que não seja possível fazer zoom com a roda do rato, deve invocar o seguinte método:

smap.disableScrollWheelZoom() 

Se pretender que não seja possível arrastar o mapa com o rato deve invocar o seguinte método:

smap.disableDragging() 

Adicionar controlos no mapa

Neste exemplo, são adicionados os controlos de zoom e troca de vista sobre o mapa.

Google:

gmap.addControl(new GSmallMapControl());
			  gmap.addControl(new GMapTypeControl()); 

SAPO

smap.addControl(new SAPO.Maps.Control.MapTypeControl());
			    smap.addControl(new SAPO.Maps.Control.NavigationControl());
			

Alterar o tipo de vista do mapa

Neste exemplo altera-se o tipo de vista do mapa para a vista híbrida.

Google

gmap.setMapType(G_HYBRID_MAP); 

SAPO

smap.setBaseLayer(smap.getBaseLayers().HYBRID_MAP);

Adicionar um marcador ao Mapa

Neste exemplo é adicionado um marcador arrastável sobre o mapa.

Google

var marker = new GMarker(new GLatLng(38, -9), {draggable: true});
			gmap.addOverlay(marker); 

SAPO

var marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(-9, 38), 
			   {draggable: true});
			smap.addOverlay(marker); 

Abrir uma infoWindow/Popup

Ao clicar num marcador, neste exemplo abre-se uma infoWindow (ou um popup) com o texto “Hello World!”.

Google

var html = '<h1>Hello World!</h1>';
			GEvent.addListener(marker, 'click', function(latlon){ marker.openInfoWindow(html); }); 

SAPO

var html = '<h1>Hello World!</h1><br />';
			marker.registerEvent('click', this, function(marker){ marker.openPopup(html); }); 

Adicionar uma linha (polyline) ao mapa

Neste exemplo adiciona-se sobre o mapa uma linha que passa por pontos definidos pelo utilizador.

Google

var polyline = new GPolyline(
			  [new GLatLng(31.27559953357264, -3.293155625192997), 
			   new GLatLng(40.04179395913183, -1.0079993752842318), 
			   new GLatLng(42.22596032057589, -6.281436875073691)], 
			  "#FF00FF", 3, 0.5);
			gmap.addOverlay(polyline); 

SAPO

var polyline = new SAPO.Maps.Polyline(
			  [new OpenLayers.LonLat(-3.293155625192997, 31.27559953357264), 
			   new OpenLayers.LonLat(-1.0079993752842318, 40.04179395913183),   
			  new OpenLayers.LonLat(-6.281436875073691, 42.22596032057589) ], 
			   {             strokeColor: "#FF00FF",  
			  strokeWidth: 3, 
			  strokeOpacity: 0.5       
			   });
			smap.addOverlay(polyline); 

Adicionar um evento à linha (polyline) e alterar o estilo

Neste exemplo quando se clica em cima da linha, o estilo desta é alterado.

Google

GEvent.addListener(polyline, 'click', function(latlon){ 
			   polyline.setStrokeStyle({
			        color: "#FFFFFF",
			        weight: 6,
			        opacity: 1
			       });
				});	
			

SAPO

polyline.registerEvent('click', this, function(polyline){ 
			   polyline.setStyle({ 
			       strokeColor: "#FFFFFF",
			       strokeWidth: 6,
			       strokeOpacity: 1
			      });
				});
			

Adicionar um polígono (Polygon) ao mapa

Neste exemplo é adicionado um polígono com as arestas definidas nos pontos dados pelo utilizador.

Google

var polygon = new GPolygon(
			  [new GLatLng(48.86244306657123, 8.835750624322754),
			   new GLatLng(36.17056935092968, 11.03301624923503),
			   new GLatLng(36.947132080844966, 23.337703748743763),
			   new GLatLng(49.26555120881505, 20.613094373852547)], 
			   "#FF00FF", 2, 0.5, "#FF00FF", 0.5);
			gmap.addOverlay(polygon);

SAPO

var polygon = new SAPO.Maps.Polygon(
			  [new OpenLayers.LonLat(8.835750624322754, 48.86244306657123),
			  new OpenLayers.LonLat(11.03301624923503, 36.17056935092968),
			  new OpenLayers.LonLat(23.337703748743763, 36.947132080844966),
			  new OpenLayers.LonLat(20.613094373852547, 49.26555120881505)], 
			  {
			  strokeColor: "#FF00FF",
			  strokeOpacity: 0.5,
			  strokeWidth: 2,
			  fillColor: '#FF00FF',
			  fillOpacity: 0.5
			  });
			smap.addOverlay(polygon); 

Adicionar um evento ao polígono (polygon) e alterar o estilo

Neste exemplo, quando se clica em cima do polígono, o estilo deste é alterado.

Google

GEvent.addListener(polygon, 'click', function(latlng){ 
			   polygon.setFillStyle({
			    color: "#FFFFFF",
			    opacity: 1
			   });
			   polygon.setStrokeStyle({
			    color: "#FFFFFF",
			    weight: 6,
			   opacity: 1       
			  }); 
			  }); 

SAPO

polygon.registerEvent('click', this, function(polygon){ 
			   polygon.setStyle({
			      strokeColor: "#FFFFFF",
			      strokeOpacity: 1,
			      strokeWidth: 6,
			      fillColor: '#FFFFFF',
			      fillOpacity: 1          }); 
			  }); 

Adicionar eventos ao mapa

Neste exemplo demonstra-se como se poderá associar eventos ao mapa e executar código conforme o tipo de evento adicionado.

Google

GEvent.addListener(gmap, 'click', function(){ debug('clicked on google map'); }); 

SAPO

smap.events.register('click', this, function(evt){ debug('clicked on sapo map'); });