7/9/2015 Google Maps API V3 introducción y primeros pasos http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 1/17 Google Maps API V3 introducción y primeros pasos abril 4 2011 Google Maps fue desarrollado originalmente por dos hermanos Daneses, Lars y Jens Rasmussen, co-fundadores de Where 2 Technologies una empresa dedicada a la creación de soluciones de mapeo. La empresa fue adquirida por Google en octubre de 2004, y los dos hermanos luego crearon Google Maps (también son los que están detrás de Google Wave). Ab Ro Abimael Rodríguez Colón Antes de que hubiera una API pública, algunos desarrolladores descubrieron la manera de hackear Google Maps para incorporar los mapas en sus propios sitios web. Esto llevó a Google a la conclusión de que había una necesidad de una API pública, y en junio de 2005 DESARROLLO WE EDITORIALES GUÍAS CURSOS
17
Embed
Google Maps API V3 introducción y primeros pasos.pdf
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
7/9/2015 Google Maps API V3 introducción y primeros pasos
La longitud se multiplica por negativo, porque está a la izquierda (oeste) del punto 0,0. Para
esta guía solo vamos a estar trabajando con decimales.
¿Cuánto es el máximo de decimales?
Google maps no se limita a cierta cantidad de decimales. Sin embargo, según unas pruebas
hechas, se notó que números mayores a 6 decimales es una perdida de tiempo. Así también
google estableció en varios métodos que la mayor cantidad a trabajar es 6 decimales, como
por ejemplo el método toUrlValue(). Es decir, cuando vayamos a establecer los
decimales se puede hacer así:
5 a 6 decimales: es el máximo que debemos usar para ser específicos4 decimales: para algún detalle en el mapa3 decimales: es bueno para centrar ciudades2 decimales: es apropiado para centrar paises o estados, tal vez 3 por monaco
Preparando el área de trabajo
Para propósito de enseñanza tomaremos el 100% de ancho y el 100% de alto del navegador.
También nos limitaremos a explicar solo la parte del API. Para referencia sobre el último
con el atributo id que tiene como valor map.Una notación literal llamada MapOptions que contiene la configuración inicial paramostrar el mapa como por ejemplo, el “zoom”, donde está el centro y que tipo de mapadeseamos mostrar.
MapOptions
MapOptions contiene la información de cómo queremos ver el mapa y cómo queremos
que se comporte. Se requiere tres propiedades:
zoom: Define el “zoom” inicial. Debe ser un número entre el 1 y el 23. El 1 es el mapacompletamente afuera y 23 es completamente adentro.center: Define el centro del mapa con las coordenadas. Las coordenadas debeindicarse usando el método google.maps.LatLng(latitud, longitud).mapTypeId: Define que tipo de mapa se desea mostrar al inicio.
Los opcionales son:
keyboardShortcuts: Habilita o inhabilita el uso del teclado. Las teclas a usar son lasflechas para mover el mapa y +/- para el “zoom”.Valores: true|false, por defecto true.disableDoubleClickZoom: Habilita o inhabilita el doble click del ratón para hacer“zoom”.Valores: true|false por defecto false.draggable: Habilita o inhabilita el poder arrastrar el mapa.Valores: true|false, por defecto true.scrollwheel: Habilita o inhabilita el poder hacer “zoom” con la rueda del ratón.Valores: true|false, por defecto true.draggableCursor: Indica que tipo de cursor deseas mostrar cuando el ratón estáencima del mapa. El valor es del tipo cadena y pueden ser los que una computadoratiene por defecto y la mayoría de los que están mencionado en el siguiente listado opuede ser uno personalizado y la ruta puede ser local (en el servidor de la aplicación) ouna dirección web externa.draggingCursor: Indica que tipo de cursor deseas mostrar cuando el ratón estápresionado en el mapa. El valor es del tipo cadena y pueden ser los que una
computadora tiene por defecto y la mayoría de los que están mencionado en elsiguiente listado o puede ser uno personalizado y la ruta puede ser local (en el servidorde la aplicación) o una dirección web externa.backgroundColor: Esta propiedad afecta el color del fondo del contenedor.Típicamente se ve cuando se arrastra el mapa o cuando carga al inicio. Puedes usar unvalor hexadecimal o la forma estándar (red, yellow, green, blue, etc). Por defecto elcolor es con el valor hexádecimal #E5E3DFnoClear: Habilita o inhabilita que se sobre-escriba lo que haya en el contenedor. Porlo regular la forma como se trabaja para colocar contenido encima del contenedor esusando un elemento fuera del contenedor que muestra el mapa y con CSS se coloca enel lugar deseado en el mapa.Valores: true|false, por defecto false.disableDefaultUI: Habilita o inhabilita mostrar el UI que viene predefinido.Valores: true|false, por defecto false.mapTypeControl: Habilita o inhabilita el control de tipo de mapa.mapTypeControlOptions: Son las opciones de visualización iniciales del control detipo de mapa.navigationControl: Habilita o inhabilita el control de navegación.Valores: true|false, por defecto true.navigationControlOptions: Son las opciones de visualización iniciales delcontrol de navegación.scaleControl: Habilita o inhabilita el control de escala.Valores: true|false, por defecto true.scaleControlOptions: Son las opciones de visualización iniciales del control deescala.streetViewControl: Habilita o inhabilita el hombrecito de “Street View”. Estádisponible en ciertas áreas.Valores: true|false, por defecto false.
Modificamos y añadimos el siguiente código al archivo map.js
010203040506
window.onload = function(){ var options = { zoom: 8 , center: new google.maps.LatLng(18.2, ‐66.4) , mapTypeId: google.maps.MapTypeId.SATELLITE
Muy buena introducción! Espero con ganas las siguientes partes!Saludos
Luciano Muñoz
Muy bueno el articulo, espero con ansias lo que vendra ya que me interesa mucho este tema pero hasta el momento no habia tenidotiempo de ponerme a ver como funciona la API…
Muchas gracias…
Saludos desde Argentina…
Andrés
Excelente introducción!
Victor Sánchez
Muy útil Abimael. Ya le daré una chequeadita cuando llegue a casa. Saludos.
RBZ
Muy bueno, Abimael. Claro y sencillo, directo a marcadores.
popobcn
Simplemente magnifico. Estoy desarrollando algo relacionado y la verdad es que con la introducción que has hecho es francamentedetallada.
andres henao
excelente articulo, lo felicito Abimael.
Consejos prácticos para el InfoWindow en Google Maps
[…] empezar usaremos el mismo área de trabajo que el capítulo 1 (Google Maps API V3 introducción y primeros pasos) y capítulo 2(Marcadores, posicionar una imagen en el mapa). Luego iremos modificándolo conforme […]
Arturo
saludos
Esta bastate bueno y entendible pero tengo dudas con key de google donde puedo encontrar ejemplos porfavor una ayuda,por quetengo q graficar una ruta desde un punto x a un punto y utilizando un algoritmo de busqueda en java
Abimael Rodríguez Colón
En el capítulo 4 estaremos hablando sobre poligonos y polilineas.
Gabriel
Ta bno pero acabo de probar el codigo que das para iniciar y en un formato xhtml no me dspliega el mapa :S… copie todo igual y porningun lado encuentro solucion o rta real a esto… sirve o NO la API v3 en XHTML?
Gabriel
Lo he testeado y en archivos con extension XHTML no se despliega el mapa… parece que no sirve en este tipo de documento, porqueuse el mismo codigo pero en un HTML creado desde NetBeans y funciono perfectamente
Abimael Rodríguez Colón
Interesante lo que indicas. Acabo de copiar la misma área de trabajo, lo pegué en un archivo a ver si de casualidad tenía algúncaracter raro y se mostró la información usando el mismo formato que indiqué arriba.
Abimael Rodríguez Colón
Oh, también hay que recordar que le estoy indicando al archivo que los caracteres son con la codificación utf8. Eso quiere decir queel archivo debe también de tener ese formato, si no, entonces trate a ver si con iso88591 le funciona correctamente.
Gabriel
Pues es que soy apenas un aprendiz en esto de los desarrollos web, y estoy usando Netbeans para crear los proyectos web queempiezo a desarrollar, entonces no se como cree netbeans los archivos .XHTML y .HTML que le doy crear por ahi, hasta ahora retomeesto y no me muestra el mapa ni nada copiando el codigo que tenes en el ejemplo
Ibiza
Hola. Gracias por tu ejemplo que me ha funcionado a la primera, aunque me ha quedado una duda. Estoy cambiando a la v3 parautilizar las funcionalidades del sensor. El problema que veo es que tenemos que ser nosotros quien le indiquemos a google eldispositivo que esta utilizando el usuario. Y aquí me pierdo ¿Cómo averiguo yo que utiliza el usuario y si su dispositivo es compatiblecon la utilización del sensor? ¿O esta funcionalidad es para decirle a google si queremos que muestre o no la posición del usuario?Un saludo
Abimael Rodríguez Colón
Saludos,
Desconozco si existe alguna librería o algún método que detecte si el dispositivo tiene sensor. Pero podrías buscar en las cabecerasque envia el dispositivo para verificar cuál dispositivo es, y así indicar al API si tiene o no. Por ejemplo con PHP existe la variable$_SERVER que te puede brindar esa información
Moisex
muy buen tutorial, muchisimas gracias
Andy
Excelente artículo! Me gusta mucho esto que estás haciendo, ojala y sigas así con más y más artículos.. bueno, espero no te canses
Tus tutos me van como anillo al dedo para un pequeño experimento con el google maps que deseaba hacer tiempito atrás.
Saludos,Un abrazo!
frajagon
Excelente entrada, despejaron varias dudas de como resolver unos pequeños problemas que tenia en una implementación que llevoa cabo
Gracias.
Renzo
Por favor!!!!alguien me puede ayudar a encontrar una manera facil de
obterner las coordenadas, y poder modificarlas y manejarlascon claridad en google maps.He encontrado esto en google labs,http://maps.google.es/support/bin/answer.py?hl=es&answer=1334236&ctx=cb&src=cb&cbid=od6v07pibec8&cbrank=1pero las coordenadasque me da cuando las aplico, no concuerdan.
Paintball Madrid
Muy Bueno, ha sido de gran ayuda ya que tenia algunas dudas, garcias y un Saludo a todos.