https://github.com/zequez/simplegmapsmarkers
SimpleGmapsMarkers is a simple library to create a Google Maps map with custom markers and labels just with HTML and CSS.
https://github.com/zequez/simplegmapsmarkers
Last synced: about 1 year ago
JSON representation
SimpleGmapsMarkers is a simple library to create a Google Maps map with custom markers and labels just with HTML and CSS.
- Host: GitHub
- URL: https://github.com/zequez/simplegmapsmarkers
- Owner: Zequez
- Created: 2012-12-11T14:33:58.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-12-11T14:56:04.000Z (over 13 years ago)
- Last Synced: 2025-01-21T01:41:39.864Z (over 1 year ago)
- Language: CoffeeScript
- Size: 148 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.es.md
Awesome Lists containing this project
README
# Simple Gmaps Markers
Simple Gmaps Markers es una pequeña libraría para crear marcadores customizados
de Google Maps sin tener que escribir ni una sola linea de JavaScript.
Esto es algo muy utilizado en muchos sitios web, algo que debería ser simple, pero
la única forma simple de hacerlo es incluir un iframe. El problema es que esto
solo te permite usar un marcador con una fea A roja y un cartel blanco gigante incustomizable.
Si sos una persona de acción, puedes ver el ejemplo en la carpeta /example.
## Preparando todo
Primero, *debemos* incluir la API de Google Maps v3, para hacer esto, incluimos
el siguiente script dentro del head:
```html
```
Luego solo tenemos que incluir la librería de SimpleGmapsMarkers:
```html
```
## El HTML
Luego incluye el siguiente HTML en cualquier parte de ti sitio web:
```html
Listo, cualquier cosa que pongas acá dentro se puede estilar con CSS.
```
`data-lat` y `data-lng` son la latitud y la longitud donde el marcador se va a posicionar.
Para encontrar estos valores simplemente ve a [Google Maps](http://maps.google.com), mueve
el mouse sobre la posición y presiona SHIFT.
## Marcadores múltiples
```html
No podría ser
más simple que esto
```
Se explica solo, simplemente agrega múltiples `simple-gmaps-marker`.
## About the CSS
Solo está la siguiente simple regla, no puedes seleccionar los elementos
haciendo lo siguiente:
```css
.simple-gmaps > div {
}
```
Porque los elementos son removidos del DOM e insertados dentro de una jungla de DOM de Google Maps.
Y otra cosa, puedes usar la clase `.active` en tu CSS para seleccionar el último elemento clickeado.
## Autorun o manual
Si lo quieres hacer lo más simple posible, sin escribir
JAvaScript, simplemente incluye el script con autorun:
```html
```
Que es prácticamente lo mismo que hacer lo siguiente:
```html
jQuery(function(){
$('.simple-gmaps').simpleGmapsMarkers();
});
```
## Créditos
Por [Ezequiel Schwartzman](http://zequez.com), en [Avalith](http://avalith.net/).
[Librería Infobox](https://code.google.com/p/google-maps-utility-library-v3/) para la API de Google Maps.