viernes, 22 de marzo de 2013

Como poner el mapa de embajadores en tu blog


El mapa de Embajadores eTwinning cuenta en este momento con setenta y ocho registros gracias a la colaboración de todos. Esperamos que poco a poco estemos todos aquí.
He pensado que  algunos desearían incrustarlo en su blog o en su web. Eso es perfectamente posible y fácil de hacer; además, se actualizará con las nuevas incorporaciones. Solamente hay que pegar el código como lenguaje HTML en el blog, de este modo:



Copiar este código:
<iframe width="600" height="500" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=MAP&amp;q=select+col3+from+1Si2b5qtf63tp-2nffGXRtw-mX-TLvjuJXU-MGsg&amp;h=false&amp;lat=40.10508185331975&amp;lng=-3.2265865437500407&amp;z=6&amp;t=1&amp;l=col3&amp;y=2&amp;tmplt=2"></iframe>

Si todo sale bien, deberá aparecer algo así:

>

Dejo también aquí el código en JavaScript:


<!DOCTYPE html>
<html>
<head>
<title>Embajadores eTwinning España - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 500px;
margin: 0;
padding: 0;
width: 600px;
}
#googft-legend{background-color:#fff;border:1px solid #000;font-family:Arial, sans-serif;font-size:12px;margin:5px;padding:10px 10px 8px;}#googft-legend p{font-weight:bold;margin-top:0;}#googft-legend div{margin-bottom:5px;}.googft-legend-swatch{border:1px solid;float:left;height:12px;margin-right:8px;width:20px;}.googft-legend-range{margin-left:0;}.googft-dot-icon{margin-right:8px;}.googft-paddle-icon{height:24px;left:-8px;margin-right:-8px;position:relative;vertical-align:middle;width:24px;}.googft-legend-source{margin-bottom:0;margin-top:8px;}.googft-legend-source a{color:#666;font-size:11px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(40.10508185331975, -3.226586543750045),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col3",
from: "1Si2b5qtf63tp-2nffGXRtw-mX-TLvjuJXU-MGsg",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googft-mapCanvas"></div>
</body>
</html>

No hay comentarios: