Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Trabajan Do A Pi Google

    Cargado por

    Alicia Jackeline Navarro Urbina
    19 vistas5 páginas

    Título original

    Trabajan Do a Pi Google

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    19 vistas5 páginas

    Trabajan Do A Pi Google

    Cargado por

    Alicia Jackeline Navarro Urbina

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    http://www.maestrosdelweb.

    com/editorial/trabajando-con-el-api-de-google-maps/ Mediante el API que nos ofrecen Google Maps los desarrolladores del servicio podremos hacer uso de sus bondades. En este artculo pretendemos explicar los aspectos ms relevantes de este API. Google Maps es un servicio gratuito que nos ofrece Google con mapas desplazables del mundo entero, fotos satelitales, la ruta ms corta entre diferentes ubicaciones y muchas caractersticas interesantes. Es semejante a Google Earth; una aplicacin para Windows, Mac y Linux; pero con la diferencia que Google Maps es fcilmente integrable a cualquier sitio web.

    Cmo integro un mapa de Google Maps a mi web?


    Insertar un mapa en nuestro sitio web es muy simple haciendo uso de la API de Google Maps. Lo primero es solicitar nuestra API Key, debemos especificar en qu URL vamos a utilizar nuestro mapa. Aunque es recomendable solicitar una para la direccin http://localhost con esta hagamos los ajustes necesarios y una vez que nuestro cdigo est listo cambiar la API Key por la de nuestro sitio en Internet para publicar la pgina. Aqu tenemos una muestra del cdigo que nos proporciona Google Maps para que utilicemos. Es importante destacar que debemos remplazar el texto resaltado en el cdigo: COLOCAR_AQUI_NUESTRA_KEY por nuestro API Key, para que funcione correctamente.
    <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=COLOCAR_AQUI_NUESTRA_KE Y" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script>

    A continuacin utilizaremos este cdigo para explorar algunas, de las mltiples caractersticas que podemos explotar con el API de Google Maps.

    Cmo iniciar el mapa en coordenadas especficas?


    En el cdigo que nos ofrece Google Maps para utilizar en nuestra web est predeterminada la ubicacin de Palo Alto en Estados Unidos; pero podemos cambiarla estableciendo nuevas coordenadas. En el cdigo siguiente establecimos la ubicacin del mapa en la isla Madagascar, al sur de frica:
    function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-19.435514, 48.603516), 13); } }

    Hasta ah todo est muy bien, pero cmo obtenemos las coordenadas de la ubicacin que deseamos. Para esto entremos a www.maps.google.es y posicionmonos donde queremos que aparezca nuestro mapa, luego copiemos el vnculo que aparece en la parte superior derecha del mapa con el texto: Enlazar con esta pgina, que sera algo como esto:
    http://maps.google.es/?ie=UTF8&ll=19.435514,48.603516&spn=17.554213,29.882813&z=5&om=1

    En el parmetro ll se almacena la latitud y longitud, respectivamente, de la ubicacin que estamos observando. Copiamos esos nmeros, los pegamos en la parte del cdigo del API que explicaba anteriormente y hemos logrado cambiar las coordenadas iniciales de nuestro mapa.

    Cmo establecemos el nivel de Zoom inicial?


    Tambin podemos especificar el nivel de zoom que deseamos que tenga nuestro mapa al mostrarse. Logramos esto variando el segundo parmetro del mtodo setCenter. Por defecto est establecido en 13, pero en el cdigo que mostramos a continuacin lo hemos establecido en 5. Mientras ms pequeo sea el nmero ms cerca estaremos del mapa.
    function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-19.435514, 48.603516), 5); } }

    Cmo aadir controles?


    Quizs nos interese que nuestro mapa tenga controles de zoom o navegacin. Pues a continuacin explicaremos cmo insertarlos. Simplemente agregaremos una lnea dentro de nuestra instruccin IF, con el mtodo addControl de nuestro objeto map, especificando qu tipo de control queremos insertar, como se muestra en el cdigo:
    function load() {

    if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-19.435514, 48.603516), 5); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); } }

    En el ejemplo anterior hemos agregado a nuestro mapa un selector del tipo de mapa (GMapTypeControl), un control de desplazamiento con una barra de zoom (GLargeMapControl), la escala del mapa (GScaleContro) y un mini-mapa en una esquina que nos indica la regin que estamos visualizando (GOverviewMapControl). Para mayor informacin sobre los controles que podemos incluir vea la ayuda de la API.

    Cmo cambiar el tipo de mapa?


    Con el control para seleccionar el tipo de mapa que agregamos podemos seleccionar entre: Mapa, Satlite e Hbrido; pero podemos especificar con cul queremos que se muestre inicialmente nuestro mapa utilizando el mtodo setMapType del objeto map, que puede tomar los valores: G_MAP_TYPE (Mapa), G_SATELLITE_TYPE (Satlite) y G_HYBRID_TYPE (Hbrido). En nuestro cdigo de ejemplo insertamos una lnea para especificar que nuestro mapa inicie en modo Hbrido.
    function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-19.435514, 48.603516), 5); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); map.setMapType(G_HYBRID_TYPE); } }

    Cmo insertar marcas a nuestro mapa?


    Las marcas son muy tiles para resaltar ubicaciones. Con la funcin GMarker() podremos crear una marca en el punto que le pasamos como parmetro y la funcin addOverlay() nos sirve para adicionar la marca al mapa. En el cdigo siguiente hemos agregado una marca en la posicin -19.000514, 46.603516. Aproximadamente el centro de la isla Madagascar.
    function load() { if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-19.435514, 48.603516), 5); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); map.setMapType(G_HYBRID_TYPE); var point = new GLatLng(-19.000514,46.603516); map.addOverlay(new GMarker(point)); }

    En el cdigo anterior hemos utilizado la funcin GLatLng() para declarar un punto en la ubicacin que deseamos poner la marca, luego hemos creado una marca con GMarker() y la hemos agregado a nuestro mapa haciendo uso de addOverlay().

    Cmo agregar etiquetas a nuestra marca?


    Siempre es til que las marcas tengan un texto descriptivo, sobre todo cuando tenemos ms de una en nuestro mapa. A continuacin explicaremos cmo introducirle una descripcin a nuestras marcas. En el cdigo siguiente utilizamos una funcin para agregar una etiqueta a nuestra marca. En la variable address guardamos el texto descriptivo de nuestra etiqueta y utilizando la funcin addtag creamos la marca en el punto point y adicionamos un listener de evento del tipo clic para que se muestre la etiqueta al hacer clic sobre la marca y finalmente agregamos la marca al mapa utilizando addOverlay().
    function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-19.435514, 48.603516), 5); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); map.setMapType(G_HYBRID_TYPE); function addtag(point, address) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); } ); return marker; } var point = new GLatLng(-19.000514,46.603516); var address = '<b>MADAGASCAR</b><br/><i>Centro de Madagascar</i><br /><a href="http://www.centrodemadagascar.com">Web del Centro de Madagascar</a>'; var marker = addtag(point, address); map.addOverlay(marker); } }

    Con estos ltimos retoques al cdigo ya tenemos nuestro archivo listo para ser publicado en el servidor web y que los internautas exploren el planeta a travs del mapa que hemos configurado. A modo de resumen aqu les dejo algunos sitios que implementan el API de Google Maps en sus pginas, as como otros no menos interesantes relacionados con el tema. Si conocen proyectos que utilicen el API, compartan con nosotros el vnculo en un comentario.

    Google Maps de Noche: Combinando el API de Google Maps con fotos satelitales nocturnas de la NASA, se ha logrado esta vista espectacular. Google Maps Mania: Este es un blog que colecciona todo sobre Google Maps, adems muestra los ltimos proyectos que se estn desarrollando con el API. ltimos Terremotos: Nos muestra los sismos ms recientes ocurridos en el planeta, con el nivel de magnitud, la fecha y un enlace con los detalles. Ranking de Hospitales: Nos informa el ranking de los Hospitales valorados segn las enfermedades que atienden, adems dndole nuestra direccin nos muestra la manera ms rpida de llegar. Localizador de Gimnasios: Este mapa localiza el gimnasio ms cercano.

    Archivo de ejemplo:
    Puede descargar el archivo que hemos configurado durante este artculo. Sintase libre de modificarlo segn sus necesidades. Recuerde escribir su propia API Key en el cdigo HTML antes de utilizarlo.

    http://www.youtube.com/watch?v=1TrmiEBDAQs&feature=fvwp

    También podría gustarte