Libro Google maps Javascript - Capítulo 5 : Herramientas y articulos utiles

Volver al indice

Coleccion  de articulos y herramientas de Google maps que voy encontrando en internet

• https://github.com/googlemaps/v3-utility-library
• http://www.paneek.net/
• Crea tour virtual con google streetview
• https://github.com/SaulBurgos/easyLocator
• Plugin para crear locaciones de mapa 
• https://developers.google.com/maps/articles/
• Articulos oficiales de la google
• http://www.geocodezip.com/
• Buenos link sobre la API de google maps

---

Libro Google maps API Javascript en español - indice

Todos los archivos de practica para el libro de Google Maps se pueden descargar Aqui

Este libro es totalmente gratis, si te ha gustado el libro y te sientes generoso considera invitarme a un cafe ó hamburgesa con un donativo via paypal

Introduccion a Google maps API por Saul Burgos Davila se distribuye bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional.

Indice

• Introducción              
• Para quién es este libro
• Acerca del autor
• Capítulo  1:
• Introducción a Google Maps
• Recomendaciones antes de empezar con Google Maps
• ¿ Comó funciona está cosa llamada Google Maps ?
• Fundamentos Básicos sobre coordenadas
• Cómo leer la documentación de la API
• Capítulo 2: Conceptos básicos
• Creando tu primer mapa
• Jugando con las opciones de mapa
• Deshabilitar la Interfaz por completo
• Configurar como mostrar los tipos de mapa
• Control de navegación
• keyboard Shortcuts
• disableDoubleClickZoom
• draggable
• scrollwheel
• streetViewControl
• Crear controles personalizados
• Metodos de nuestro objeto mapa.
• setOptions()
• getZoom() y setZoom()
• getCenter() y setCenter()
• getMapTypeId() y setMapTypeId()
• Capítulo 3: Overlays
• Overlay : Marker.
• Cambiando el icono del marker
• Agregar una Infowindow
• Crear eventos
• Crear evento en el marker
• Infowindow contenido HTML
• Cambiado el icono del maker con eventos
• Maker arrastrable en el mapa y animado
• Overlay : Polylines.
• Overlay :  Polygons
• Overlay :  Circle
• Overlay :  Rectangle
• Algunos eventos a tener en cuenta de los overlay
• Overlay : Ground
• Drawing Library
• Capítulo 4 : Tareas Comunes en Google Maps
• Trabajando con múltiples overlays
• Demasiados Maker en el mapa
• MarkerClusterer
• Marker Spiderfier
• MarkerManager
• Usando MarkerManager como Cluster
• Maplabel
• Localizar al usuario
• Places Autocomplete
• Reverse Geocoding
• Static Maps API
• Capítulo 5 : Guardar y cargar tu overlays
• Serializar Marker
• Serializar rectangle
• Serializar polyline
• Serializar polygon
• Serializar circle
• Serializar el mapa
• Deserializar Marker
• Deserializar rectangle
• Deserializar Polyline
• Deserializar Polygon
• Deserializar Circle
• Usar GeoJson es una buena option
• Actualizar Map
• Ejemplos Adicionales
• Obtener  puntos Latlng contenidos dentro de un bounds
• Cálculo de áreas y distancias
• Herramientas y articulos utiles
• Capitulo 6: Streetview
• Como descargar imagenes de Google maps streetview
• Hacer un preview de Google streetview desde un input file

Suscribete para recibir mis ultimas noticias

Video tutorial introduccion a Google Maps API

Si alguna vez te ha interesado en crear mapas para tu sitios webs en Google Developers han publicado 4 vídeos introductorios sobre la API de Google Maps, aunque están en ingles puedes poner los subtitulos, los cuales pueden guiarte mejor. Los vídeos cubren lo mas básico para  principiantes que quieren comenzar a trabajar con mapas en sus webs.







Adicional a estos videos puedes ver el capitulo de ejemplo de mi libro introductorio a Google Maps donde puedes encontrar un pequeño tutorial sobre como empezar con Google Maps en este link

http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html


Tambien google tiene un Curso oficial: https://www.udacity.com/course/google-maps-apis--ud864

link: http://googlegeodevelopers.blogspot.com/2013/12/fab-friday-is-google-maps-video-fest.html

Jquery Mobile : Overlay Panel desde abajo

JQuery Mobile recientemente a agregado un interesante widget llamado "panel" el cual es muy bonito para mostrar informacion en los lados de tu App.  Pueden un ejemplo aqui : 

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/panels/ 

A mi me gusta mucho esta manera de mostrar informacion. Recientemente necesitaba usar uno de esos panales pero queria que este saliera desde abajo, intentando imitar el comportamiento de algunas Apps que habia visto pot ahi.

Bueno JQuery Mobile no tiene esa funcionalidad por ahora en los panales, seguro lo agregan mas adelante, Asi que despues de una extensa busqueda en internet sin exito, he decidido programarlo yo mismo y a mi paracer el resultado quedo bastante decenton,  no perfecto pero decente :)

Como lei en muchas paginas en interent, hay bastante gente buscando este comportamiento por lo cual decidi compartirlo.  Haciendo click en "list of items" podran abrir el panel con una listview de JQuery Mobile

Problema google maps y bootstrap 2.0

Hola trabajando en un proyecto me he encontrado que cuando usas bootstrap 2.0 y pones un mapa algunos controles y infowindows no se ven como deberian algunos salen cortados y a veces no se ven .

El problema parece ser es en el css de bootstrap en una line de codigo que comienza con :

img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}

la parte que nos afecta es:  max-width:100%;  que se usa para motivos de responsive design en mi caso el proyecto no usa responsive design en ese caso no era necesario. para arreglar el problema solo tienes que quitar esa parte del codigo y el problema estara resuelto.

aqui puedes ver un ejemplo del error: http://jsfiddle.net/jhnRD/1/

aqui el resultado cuando no usas bootstrap : http://jsfiddle.net/aVx8L/