{"_id":"@antipodes-medical/google-maps","_rev":"2-36bec36ed49ac65163ba9db927da1d49","name":"@antipodes-medical/google-maps","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@antipodes-medical/google-maps","version":"1.0.0","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","eslint":"eslint '**/*.js'","eslint:fix":"eslint '**/*.js' --fix"},"repository":{"type":"git","url":"git+https://github.com/antipodes-medical/google-maps.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/antipodes-medical/google-maps/issues"},"homepage":"https://github.com/antipodes-medical/google-maps#readme","description":"```bash yarn add @antipodes-medical/google-maps ```","devDependencies":{"@antipodes-medical/eslint-config-antipodes":"^1.0.5"},"gitHead":"d4aa7e516e634de6fc80e8c60a198ecdf8dda20f","_id":"@antipodes-medical/google-maps@1.0.0","_nodeVersion":"12.22.10","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Tc4FjJBgmxESAE/6c3Ieqz9tGeCq+9koWwk3WNEdiy3cHqc0jsm7TLHEuDgs9wWyChRRNjs6K5NiuYypZofCMg==","shasum":"da56c28fc8c5563b21228e1169327fc5b0323728","tarball":"https://registry.npmjs.org/@antipodes-medical/google-maps/-/google-maps-1.0.0.tgz","fileCount":11,"unpackedSize":50341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMxwkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDZQ/9EOlZ3VF2RV/qQ18z2jq6khrNDk+QIpO5SYUU7FZGjJPllOdV\r\ngQQwR4zIVlRHvGylEWFr8XjFEcExr+6DX7J40i5Hu5Tj5q8NU6k/37LTC5pW\r\nM8aaYm19yWTGGmdza1omMKPBo+x+LlW9gId9qcToCuVGyPthNeI5HrgFpIZ1\r\nZZxu8wLGRLpassu7Q0psqQC9elON6WKKL31i9mgFZE3MK3biCqV7eJjCK/Bm\r\nDo27QU6WPDfgmnjfz/w3i3FuxQw2qT60hNwcKJQ26vwa3dVSXLpzep8c5e5Q\r\npSuZqHs1tYnY3IuehFJBDq83zqDLXq5dZue30JgE7TmduUtlpGcSH+psbdnP\r\n+Nx9zJ+ovLg25uU25EMYcRtCRZDuEjE5/777c2CnhaxA/N+YqFD+rkkVS5P4\r\nX3PGE/o2zMeTtiSdLEu0y5xRIkwZtVvrtqo/c2Z/HWuIa8Vyu8BPoIIyBTMT\r\nNNJKdNpaA2lumvf+RvAtjq1B2qYxiooQXGkzTpe+nCnPYEVH8HGS4rNGU/Y+\r\nwle7oYWl8aUhljNzpwdxQ+le3HlivCjNLTndlTHkfWrQ1OcLu6n0MO5BEonJ\r\nj8Sr4iTZ75Sz6rfg+exfjyzxsqloUGF/Djp+GN7UrJ82LtwwqZAWYwEBGk1g\r\nepIa6xH4EjjvtbDr9SK1BRxtA2F8cJBYwCg=\r\n=sehr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrHJfMbTajw6729LdMahpoeJylvVTauK4qrK+LgnAh4AiBx3V9gfp5bzBPJUfuJ6CX06MwV5VkFYe+ShLsHGSppKg=="}]},"_npmUser":{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"},"directories":{},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/google-maps_1.0.0_1647516708117_0.5956436393801456"},"_hasShrinkwrap":false},"1.1.0":{"name":"@antipodes-medical/google-maps","version":"1.1.0","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","eslint":"eslint '**/*.js'","eslint:fix":"eslint '**/*.js' --fix"},"repository":{"type":"git","url":"git+https://github.com/antipodes-medical/google-maps.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/antipodes-medical/google-maps/issues"},"homepage":"https://github.com/antipodes-medical/google-maps#readme","description":"```bash yarn add @antipodes-medical/google-maps ```","devDependencies":{"@antipodes-medical/eslint-config-antipodes":"^1.0.5"},"gitHead":"ec6833e3f27b7a950bb7f5b8fe3d5c1be8067072","_id":"@antipodes-medical/google-maps@1.1.0","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-6bv64dx7llkVLOJo+KGsX31ZUlVrzPhgpk7rfA0x2UVjC2ppuhH6T7gSY5gHrkV5TriR0teWFQO22JFYfizVqQ==","shasum":"04bbfdb9113cbe3986c1238c09603bc5ce056f03","tarball":"https://registry.npmjs.org/@antipodes-medical/google-maps/-/google-maps-1.1.0.tgz","fileCount":15,"unpackedSize":55890,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSQ6f+igHPpZcDxrIXuw73vP33lwdI5SQqb07OJZPI8gIhANZZfCOFQSqPqXibFlMYSTI8fjLAa9JsOwbX21k/5MT3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJEAKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK5A/+JHW/PhVogJR76IStrliciIxJfPY1lRtXd0CMworPmArNRudu\r\nNjRLtH5k/l0QnsoJUcYyf9Fc7nyx97uxoHzHOkYGSpeNrUn66JBqDoq3aMQm\r\n/toJVtMp3XIwUnDBbxIqdjpCJNKPRkz0XpkjBY+c2mjTrVeY6JZKJ0Vymk3i\r\nSI13yFtcSDc3jKRdQtFKJXL2Kavbtrfpk2FhX6zrIvqkt79MPITDXQgQXgfx\r\nlc5hfU7omILqN5VlLrzuVeAJ7+5eI3+/R1EBU7SgYaM4ifc3/1kLj//xZbHa\r\nkJOuZsuiCbxFVouHFADVo0ecfWIXlMMWrNsdWIewSIujgey24bF0ogLG7jom\r\n2K2V+14279yrT3OmoFDKZMRTbZgahp6H0Q/TWc1sfPoQqv9UBK49kb3TV0aY\r\n0SA+PgqHcR0y60KNynvKuuIslgazIiz241oaUHyBVZRe1uKHLZ5oQtVfIk42\r\nIwT2OjTSP7cXJcvvnOmIsQyFY+cOqHpUFCmXgm0ia5cYfW8tjHADII2XatH7\r\na7P5Fg7Fc0ZsgkzTJ5/ZU29xFFzN+xlojRLKEuHATvxpKjc0UTXuPipW+xKx\r\nDNBVhICVwDfdVD2d7Nje0VfrQQjoeLa69Hn9MG8nyWWM7OX+sk59LNqDZQPt\r\nNO0vlM4IsNy5MGO95kBoqa9JTIz0V4dSPFo=\r\n=Xn7V\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"},"directories":{},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/google-maps_1.1.0_1663320074711_0.6353768579853849"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-17T11:31:48.048Z","1.0.0":"2022-03-17T11:31:48.259Z","modified":"2022-09-16T09:21:14.945Z","1.1.0":"2022-09-16T09:21:14.862Z"},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"description":"```bash yarn add @antipodes-medical/google-maps ```","homepage":"https://github.com/antipodes-medical/google-maps#readme","repository":{"type":"git","url":"git+https://github.com/antipodes-medical/google-maps.git"},"bugs":{"url":"https://github.com/antipodes-medical/google-maps/issues"},"license":"ISC","readme":"# Installation\n\n```bash\nyarn add @antipodes-medical/google-maps\n```\n\nEt dans le Javascript pour que le custom element `<google-maps>` se définisse dans le DOM. :\n\n```javascript\nimport '@antipodes-medical/google-maps'\n```\n\n# Usage\n\n```html\n<google-maps\n                api-key=\"GOOGLE_MAP_API_KEY\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n></google-maps>\n```\n\nIl vous faudra remplir `GOOGLE_MAP_API_KEY` pour que la `Google Map` fonctionne correctement. <br />\nGénéralement le `.env` devrait avoir cela, il est donc possible de faire cela :\n\n ```diff\n<google-maps\n-               api-key=\"GOOGLE_MAP_API_KEY\"\n+               api-key=\"{{ function('getenv', 'GOOGLE_MAPS_API_KEY') }}\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n></google-maps>\n```\n\n`GOOGLE_MAPS_API_KEY` étant le nom de la constante définie dans le fichier d'environnement.\n\n## Configuration\n\nLa google map est configurable a l'aide des attributs HTML.\n\n### Infowindow\n\nPour avoir une infowindow a un certain point, vous pouvez ajouter à l'intérieur de la `<google-maps>` le code. <br />\nPar exemple :\n\n```html\n<google-maps\n                api-key=\"GOOGLE_MAP_API_KEY\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n>\n  <div class=\"infowindow\"> \n      <div class=\"infowindow__title\">\n        <p>Le titre de mon infowindow</p>\n      </div>\n      <div class=\"infowindow__content\">\n        <p>Le contenu de mon infowindow.</p>\n      </div>\n  </div>\n</google-maps>\n```\n\n### Markers\n\nIl est possible d'ajouter plusieurs `markers` sur une google map.<br />\nEn procédant comme suit :\n\n```html\n<google-maps \n  api-key=\"GOOGLE_MAP_API_KEY\"\n  markers='[\n  {\n    \"latitude\": 48.87,\n    \"longitude\": 2.32,\n    \"infowindow\": \"<div class=\\\"infowindow\\\">...</div>\n  },\n  {\n    \"latitude\": 45.514,\n    \"longitude\": 1.367,\n    \"infowindow\": \"<div class=\\\"infowindow\\\">...</div>\n  }\n  ]'></google-maps>\n```\n\n#### Couleur\n\nIl est possible de customiser les markers. <br/>\nPour simplement modifier la couleur :\n\n```diff\n<google-maps\n                api-key=\"GOOGLE_MAP_API_KEY\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n+               marker-color=\"#F00\"\n></google-maps>\n```\n\n#### Icône\n\nPour modifier l'icône :\n\n```diff\n<google-maps\n                api-key=\"GOOGLE_MAP_API_KEY\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n+               marker-icon=\"https://domain.com/dist/images/pin.svg\"\n></google-maps>\n```\n\n### Zoom\n\nIl est possible de modifier le zoom sur la `Google Map` :\n\n```diff\n<google-maps\n                api-key=\"GOOGLE_MAP_API_KEY\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n+               zoom=\"12\"\n></google-maps>\n```\n\n### Style\n\nPar défaut, le style de la `Google Map` est en noir et blanc. <br/>\nIl est possible de modifier cela, comme cela par exemple :\n\n```html\n<google-maps\n                api-key=\"GOOGLE_MAP_API_KEY\"\n                latitude=\"37.78\"\n                longitude=\"-122.4\"\n                map-options='{\"styles\": [\n  {\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#1d2c4d\"\n      }\n    ]\n  },\n  {\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#8ec3b9\"\n      }\n    ]\n  },\n  {\n    \"elementType\": \"labels.text.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#1a3646\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"administrative.country\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#4b6878\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"administrative.land_parcel\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#64779e\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"administrative.province\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#4b6878\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"landscape.man_made\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#334e87\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"landscape.natural\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#023e58\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#283d6a\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#6f9ba5\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi\",\n    \"elementType\": \"labels.text.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#1d2c4d\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.park\",\n    \"elementType\": \"geometry.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#023e58\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.park\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#3C7680\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#304a7d\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#98a5be\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road\",\n    \"elementType\": \"labels.text.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#1d2c4d\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road.highway\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#2c6675\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road.highway\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#255763\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road.highway\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#b0d5ce\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road.highway\",\n    \"elementType\": \"labels.text.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#023e58\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"transit\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#98a5be\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"transit\",\n    \"elementType\": \"labels.text.stroke\",\n    \"stylers\": [\n      {\n        \"color\": \"#1d2c4d\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"transit.line\",\n    \"elementType\": \"geometry.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#283d6a\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"transit.station\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#3a4762\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"water\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"color\": \"#0e1626\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"water\",\n    \"elementType\": \"labels.text.fill\",\n    \"stylers\": [\n      {\n        \"color\": \"#4e6d70\"\n      }\n    ]\n  }\n]}'\n></google-maps>\n```\n","readmeFilename":"README.md"}