{"id":20709597,"url":"https://github.com/coderiver/easygooglemaps","last_synced_at":"2025-04-23T04:48:01.238Z","repository":{"id":18272411,"uuid":"83237002","full_name":"coderiver/EasyGoogleMaps","owner":"coderiver","description":null,"archived":false,"fork":false,"pushed_at":"2021-12-06T00:02:23.000Z","size":524,"stargazers_count":25,"open_issues_count":3,"forks_count":5,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-04-14T19:21:03.196Z","etag":null,"topics":["baloon","google-maps","infobox","js","marker"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderiver.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-26T20:07:15.000Z","updated_at":"2024-01-08T14:03:52.000Z","dependencies_parsed_at":"2022-08-07T09:00:36.987Z","dependency_job_id":null,"html_url":"https://github.com/coderiver/EasyGoogleMaps","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderiver%2FEasyGoogleMaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderiver%2FEasyGoogleMaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderiver%2FEasyGoogleMaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderiver%2FEasyGoogleMaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderiver","download_url":"https://codeload.github.com/coderiver/EasyGoogleMaps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250372939,"owners_count":21419722,"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":["baloon","google-maps","infobox","js","marker"],"created_at":"2024-11-17T02:07:07.253Z","updated_at":"2025-04-23T04:48:01.214Z","avatar_url":"https://github.com/coderiver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![npm version](https://badge.fury.io/js/easygooglemaps.svg)](https://badge.fury.io/js/easygooglemaps)\n[![Dependency Status][depstat-image]][depstat-url]\n\n\n\u003e \u003cimg align=\"right\" width=\"120\" \n     title=\"EasyGoogleMaps Logo\"\n     src=\"https://rawgit.com/coderiver/easygooglemaps/master/logo.svg\"\u003eSimple layer over Google Maps API to create expandable baloons(infoboxes) on the map. [See example](https://coderiver.github.io/EasyGoogleMaps/example/index.html). We are tired of google maps syntax, infobox and whatever. Simple and straightforward syntax to do common job like this:\n\u003e \n\u003e ![Module usage example](https://github.com/coderiver/easygooglemaps/raw/master/example/screenshot.png \"Module usage example\")\n\n## Installation\n\n```\n$ npm install --save easygooglemaps\n```\n\n## Usage\n### Webpack\n```js\nvar EasyGoogleMaps = require('easygooglemaps');\n// run module here\n```\n### Old school files way ([example.html](https://coderiver.github.io/EasyGoogleMaps/example/index.html)):\n```html\n\u003cscript type=\"text/javascript\" src=\"easygooglemaps.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"RUN_MODULE_HERE.js\"\u003e\u003c/script\u003e\n```\n## Running\n```js\nvar MyMap = new EasyGoogleMaps(_options_);\n// options reference in next section\n\nMyMap.init();\n```\n\n\n#### Parameters (_options_)\n```js\n{\n\t// map options\n\tmap: {\n\t\tAPIKEY: 'YOUR_GOOGLEMAPS_API_KEY',\n\t\tcontainer: '.js-map', // DOM element, where to put map\n\t\toptions: {\n\t\t\tcenter: {lat: -34.097, lng: 150.644},\n\t\t\tzoom: 8\n\t\t}\n\t},\n\n\t// baloon specific options\n\tinfobox: {\n\t\tclass: 'awesome-infobox',\n\t\ttemplate: '#infobox', // html template for baloon\n\t\tcloseButton: '.js-infobox-close',\n\t\tonlyOneBox: true, // single baloon visible\n\t\t// baloon relative to marker position\n\t\tposition: {\n\t\t\tx: \"left\",\n\t\t\ty: \"center\"\t\n\t\t}\n\t},\n\t\n\t// Array of data (markers,baloons,infoboxes,whatever) to put on the map\n\t// Might be added at any time by .add method described below\n\tmarkers: {\n\t\titems: [\n\t\t\t{\n\t\t\t\t\"content\": {\n\t\t\t\t\t// this is {{=baloon.title}} in html template\n\t\t\t\t\t\"title\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur.\"\n\t\t\t\t},\n\t\t\t\t\"marker\": {\n\t\t\t\t\t\"position\": {\n\t\t\t\t\t\t\"lat\": -34.397,\n\t\t\t\t\t\t\"lng\": 150.644\n\t\t\t\t\t},\n\t\t\t\t\t\"icon\": {\n\t\t\t\t\t\t\"default\": \"img/markerDefault.png\",\n\t\t\t\t\t\t\"active\": \"img/markerActive.png\",\n\t\t\t\t\t\t// for retina icon should be 40x60 pixels\n\t\t\t\t\t\t\"size\": {\n\t\t\t\t\t\t\t\"x\": 20,\n\t\t\t\t\t\t\t\"y\": 30\n\t\t\t\t\t\t},\n\t\t\t\t\t\t\"centering\": {\n\t\t\t\t\t\t\t\"x\": 10,\n\t\t\t\t\t\t\t\"y\": 30\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t}\n}\n```\nAnd also HTML template ([doT template engine](http://olado.github.io/doT/index.html)) for infobox should be specified:\n```html\n\u003cscript type=\"text/template\" id=\"infobox\"\u003e\n\t\u003cdiv class=\"baloon\"\u003e\n\t\t\u003cbutton class=\"baloon__close js-infobox-close\"\u003e\u003c/button\u003e\n\t\t\u003cdiv className=\"baloon__content\"\u003e\n\t\t\t{{=baloon.title}}\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/script\u003e\n```\n\n## Methods\n### Load (callback)\n```js\nMyMap.onload(function() {\n \t// show map with animation, once it is loaded\n});\n```\n### Add marker\n```js\n// this method also accepts array of markers\nMyMap.add({\n\t\"content\": {\n\t\t\"title\": \"Lorem ipsum\"\n\t},\n\t\"marker\": {\n\t\t\"id\": 5, // optional, only if you need to show-hide it later\n\t\t\"position\": {\n\t\t\t\"lat\": -34.397,\n\t\t\t\"lng\": 152.244\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"default\": \"img/markerDefault.png\",\n\t\t\t\"active\": \"img/markerActive.png\", // optional\n\t\t\t\"size\": {\n\t\t\t\t\"x\": 41,\n\t\t\t\t\"y\": 58\n\t\t\t},\n\t\t\t\"centering\": {\n\t\t\t\t\"x\": 20,\n\t\t\t\t\"y\": 58\n\t\t\t}\n\t\t}\n\t}\n});\n```\n### Show-Hide by id\n```js\nMyMap.show(2); // shows all markers (one or many) with id equal 2\nMyMap.hide(2); // same, but hides\n```\n### Google Map Object\nThough our script wraps most of the use cases with map and infoboxes. You can still do whatever you want, because you have access to original Google Maps API:\n```js\nMyMap.realmap; // returns Google Maps map object\n```\n## Development\n- `npm run build` - Build task that generates both minified and non-minified scripts,\n- `npm run watch` - watch changes, build only minified version;\n\n\n## Authors:\nValentin ‘Whats0n’ Dorosh\n\nYuri [akella](http://cssing.org.ua) Artiukh\n\n## License\nMIT © [Coderiver](http://riverco.de)\n\n[depstat-url]: https://david-dm.org/coderiver/easygooglemaps\n[depstat-image]: https://david-dm.org/coderiver/easygooglemaps.svg\t\t ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderiver%2Feasygooglemaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderiver%2Feasygooglemaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderiver%2Feasygooglemaps/lists"}