Google Maps
De Computacion
[editar] GOOGLE MAPS EN TU PORTAL
Esta es una forma sencilla de poder incluir el servicio gratuito de google maps en nuestro portal o sitio web, para lo cual debemos considerar lo siguiente:
- Inscribirnos para usar Google Maps API: El registro se lo puede realizar gratuitamente en el siguiente link: [1]
- Debemos indicar el directorio de nuestro servidor web, donde se realizarán todas las peticiones a la API, por ejemplo [2], aunque también lo puedes realizar en tu propio equipo para efectos de prueba (si se tiene algún servidor Web instalado previamente como Apache) mediante la dirección http://localhost/nombre_carpetade_sitio/ o http://127.0.0.1/nombre_carpetade_sitio/
- Google Maps usa Ajax (Asynchronous JavaScript + XML).
Creando nuestro primer Google Maps
El código que se muestra a continuación es un ejemplo sencillo de cómo utilizar el servicio de Google Maps. Google te ofrecerá varios ejemplos mediante pequeñas porciones de código, el primero de ellos, servirá para realizar un pequeño mapa sin ninguna otra opción que la de previsualización. Copiamos el código que nos ofrece Google y guardamos el archivo como por ejemplo: mi-mapa.html:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script type="text/javascript">
<div style="width: 300px; height: 300px" id="map"></div>
</script>
<script type="text/javascript">
//< ![CDATA[
if (GBrowserIsCompatible()) {/>
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-68.127081,-16.511597), 15);
}
//]]>v </script> |
Debemos subir este archivo en el directorio donde se encuentra alojado nuestro sitio web. Luego, abrimos un navegador web y nos dirigimos hacia: http://www.nuestro-sitio.com/mi-mapa.html ó http://localhost/nombre_carpetade_sitio/mi-mapa.html/
El resultado que verás debería ser el siguiente:
Significado del código
La línea de código: <div style="width: 300px; height: 300px" '''id="map"'''></div>
Es muy importante ya que mediante su id, le indicamos a javascript donde colocar el contenido que obtenemos el momento de realizar la petición a Google
La línea: “var map = new GMap(document.getElementById("map"));”, genera un nuevo objeto llamado map de tipo ‘mapa’
Mientras que la línea “map.centerAndZoom(new GPoint(-68.127081,-16.511597), 15);” genera inicialmente un punto con la longitud -68.127081 y la latitud -16.511597. Con la función centerAndZoom se centra el mapa en el punto anteriormente mencionado, su segundo parámetro nos indica la cantidad de zoom realizada, cuyo valor oscila entre 1 y 21.
Agregando más opciones en nuestro mapa
Para que nuestro mapa no sea muy estático, podemos agregarle diferentes funcionalidades (mayor información sobre las funciones la encontramos en la documentación del API [3] de Google Maps). Copia el siguiente código y grábalo nuevamente en un archivo de texto, por ejemplo con el nombre mapa-02.html. Debemos reemplazar la cadena API-KEY que la obtuvimos al momento de inscribirnos.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mi primer Mapa</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=API-KEY" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//< ![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.setMapType(G_HYBRID_TYPE);
map.addControl(new GMapTypeControl());<br> map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-68.127081,-16.511597), 15);
}//]]>
</script>
</body>
</html>
|
Debemos subir ahora este nuevo archivo al mismo directorio donde colocamos el primer ejemplo. El resultado debería ser el siguiente:
La función setMapType(G_HYBRID_TYPE) permite cambiar el tipo del mapa. En este caso, el mapa ha sido cambiado a híbrido, es decir satelital y geográfico. Los posibles valores para esta función son: G_MAP_TYPE, G_SATELLITE_TYPE y G_HYBRID_TYPE.
La función GMapTypeControl() permite generar un control para los diferentes tipos de mapas. Y la función addControl() permite adicionar un control al objeto mapa. Este control se puede ver en la parte superior derecha del mapa.
La función GSmallMapControl() genera el pequeño control (parte izquierda de la figura anterior). Con este control se puede mover el mapa, así como también aumentar o disminuir el zoom, pero solamente 1 nivel. Ahora remplaza en el código la función GSmallMapControl() por LargeMapControl(). Entonces el resultado será el siguiente:
ENLACES
