Api Google Maps Streets, por fin salió
Desde que ví por primera vez Google Maps Streets rápidamente me lancé a investigar la api de Google Maps para ver cómo podía implementear esta auténtica maravilla. Lógicamente me llevé una gra decepción ya que no aparecía por ningún lado. Pues bien, creo que el pasado 11 de Marzo de 2008 la api de google maps streets fue publicada.
Me puse a analizar y rápidamente me di cuenta de que no era tan compleja como me había imaginado, además de latitud, longitud y zoom, como en los anteriores mapas incorpora dos parámetros nuevos: Picth y yaw, simplemente son el angulos sobre la vertical y el ángulo sobre la vertical, tan simple como eso.
Un ejemplo:
Aquí tenemos un ejemplo de la potencia de esta herramienta.
Es tan fácil como implementar el siguiente código:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example: Simple Streetview Example</title>
<script src=”http://maps.google.com/maps?file=api&v=2.x&key=elapikeyparatusitioweb”
type=”text/javascript”></script>
<script type=”text/javascript”>
var myPano;
function initialize() {
var fenwayPark = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:fenwayPark };
myPano = new GStreetviewPanorama(document.getElementById(”pano”), panoramaOptions);
GEvent.addListener(myPano, “error”, handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert(”Error: Flash doesn’t appear to be supported by your browser”);
return;
}
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div name=”pano” id=”pano” style=”width: 500px; height: 300px”></div>
</body>
</html>
Podemos analizar los siguiente:
1: var fenwayPark = new GLatLng(42.345573,-71.098326);
La variable fenwayPark tiene las coordenadas de latitud y longitud del centro del panorama
2: panoramaOptions = { latlng:fenwayPark }
Aquí introducimos en panoramaOptions los datos anteriores
3: myPano = new GStreetviewPanorama(document.getElementById(”pano”), panoramaOptions);
Este es un paso importante, en myPano introducimos el Objeto “GStreetviewPanorama” con sus opciones.
Simplemente con esto ya tenemos nuestro panorama listo.
