{"id":21094322,"url":"https://github.com/zequez/simplegmapsmarkers","last_synced_at":"2025-03-14T07:09:41.095Z","repository":{"id":5894748,"uuid":"7113175","full_name":"Zequez/SimpleGmapsMarkers","owner":"Zequez","description":"SimpleGmapsMarkers is a simple library to create a Google Maps map with custom markers and labels just with HTML and CSS.","archived":false,"fork":false,"pushed_at":"2012-12-11T14:56:04.000Z","size":152,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T01:41:39.864Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zequez.png","metadata":{"files":{"readme":"README.es.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-12-11T14:33:58.000Z","updated_at":"2014-05-28T23:04:48.000Z","dependencies_parsed_at":"2022-09-06T05:40:22.989Z","dependency_job_id":null,"html_url":"https://github.com/Zequez/SimpleGmapsMarkers","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zequez%2FSimpleGmapsMarkers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zequez%2FSimpleGmapsMarkers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zequez%2FSimpleGmapsMarkers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zequez%2FSimpleGmapsMarkers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zequez","download_url":"https://codeload.github.com/Zequez/SimpleGmapsMarkers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243538138,"owners_count":20307104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T22:17:02.372Z","updated_at":"2025-03-14T07:09:41.051Z","avatar_url":"https://github.com/Zequez.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Gmaps Markers\r\n\r\nSimple Gmaps Markers es una pequeña libraría para crear marcadores customizados\r\nde Google Maps sin tener que escribir ni una sola linea de JavaScript.\r\n\r\nEsto es algo muy utilizado en muchos sitios web, algo que debería ser simple, pero\r\nla única forma simple de hacerlo es incluir un iframe. El problema es que esto\r\nsolo te permite usar un marcador con una fea A roja y un cartel blanco gigante incustomizable.\r\n\r\nSi sos una persona de acción, puedes ver el ejemplo en la carpeta /example.\r\n\r\n## Preparando todo\r\n\r\nPrimero, *debemos* incluir la API de Google Maps v3, para hacer esto, incluimos\r\nel siguiente script dentro del head:\r\n\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?sensor=false\"\u003e\u003c/script\u003e\r\n```\r\n\r\nLuego solo tenemos que incluir la librería de SimpleGmapsMarkers:\r\n\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"/path/to/google_maps_marker.jquery.autorun.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## El HTML\r\n\r\nLuego incluye el siguiente HTML en cualquier parte de ti sitio web:\r\n\r\n```html\r\n\u003cdiv class=\"simple-gmaps\"\u003e\r\n  \u003cdiv class=\"my-marker\" data-lat=\"-37.123123\" data-lng=\"-58.4324234\"\u003e\r\n    Listo, cualquier cosa que pongas acá dentro se puede estilar con CSS.\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n`data-lat` y `data-lng` son la latitud y la longitud donde el marcador se va a posicionar.\r\nPara encontrar estos valores simplemente ve a [Google Maps](http://maps.google.com), mueve\r\nel mouse sobre la posición y presiona SHIFT.\r\n\r\n## Marcadores múltiples\r\n\r\n```html\r\n\u003cdiv class=\"simple-gmaps\"\u003e\r\n  \u003cdiv class=\"my-marker\" data-lat=\"-37.123123\" data-lng=\"-58.4324234\"\u003e\r\n    No podría ser\r\n  \u003c/div\u003e\r\n  \u003cdiv class=\"my-marker\" data-lat=\"-37.123123\" data-lng=\"-58.4324234\"\u003e\r\n    más simple que esto\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nSe explica solo, simplemente agrega múltiples `simple-gmaps-marker`.\r\n\r\n## About the CSS\r\n\r\nSolo está la siguiente simple regla, no puedes seleccionar los elementos\r\nhaciendo lo siguiente:\r\n\r\n```css\r\n.simple-gmaps \u003e div {\r\n\r\n}\r\n\r\n```\r\n\r\nPorque los elementos son removidos del DOM e insertados dentro de una jungla de DOM de Google Maps.\r\n\r\nY otra cosa, puedes usar la clase `.active` en tu CSS para seleccionar el último elemento clickeado.\r\n\r\n## Autorun o manual\r\n\r\nSi lo quieres hacer lo más simple posible, sin escribir\r\nJAvaScript, simplemente incluye el script con autorun:\r\n\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"/path/to/google_maps_markers.jquery.autorun.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nQue es prácticamente lo mismo que hacer lo siguiente:\r\n\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"/path/to/google_maps_markers.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript type=\"text/javascript\"\u003e\r\n  jQuery(function(){\r\n    $('.simple-gmaps').simpleGmapsMarkers();\r\n  });\r\n\u003c/script\u003e\r\n```\r\n\r\n## Créditos\r\n\r\nPor [Ezequiel Schwartzman](http://zequez.com), en [Avalith](http://avalith.net/).\r\n\r\n[Librería Infobox](https://code.google.com/p/google-maps-utility-library-v3/) para la API de Google Maps.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzequez%2Fsimplegmapsmarkers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzequez%2Fsimplegmapsmarkers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzequez%2Fsimplegmapsmarkers/lists"}