{"id":19999685,"url":"https://github.com/novicell/novicell-map","last_synced_at":"2026-02-09T15:01:39.564Z","repository":{"id":65464388,"uuid":"46970893","full_name":"Novicell/novicell-map","owner":"Novicell","description":"A simple module to load a Google map with multiple markers on it.","archived":false,"fork":false,"pushed_at":"2020-01-08T14:02:11.000Z","size":37,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T14:59:40.602Z","etag":null,"topics":["google","map","maps","novicell","novicell-map"],"latest_commit_sha":null,"homepage":"","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/Novicell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-27T09:18:47.000Z","updated_at":"2019-05-16T08:37:32.000Z","dependencies_parsed_at":"2023-01-24T17:05:14.638Z","dependency_job_id":null,"html_url":"https://github.com/Novicell/novicell-map","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/Novicell%2Fnovicell-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novicell","download_url":"https://codeload.github.com/Novicell/novicell-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241439484,"owners_count":19963095,"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":["google","map","maps","novicell","novicell-map"],"created_at":"2024-11-13T05:12:30.520Z","updated_at":"2026-02-09T15:01:34.524Z","avatar_url":"https://github.com/Novicell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Novicell Map\n**A simple component to lazy load a single google map with a marker on it.**\n\n## Usage\n\nWritten in pure Vanilla JS, it has *no dependencies*, and is easy to implement with the [novicell-frontend setup](https://github.com/Novicell/novicell-frontend).\n\n## Requirements\n\nTo use this you need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key).\n\nFor this component to be smart, it need something to get the LAT, LNG and ZOOMLEVEL, for the marker, and append it to the map-element, as data-attibutes.\n\n**Here's some plugin suggestions for some of the popular CMS's:**\n- [Umbraco](https://our.umbraco.org/projects/backoffice-extensions/angulargooglemaps)\n- [Drupal](https://www.drupal.org/project/gmap)\n- [Wordpress](http://www.advancedcustomfields.com/resources/google-map/)\n\n### Install with npm\n\n```bash\nnpm install novicell-map --save\n```\n\n## Setup\n\nFirst add an HTML elemnt and set `data-lat`, `data-lng` and `data-zoom`, and set a height for your map with CSS (inline css is just for demo):\n\n**Markup**\n```html\n\u003cdiv style=\"height:300px;\" id=\"map-canvas\" data-lat=\"56.109574\" data-lng=\"10.155361\" data-zoom=\"15\"\u003e\u003c/div\u003e\n```\n\nThen include the js file in your js bundle or in your HTML:\n\n**JS bundle**\n```javascript\nscripts: [\n    vendorPath + \"novicell-map/js/novicell.map.js\"\n    ...\n]\n```\n\n**HTML**\n```html\n    \u003cscript src=\"/node_modules/novicell-map/js/novicell.map.js\"\u003e\u003c/script\u003e\n```\n\nThen call the `init`-method with an apikey and a selector, from your `master.js`-file:\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    novicell.map.init({\n        apiKey: 'YOUR API KEY HERE',\n        selector: '#map-canvas'\n    });\n});\n```\n\n## Options\n```javascript\nnovicell.map.init({\n    apiKey: 'YOUR API KEY HERE',\n    selector: '#map-canvas',\n    title: 'Novicell HQ international',              \n    icon: {\n      url: 'test-pin.png',\n      size: {\n        width: 50,\n        height: 50\n      }\n    },\n    infoWindow: '\u003cdiv class=\"marker-content\"\u003e' +\n      '\u003cdiv class=\"siteNotice\"\u003e' +\n      '\u003c/div\u003e' +\n      '\u003ch1 class=\"marker-content-header\"\u003eNovicell HQ\u003c/h1\u003e' +\n      '\u003cdiv class=\"marker-content-body\"\u003e' +\n      '\u003cp\u003e\u003cb\u003eOffice hours:\u003c/b\u003e\u003cbr /\u003e8.00am – 4.00pm\u003c/p\u003e' +\n      '\u003cp\u003e\u003cb\u003ePhone\u003c/b\u003e\u003cbr /\u003e+45 8619 0550\u003c/p\u003e' +\n      '\u003cp\u003e\u003cb\u003eEmail\u003c/b\u003e\u003cbr /\u003e\u003ca href=\"mailto:info@novicell.dk\" title=\"Send us an email\"\u003etest@novicell.dk\u003c/a\u003e\u003c/p\u003e' +\n      '\u003cp\u003e\u003cstrong\u003eNovicell Aarhus\u003c/strong\u003e\u003cbr /\u003eSøren Nymarks Vej 6\u003cbr /\u003e8270 Højbjerg\u003c/p\u003e' +\n      '\u003c/div\u003e' +\n      '\u003c/div\u003e',\n    mapOptions: {\n      disableDefaultUI: false,\n      draggable: false,\n      scrollwheel: false,\n      styles: [{ \"featureType\": \"administrative\", \"elementType\": \"labels.text.fill\", \"stylers\": [{ \"color\": \"#444444\" }] }, { \"featureType\": \"landscape\", \"elementType\": \"all\", \"stylers\": [{ \"color\": \"#f2f2f2\" }] }, { \"featureType\": \"landscape.man_made\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"landscape.natural.landcover\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"landscape.natural.terrain\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"poi\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"poi.attraction\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"on\" }, { \"weight\": \"0.64\" }] }, { \"featureType\": \"poi.park\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"simplified\" }, { \"lightness\": \"19\" }, { \"saturation\": \"0\" }] }, { \"featureType\": \"poi.place_of_worship\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"road\", \"elementType\": \"all\", \"stylers\": [{ \"saturation\": -100 }, { \"lightness\": 45 }, { \"visibility\": \"on\" }] }, { \"featureType\": \"road.highway\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"simplified\" }] }, { \"featureType\": \"road.arterial\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"simplified\" }] }, { \"featureType\": \"road.arterial\", \"elementType\": \"labels.icon\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"road.local\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"on\" }] }, { \"featureType\": \"transit\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"transit.line\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"simplified\" }, { \"saturation\": \"0\" }, { \"lightness\": \"41\" }, { \"gamma\": \"1.27\" }] }, { \"featureType\": \"transit.station.airport\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"on\" }] }, { \"featureType\": \"transit.station.bus\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"on\" }, { \"hue\": \"#ff0000\" }] }, { \"featureType\": \"transit.station.rail\", \"elementType\": \"all\", \"stylers\": [{ \"visibility\": \"on\" }, { \"saturation\": \"23\" }, { \"lightness\": \"0\" }] }, { \"featureType\": \"water\", \"elementType\": \"all\", \"stylers\": [{ \"color\": \"#d3f3f4\" }, { \"visibility\": \"on\" }] }, { \"featureType\": \"water\", \"elementType\": \"labels\", \"stylers\": [{ \"visibility\": \"off\" }] }, { \"featureType\": \"water\", \"elementType\": \"labels.text\", \"stylers\": [{ \"color\": \"#ffffff\" }, { \"weight\": \"0.01\" }, { \"visibility\": \"off\" }] }]\n    }\n});\n```\n\n\n## Extension\n\nWhen extending the script, make sure to make a singleton for the `novicell` and the `novicell.map` objects before adding your own methods.\n\n```javascript\n'use strict';\n\nvar novicell = novicell || {};\nnovicell.map = novicell.map || {};\nnovicell.map.extentions = novicell.map.extentions || new function () {\n    this.test = function() {\n        console.log('test');\n    };\n}();\n```\nNext you need to include your js-files in your js bundle or in your HTML, and then call the `init`-method from your `master.js`.\nMake sure to load you:\n\n**JS bundle**\n```javascript\nscripts: [\n    vendorPath + \"novicell-map/js/novicell.map.js\"\n    projectPath + \"/components/novicell.map.extentions.js\"\n    ...\n]\n```\n\n**HTML**\n```html\n    \u003cscript src=\"/node_modules/novicell-map/js/novicell.map.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/scripts/components/novicell.map.extentions.js\"\u003e\u003c/script\u003e\n```\n\nThen call the `test`-method from your `master.js`:\n```javascript\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    novicell.map.init();\n    novicell.map.extentions.test();\n    ...\n});\n```\n\n## License\nThe Novicell Map is licensed under the MIT Open Source license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fnovicell-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovicell%2Fnovicell-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fnovicell-map/lists"}