<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Copyright 2008 Google Inc. Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0 -->
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<!--ESTE ES EL TÍTULO QUE SALE EN LA VENTANA-->
<title>Actividad para el aula con Google Map parte 1</title>
<!--CAMBIA AQUÍ LA GOOGLE MAP API KEY LO QUE HAY DESPUÉS DE key= -->
<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsxnAr6Q78qr5uqeYC31nwxSIsHG6HDUR-NnK1Q-jg8M_te3XxxRfJ0fQiynzlYEcbXg8l38WVMWz_A"
type="text/javascript"></script><!--GOOGLE MAP API KEY -->
<style type="text/css">
body {
font-family:Tahoma, Geneva, sans-serif;
font-size: 0.7em;
width:960px;
margin:10px auto;
}
#hand_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
float:left;
margin:0.5em;
}
#hand_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}
#placemark_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
float:left;
margin:0.5em;
}
#placemark_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}
#line_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
float:left;
margin:0.5em;
}
#line_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}
#shape_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
float:left;
margin:0.5em;
}
#shape_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
}
#texto{
float:left; }
#contenedor{
clear:both;
}
#map {
margin:1em; border:#09F solid 5px;
}
#colIzq{
float:left;
width:200px;
}
#colDer{
float:left; }
#cabecera h1{
font-size:36px;
}
</style>
<script type="text/javascript">
var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green","#008000"],["blue", "#000080"], ["purple", "#800080"]];
var options = {};
var lineCounter_ = 0;
var shapeCounter_ = 0;
var markerCounter_ = 0;
var colorIndex_ = 0;
var featureTable_;
var map;
function select(buttonId) {
document.getElementById("hand_b").className="unselected";
document.getElementById("shape_b").className="unselected";
document.getElementById("line_b").className="unselected";
document.getElementById("placemark_b").className="unselected";
document.getElementById(buttonId).className="selected";
}
function stopEditing() {
select("hand_b");
}
function getColor(named) {
return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}
function getIcon(color) {
var icon = new GIcon();
icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(15, 32);
return icon;
}
function startShape() {
select("shape_b");
var color = getColor(false);
var polygon = new GPolygon([], color, 2, 0.7, color, 0.2);
startDrawing(polygon, "Polígono " + (++shapeCounter_), function() {
var cell = this;
var area = polygon.getArea();
cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
}, color);
}
function startLine() {
select("line_b");
var color = getColor(false);
var line = new GPolyline([], color);
startDrawing(line, "Línea " + (++lineCounter_), function() {
var cell = this;
var len = line.getLength();
cell.innerHTML = (Math.round(len / 10) / 100) + "km";
}, color);
GEvent.addListener(line, "dblclick", function() {
map.removeOverlay(line);
});
}
function startDrawing(poly, name, onUpdate, color) {
map.addOverlay(poly);
poly.enableDrawing(options);
poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});
GEvent.addListener(poly, "endline", function() {
select("hand_b");
GEvent.addListener(poly, "click", function(latlng, index,name) {
if (typeof index == "number") {
poly.deleteVertex(index);
} else {
map.removeOverlay(poly);
}
});
});
}
function placeMarker() {
select("placemark_b");
var listener = GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) {
select("hand_b");
GEvent.removeListener(listener);
var color = getColor(true);
var marker = new GMarker(latlng, {icon: getIcon(color), draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
updateMarker(marker);
});
GEvent.addListener(marker, "dblclick", function() {
map.removeOverlay(marker);
});
}
});
}
function updateMarker(marker, opt_changeColor) {
if (opt_changeColor) {
var color = getColor(true);
marker.setImage(getIcon(color).image);
}
var latlng = marker.getPoint();
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
<!--ESTO ES LA POSICIÓN INICIAL DEL MAPA, SI QUIERES QUE SALGA EN OTRO LUGAR SOLO TIENES QUE BUSCAR SUS COORDENADAS Y PONERLAS AQUÍ (37.956037, -1.411743) ES LATITUD Y LONGITUD Y EL 8 ES EL NIVEL DE ZOOM DEL MAPA-->
map.setCenter(new GLatLng(37.956037, -1.411743), 8); map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl()); map.addMapType(G_PHYSICAL_MAP);
map.clearOverlays();
map.disableDoubleClickZoom();
select("hand_b");
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload">
<div id="cabecera"><!--CAMBIA AQUÍ EL NOMBRE DE LA ACTIVIDAD -->
<h1>EduFrikis.com</h1>
</div>
<div id="colIzq">
<div id="contenedor">
<div id="hand_b" onclick="stopEditing()"> </div>
<div id="placemark_b" onclick="placeMarker()"> </div>
<div id="line_b" onclick="startLine()"> </div>
<div id="shape_b" onclick="startShape()"> </div>
</div>
<div id="texto"><!-- AQUÍ PUEDES CAMBIAR EL TEXTO QUE SALE A LA IZQUIERDA Y PONER EL DE TU ACTIVIDAD (RECUERDA QUE <p> indica un párrafo)-->
<p>Aqu&iacute; puedes poner un texto referente la acitividad
que quieres realizar.</p>
<p>Para introducir cualquier elemento en el mapa solo tienes que
pinchar en los iconos que tienes m&aacute;s arriba y elegir una
posici&oacute;n en el mapa. Para eliminar un elemento del mapa tan
solo hay que hacer doble clic sobre el elemento que se desea borrar</p>
</div>
</div>
<div id="colDer"><!--AQUÍ PUEDES CAMBIAR EL TAMAÑO DEL MAPA. 640 ES LA ANCHURA Y 480 LA ALTURA SOLO TIENES QUE CAMBIAR ESOS VALORES-->
<div id="map" style="width: 640px; height: 480px;"></div>
</div>
</body>
</html>