Recientemente he comenzando una web app donde el mapa de GoogleMaps tiene que estar como background y todo el contenido de la aplicacion sobre el al estilo de ventanas flotantes. Este tipo de web app es muy comun actualmente, por lo cual queria compartir con ustedes la manera en como lo hice para que puedan aplicarlos en sus proyectos.
En el siguiente link de jsFiddle encontraran todas las clases necesarias como poderlo reproducir en sus proyectos, he usado boostrap 3 para el estilo de los paneles. Lo importante seria que los elementos que quieres que floten sobre el mapa tienen que tener la clase "overMap" adicional a esta clase tienes que agregar otra la cual determinara la posicion en sobre el mapa , aqui una lista de las que puedes usar:
- overMap-topCenter
- overMap-topLeft
- overMap-topRight
- overMap-bottomCenter
- overMap-bottomRight
- overMap-bottomLeft
- overMap-centerAll
- overMap-centerLeft
- overMap-centerRight
Segun cual asignes determinara la posicion.
Creo que no se ve muy bien en la vista previa de jsFiddle , asi que les dejo el enlace directo a la aplicacion a pantalla completa donde podras ver mejor el resutado:
link : http://jsfiddle.net/SaulBurgos/3FtbC/4/embedded/result,js,html,css/
No hay comentarios:
Publicar un comentario