Apis de Google
Se pueden utilizar las apis de google para que realizen diversas funciones como por ejemplo :
Api de google chart : ( insertar gráficos )
http://code.google.com/intl/es-ES/apis/chart/
Generamos un código QR :
Documentación :
http://code.google.com/intl/es-ES/apis/chart/#qrcodes
El formato es el siguiente :
http://code.google.com/intl/es-ES/apis/chart/#url_format
Por lo tanto :
http://chart.apis.google.com/chart
?
chs=150x150
&cht=qr
&chl=Media Distancia
&choe=UTF-8
Y todo junto :
http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=Media Distancia&choe=UTF-8
Otro ejemplo :
Gráfico circular :
http://code.google.com/intl/es-ES/apis/chart/#pie_charts
Te pongo la dirección completa tu ya la descompones en cada una de las variables :
Api de google Static Maps : ( insertar imágenes de Google Maps )
http://code.google.com/intl/es-ES/apis/maps/documentation/staticmaps/
Para poner un ejemplo indico como realizar el trayecto entre la estación de Figueres y el Hotel Pirineos.
La URL del API de Google Static Maps debe tener el siguiente formato:
http://maps.google.es/staticmap?parametros
Los puntos del mapa se define por latitud, longitud.
Centro del mapa :42.264,2.964 (Figueres)
Marcador en los puntos :
42.26295,2.95859 color azul con una letra h
42.265,2.9685 color verde letra t
Acercamiento : 16
Tamaño : 600x300
Completa quedaría :
Api de Google Maps : ( insertar Google Maps )
Documentación :
http://code.google.com/intl/es/apis/maps/documentation/introduction.html
Obtener clave :
http://code.google.com/intl/es/apis/maps/signup.html
Necesitas alojamiento, se puede utilizar uno gratuito.
Me he limitado a copiar la pagina que la documentación te pone como ejemplo :
He cambiado el centro del mapa a Figueres y nivel de acercamineto 16 :
map.setCenter(new GLatLng(42.264,2.964), 16);
Le he añadido unos controles :
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_HYBRID_MAP);
Explicación del código :
http://code.google.com/intl/es/apis/maps/documentation/controls.html#Controls_overview
He añadido unos puntos :
//Estación
var point = new GLatLng(42.265,2.9685);
map.addOverlay(new GMarker(point));//Hotel pirineos
var point = new GLatLng(42.26295,2.9585);
map.addOverlay(new GMarker(point));
Explicación del código :
http://code.google.com/intl/es/apis/maps/documentation/overlays.html#Markers
He añadido un mensaje con una ventana :
map.openInfoWindow(new GLatLng(42.26295,2.9585),
document.createTextNode("Hotel Pirineos"));
Explicación del código :
http://code.google.com/intl/es/apis/maps/documentation/introduction.html#Info_Windows
Añadimos un línea :
); //Add an encoded polyline.
var encodedPoints = "_|}`GuybQ}@tA`Jv}@xCi@";var encodedLevels = "BBBB";
var encodedPolyline = new GPolyline.fromEncoded({
color: "#3333cc",
weight: 9,
points: encodedPoints,
levels: encodedLevels,
zoomFactor: 30,
numLevels: 3
});
map.addOverlay(encodedPolyline
Explicación del código :
http://code.google.com/intl/es/apis/maps/documentation/overlays.html#Encoded_Polylines
No te preocupes por los números, se consiguen :
http://code.google.com/intl/es/apis/maps/documentation/polylineutility.html
Coloca puntos de tu polígono y obtienes el resultado.
El resultado :
También se pueden conseguir mapas utilizando ficheros KML :
http://code.google.com/intl/es/apis/kml/documentation/kml_tut.html
O creas el archivo KML o lo consigues con Google Earth :
Utilizamos este código :
http://code.google.com/intl/es/apis/maps/documentation/services.html#XML_Overlays
Eliminamos los puntos, polilíneas y ventanas, y utilizamos un archivo kml
Utilizamos el objeto GGeoXml, bueno tres objetos
geoXml = new GGeoXml("fgruta.kml");
geoXml2 = new GGeoXml("fghotel.kml");
geoXml3 = new GGeoXml("fgestacion.kml" );
Y se añaden al mapa :
map.addOverlay(geoXml);
map.addOverlay(geoXml2);
map.addOverlay(geoXml3);
El resultado con un archivo KML :
Api de Google Earth
Para visualizar contenidos con Google earth necesitas tener instalado un plugin o el Google Earth
Empezamos con una página simple :
http://code.google.com/intl/es/apis/earth/documentation/index.html
Recuerda que nesesitas la clave de la Api de Google :
http://code.google.com/intl/es/apis/maps/signup.html
Puedes añadir mas controles y capas :
http://code.google.com/intl/es/apis/earth/documentation/layers.html
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS_LOW_RESOLUTION, true);
Se generan archivos Kml con Google Earth y se añaden utilizando el método fetchKml :
http://code.google.com/intl/es/apis/earth/documentation/kml.html#fetchkml_and_parsekml
Se conserva el objeto en una variable para poder ocultarlo y mostrarlo.
var href = 'af.kml';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject) {
KmlAF=kmlObject;
ge.getFeatures().appendChild(kmlObject);
}else{ KmlAF=null;}
if (kmlObject.getAbstractView() !== null)
ge.getView().setAbstractView(kmlObject.getAbstractView());
});
En caso de añadir fotos se incluye este código, y se impide que se navege hasta la posición de la foto.
walkKmlDom(kmlObject, function() {
if (this.getType() == 'KmlPhotoOverlay') {
photoOverlay5 = this;
return false; // Impide la navegación a la foto
}
También es nesecario una librería, ya se utiliza un recorrido complejo :
http://code.google.com/intl/es/apis/earth/documentation/touring.html#importing
Se indica la posición donde se debe volar, indicando la velocidad :
// Volar a Ave-Figueres
var la = ge.createLookAt('');
la.set(42.26513297490766, 2.943345739708458, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, -90, 51, 877);
ge.getOptions().setFlyToSpeed(0.2); // velocidad
ge.getView().setAbstractView(la);
http://code.google.com/intl/es/apis/earth/documentation/camera_control.html
http://code.google.com/intl/es/apis/earth/documentation/reference/interface_kml_look_at.html
Se crean botones y se asocia el evento click a una función, como puede ser ocultar o mostrar :
Se oculta la foto 5
ge.getFeatures().removeChild(photoOverlay5);
Se muestra
ge.getFeatures().appendChild(photoOverlay5);
Se pueden añadir marcas de tiempo :
http://code.google.com/intl/es/apis/earth/documentation/time.html#features_and_views
http://code.google.com/intl/es/apis/kml/documentation/kmlreference.html#timeprimitive
Un ejemplo del código :
http://www.ferroviarios.org/avefigueres.html
Mas apis :
http://code.google.com/intl/es-ES/more/
