├── .babelrc ├── .eslintignore ├── .eslintrc.json ├── .github ├── CODEOWNERS ├── bundlewatch.config.json ├── dependabot.yml ├── sync-repo-settings.yaml └── workflows │ ├── bundlewatch.yml │ ├── codeql.yml │ ├── dependabot.yml │ ├── docs.yml │ ├── e2e.yml │ ├── package.yml │ ├── release.yml │ └── test.yml ├── .gitignore ├── .releaserc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── e2e └── README.md ├── examples ├── basic.html ├── events.html ├── home.jpg ├── lettered.html ├── markerwithlabel-screen.png └── picturelabel.html ├── jest.config.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── index.ts ├── label.test.ts ├── label.ts ├── marker-safe.ts ├── marker.test.ts ├── marker.ts ├── overlay-view-safe.ts └── util.ts ├── tsconfig.json └── typedoc.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/env", 5 | { 6 | "targets": { 7 | "browsers": "ie>=11, > 0.25%, not dead" 8 | }, 9 | "corejs": "3.6", 10 | "useBuiltIns": "usage" 11 | } 12 | ] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | bazel-* 2 | coverage/ 3 | dist/ 4 | docs/ 5 | lib/ 6 | node_modules/ 7 | public/ -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "plugin:prettier/recommended"], 3 | "parserOptions": { 4 | "ecmaVersion": 12, 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "jsx": true 8 | } 9 | }, 10 | "plugins": ["jest"], 11 | "rules": { 12 | "no-var": 2, 13 | "prefer-arrow-callback": 2 14 | }, 15 | "overrides": [ 16 | { 17 | "files": ["*.ts", "*.tsx"], 18 | "parser": "@typescript-eslint/parser", 19 | "plugins": ["@typescript-eslint"], 20 | "extends": ["plugin:@typescript-eslint/recommended"], 21 | "rules": { 22 | "@typescript-eslint/ban-ts-comment": 0, 23 | "@typescript-eslint/ban-types": 1, 24 | "@typescript-eslint/no-empty-function": 1, 25 | "@typescript-eslint/member-ordering": 1, 26 | "@typescript-eslint/explicit-member-accessibility": [ 27 | 1, 28 | { 29 | "accessibility": "explicit", 30 | "overrides": { 31 | "accessors": "explicit", 32 | "constructors": "no-public", 33 | "methods": "explicit", 34 | "properties": "explicit", 35 | "parameterProperties": "explicit" 36 | } 37 | } 38 | ] 39 | } 40 | } 41 | ], 42 | "env": { 43 | "browser": true, 44 | "node": true, 45 | "es6": true, 46 | "jest/globals": true 47 | }, 48 | "globals": { "google": "readonly" } 49 | } 50 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | # https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners 16 | 17 | .github/ @googlemaps/admin 18 | -------------------------------------------------------------------------------- /.github/bundlewatch.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | { 4 | "path": "dist/index.*.js" 5 | } 6 | ], 7 | "ci": { 8 | "trackBranches": ["main"], 9 | "repoBranchBase": "main" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | version: 2 16 | updates: 17 | - package-ecosystem: "npm" 18 | directory: "/" 19 | schedule: 20 | interval: "weekly" 21 | -------------------------------------------------------------------------------- /.github/sync-repo-settings.yaml: -------------------------------------------------------------------------------- 1 | # Copyright 2022 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | # https://github.com/googleapis/repo-automation-bots/tree/main/packages/sync-repo-settings 16 | 17 | rebaseMergeAllowed: true 18 | squashMergeAllowed: true 19 | mergeCommitAllowed: false 20 | deleteBranchOnMerge: true 21 | branchProtectionRules: 22 | - pattern: main 23 | isAdminEnforced: false 24 | requiresStrictStatusChecks: false 25 | requiredStatusCheckContexts: 26 | - 'cla/google' 27 | - 'test' 28 | - 'snippet-bot check' 29 | - 'header-check' 30 | requiredApprovingReviewCount: 1 31 | requiresCodeOwnerReviews: true 32 | - pattern: master 33 | isAdminEnforced: false 34 | requiresStrictStatusChecks: false 35 | requiredStatusCheckContexts: 36 | - 'cla/google' 37 | - 'test' 38 | - 'snippet-bot check' 39 | - 'header-check' 40 | requiredApprovingReviewCount: 1 41 | requiresCodeOwnerReviews: true 42 | permissionRules: 43 | - team: admin 44 | permission: admin 45 | -------------------------------------------------------------------------------- /.github/workflows/bundlewatch.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Bundlewatch 16 | 17 | on: 18 | push: 19 | branches: 20 | - main 21 | pull_request: 22 | types: [synchronize, opened] 23 | 24 | jobs: 25 | bundlewatch: 26 | runs-on: ubuntu-latest 27 | env: 28 | CI_BRANCH_BASE: main 29 | steps: 30 | - uses: actions/checkout@v2 31 | - uses: jackyef/bundlewatch-gh-action@b9753bc9b3ea458ff21069eaf6206e01e046f0b5 32 | with: 33 | build-script: npm i 34 | bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }} 35 | bundlewatch-config: .github/bundlewatch.config.json 36 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | # For most projects, this workflow file will not need changing; you simply need 16 | # to commit it to your repository. 17 | # 18 | # You may wish to alter this file to override the set of languages analyzed, 19 | # or to provide custom queries or build logic. 20 | # 21 | # ******** NOTE ******** 22 | # We have attempted to detect the languages in your repository. Please check 23 | # the `language` matrix defined below to confirm you have the correct set of 24 | # supported CodeQL languages. 25 | # 26 | name: "CodeQL" 27 | 28 | on: 29 | push: 30 | branches: [main] 31 | pull_request: 32 | # The branches below must be a subset of the branches above 33 | branches: [main] 34 | schedule: 35 | - cron: "0 13 * * *" 36 | 37 | jobs: 38 | analyze: 39 | name: Analyze 40 | runs-on: ubuntu-latest 41 | permissions: 42 | actions: read 43 | contents: read 44 | security-events: write 45 | 46 | strategy: 47 | fail-fast: false 48 | matrix: 49 | language: ["javascript"] 50 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 51 | # Learn more: 52 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 53 | 54 | steps: 55 | - name: Checkout repository 56 | uses: actions/checkout@v2 57 | 58 | # Initializes the CodeQL tools for scanning. 59 | - name: Initialize CodeQL 60 | uses: github/codeql-action/init@v1 61 | with: 62 | languages: ${{ matrix.language }} 63 | # If you wish to specify custom queries, you can do so here or in a config file. 64 | # By default, queries listed here will override any specified in a config file. 65 | # Prefix the list here with "+" to use these queries and those in the config file. 66 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 67 | 68 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 69 | # If this step fails, then you should remove it and run the build manually (see below) 70 | - name: Autobuild 71 | uses: github/codeql-action/autobuild@v1 72 | 73 | # ℹ️ Command-line programs to run using the OS shell. 74 | # 📚 https://git.io/JvXDl 75 | 76 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 77 | # and modify them (or add more) to build your code if your project 78 | # uses a compiled language 79 | 80 | #- run: | 81 | # make bootstrap 82 | # make release 83 | 84 | - name: Perform CodeQL Analysis 85 | uses: github/codeql-action/analyze@v1 86 | -------------------------------------------------------------------------------- /.github/workflows/dependabot.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2022 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Dependabot 16 | on: pull_request 17 | 18 | permissions: 19 | contents: write 20 | 21 | jobs: 22 | dependabot: 23 | runs-on: ubuntu-latest 24 | if: ${{ github.actor == 'dependabot[bot]' }} 25 | env: 26 | PR_URL: ${{github.event.pull_request.html_url}} 27 | GITHUB_TOKEN: ${{secrets.SYNCED_GITHUB_TOKEN_REPO}} 28 | steps: 29 | - name: approve 30 | run: gh pr review --approve "$PR_URL" 31 | - name: merge 32 | run: gh pr merge --auto --squash --delete-branch "$PR_URL" 33 | -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Docs 16 | on: [push, pull_request] 17 | jobs: 18 | test: 19 | runs-on: ubuntu-latest 20 | steps: 21 | - uses: actions/checkout@v2 22 | - uses: actions/cache@v2 23 | with: 24 | path: ~/.npm 25 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 26 | restore-keys: | 27 | ${{ runner.os }}-node- 28 | - run: | 29 | npm i 30 | npm run docs 31 | - uses: peaceiris/actions-gh-pages@v3 32 | if: github.ref == 'refs/heads/main' 33 | with: 34 | github_token: ${{ secrets.GITHUB_TOKEN }} 35 | publish_dir: ./docs 36 | user_name: 'googlemaps-bot' 37 | user_email: 'googlemaps-bot@users.noreply.github.com' 38 | commit_message: ${{ github.event.head_commit.message }} 39 | -------------------------------------------------------------------------------- /.github/workflows/e2e.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2020 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: e2e 16 | on: 17 | push: 18 | schedule: 19 | - cron: "0 12 * * *" 20 | jobs: 21 | chrome: 22 | runs-on: ubuntu-latest 23 | services: 24 | hub: 25 | image: selenium/standalone-chrome 26 | volumes: 27 | - ${{ github.workspace }}:${{ github.workspace }} 28 | ports: 29 | - 4444:4444 30 | steps: 31 | - uses: actions/checkout@v2 32 | - run: npm i 33 | - run: npm run test:e2e 34 | env: 35 | GOOGLE_MAPS_API_KEY: ${{ secrets.SYNCED_GOOGLE_MAPS_API_KEY_WEB }} 36 | firefox: 37 | runs-on: ubuntu-latest 38 | services: 39 | hub: 40 | image: selenium/standalone-firefox 41 | volumes: 42 | - ${{ github.workspace }}:${{ github.workspace }} 43 | ports: 44 | - 4444:4444 45 | steps: 46 | - uses: actions/checkout@v2 47 | - run: npm i 48 | - run: npm run test:e2e 49 | env: 50 | GOOGLE_MAPS_API_KEY: ${{ secrets.SYNCED_GOOGLE_MAPS_API_KEY_WEB }} 51 | BROWSER: firefox 52 | -------------------------------------------------------------------------------- /.github/workflows/package.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Package 16 | on: 17 | - push 18 | - pull_request 19 | jobs: 20 | package: 21 | runs-on: ubuntu-latest 22 | steps: 23 | - uses: actions/checkout@v2 24 | - run: npm i 25 | - uses: jpoehnelt/verify-npm-files-action@main 26 | with: 27 | keys: | 28 | types 29 | main 30 | module 31 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Release 16 | on: 17 | push: 18 | branches: 19 | - main 20 | concurrency: release 21 | jobs: 22 | build: 23 | runs-on: ubuntu-latest 24 | steps: 25 | - uses: actions/setup-node@v2 26 | with: 27 | node-version: '14' 28 | - name: Checkout 29 | uses: actions/checkout@v3 30 | with: 31 | token: ${{ secrets.SYNCED_GITHUB_TOKEN_REPO }} 32 | - uses: actions/cache@v2 33 | with: 34 | path: ~/.npm 35 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 36 | restore-keys: | 37 | ${{ runner.os }}-node- 38 | - name: Test 39 | run: | 40 | npm i 41 | npm run lint 42 | npm test 43 | - name: Release 44 | uses: cycjimmy/semantic-release-action@v2 45 | with: 46 | semantic_version: 19 47 | extra_plugins: | 48 | @semantic-release/commit-analyzer 49 | semantic-release-interval 50 | @semantic-release/release-notes-generator 51 | @semantic-release/git 52 | @semantic-release/github 53 | @semantic-release/npm 54 | @googlemaps/semantic-release-config 55 | semantic-release-npm-deprecate 56 | env: 57 | GH_TOKEN: ${{ secrets.SYNCED_GITHUB_TOKEN_REPO }} 58 | NPM_TOKEN: ${{ secrets.NPM_WOMBAT_TOKEN }} 59 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Test 16 | on: [push, pull_request] 17 | jobs: 18 | test: 19 | runs-on: ubuntu-latest 20 | steps: 21 | - uses: actions/checkout@v2 22 | - uses: actions/cache@v2 23 | with: 24 | path: ~/.npm 25 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 26 | restore-keys: | 27 | ${{ runner.os }}-node- 28 | - run: npm i 29 | - run: npm run lint 30 | - run: npm test 31 | - uses: codecov/codecov-action@v1 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | .npmrc 4 | **/docs 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | 83 | # next.js build output 84 | .next 85 | 86 | # nuxt.js build output 87 | .nuxt 88 | 89 | # gatsby files 90 | .cache/ 91 | public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 109 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 110 | 111 | # User-specific stuff 112 | .idea/**/workspace.xml 113 | .idea/**/tasks.xml 114 | .idea/**/usage.statistics.xml 115 | .idea/**/dictionaries 116 | .idea/**/shelf 117 | 118 | # Generated files 119 | .idea/**/contentModel.xml 120 | 121 | # Sensitive or high-churn files 122 | .idea/**/dataSources/ 123 | .idea/**/dataSources.ids 124 | .idea/**/dataSources.local.xml 125 | .idea/**/sqlDataSources.xml 126 | .idea/**/dynamic.xml 127 | .idea/**/uiDesigner.xml 128 | .idea/**/dbnavigator.xml 129 | 130 | # Gradle 131 | .idea/**/gradle.xml 132 | .idea/**/libraries 133 | 134 | # Gradle and Maven with auto-import 135 | # When using Gradle or Maven with auto-import, you should exclude module files, 136 | # since they will be recreated, and may cause churn. Uncomment if using 137 | # auto-import. 138 | # .idea/modules.xml 139 | # .idea/*.iml 140 | # .idea/modules 141 | # *.iml 142 | # *.ipr 143 | 144 | # CMake 145 | cmake-build-*/ 146 | 147 | # Mongo Explorer plugin 148 | .idea/**/mongoSettings.xml 149 | 150 | # File-based project format 151 | *.iws 152 | 153 | # IntelliJ 154 | out/ 155 | 156 | # mpeltonen/sbt-idea plugin 157 | .idea_modules/ 158 | 159 | # JIRA plugin 160 | atlassian-ide-plugin.xml 161 | 162 | # Cursive Clojure plugin 163 | .idea/replstate.xml 164 | 165 | # Crashlytics plugin (for Android Studio and IntelliJ) 166 | com_crashlytics_export_strings.xml 167 | crashlytics.properties 168 | crashlytics-build.properties 169 | fabric.properties 170 | 171 | # Editor-based Rest Client 172 | .idea/httpRequests 173 | 174 | # Android studio 3.1+ serialized cache file 175 | .idea/caches/build_file_checksums.ser 176 | 177 | # General 178 | .DS_Store 179 | .AppleDouble 180 | .LSOverride 181 | 182 | # Icon must end with two \r 183 | Icon 184 | 185 | 186 | # Thumbnails 187 | ._* 188 | 189 | # Files that might appear in the root of a volume 190 | .DocumentRevisions-V100 191 | .fseventsd 192 | .Spotlight-V100 193 | .TemporaryItems 194 | .Trashes 195 | .VolumeIcon.icns 196 | .com.apple.timemachine.donotpresent 197 | 198 | # Directories potentially created on remote AFP share 199 | .AppleDB 200 | .AppleDesktop 201 | Network Trash Folder 202 | Temporary Items 203 | .apdisk 204 | 205 | # Windows thumbnail cache files 206 | Thumbs.db 207 | Thumbs.db:encryptable 208 | ehthumbs.db 209 | ehthumbs_vista.db 210 | 211 | # Dump file 212 | *.stackdump 213 | 214 | # Folder config file 215 | [Dd]esktop.ini 216 | 217 | # Recycle Bin used on file shares 218 | $RECYCLE.BIN/ 219 | 220 | # Windows Installer files 221 | *.cab 222 | *.msi 223 | *.msix 224 | *.msm 225 | *.msp 226 | 227 | # Windows shortcuts 228 | *.lnk 229 | 230 | .vscode 231 | -------------------------------------------------------------------------------- /.releaserc: -------------------------------------------------------------------------------- 1 | extends: "@googlemaps/semantic-release-config" 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to become a contributor and submit your own code 2 | 3 | 1. Submit an issue describing your proposed change to the repo in question. 4 | 1. The repo owner will respond to your issue promptly. 5 | 1. Fork the desired repo, develop and test your code changes. 6 | 1. Ensure that your code adheres to the existing style in the code to which 7 | you are contributing. 8 | 1. Ensure that your code has an appropriate set of tests which all pass. 9 | 1. Title your pull request following [Conventional Commits](https://www.conventionalcommits.org/) styling. 10 | 1. Submit a pull request. 11 | 12 | ## Running the tests 13 | 14 | 1. Install dependencies: 15 | 16 | npm i 17 | 1. Run lint 18 | 19 | npm run lint 20 | npm run format # will fix some issues 21 | 22 | 1. Run the tests: 23 | 24 | # Run unit tests. 25 | npm test 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Google Maps JavaScript MarkerWithLabel 2 | 3 | [![npm](https://img.shields.io/npm/v/@googlemaps/markerwithlabel)](https://www.npmjs.com/package/@googlemaps/markerwithlabel) 4 | ![Build](https://github.com/googlemaps/js-markerwithlabel/workflows/Test/badge.svg) 5 | ![Release](https://github.com/googlemaps/js-markerwithlabel/workflows/Release/badge.svg) 6 | [![codecov](https://codecov.io/gh/googlemaps/js-markerwithlabel/branch/main/graph/badge.svg)](https://codecov.io/gh/googlemaps/js-markerwithlabel) 7 | ![GitHub contributors](https://img.shields.io/github/contributors/googlemaps/js-markerwithlabel?color=green) 8 | [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 9 | [![](https://github.com/jpoehnelt/in-solidarity-bot/raw/main/static//badge-flat.png)](https://github.com/apps/in-solidarity) 10 | [![Discord](https://img.shields.io/discord/676948200904589322?color=6A7EC2&logo=discord&logoColor=ffffff)](https://discord.gg/jRteCzP) 11 | 12 | ## Description 13 | 14 | The library provides Markers with labels for Google Maps Platform. 15 | 16 | > **Note**: This library is the nearly the same interface as the existing library `@google/markerwithlabel`, but renamed and in its own repository. All future development will continue here. 17 | 18 | > **Note**: There are some breaking changes from `@google/markerwithlabel` including anchor position. This should be considered a major version bump! 19 | 20 | ## Install 21 | 22 | Available via npm as the package [@googlemaps/markerwithlabel](https://www.npmjs.com/package/@googlemaps/markerwithlabel). 23 | 24 | `npm i @googlemaps/markerwithlabel` 25 | 26 | or 27 | 28 | `yarn add @googlemaps/markerwithlabel` 29 | 30 | Alternatively you may add the umd package directly to the html document using the unpkg link. 31 | 32 | `` 33 | 34 | When adding via unpkg, the marker with labels can be accessed at `new markerWithLabel.MarkerWithLabel()`. 35 | 36 | A version can be specified by using `https://unpkg.com/@googlemaps/markerwithlabel@VERSION/dist/...`. 37 | 38 | ## Documentation 39 | 40 | The reference documentation can be found at this [link](https://googlemaps.github.io/js-markerwithlabel/index.html). 41 | 42 | ## Example 43 | 44 | ```js 45 | import { MarkerWithLabel } from '@googlemaps/markerwithlabel'; 46 | 47 | new MarkerWithLabel({ 48 | position: new google.maps.LatLng(49.475, -123.84), 49 | clickable: true, 50 | draggable: true, 51 | map: map, 52 | labelContent: "foo", // can also be HTMLElement 53 | labelAnchor: new google.maps.Point(-21, 3), 54 | labelClass: "labels", // the CSS class for the label 55 | labelStyle: { opacity: 1.0 }, 56 | }) 57 | ``` 58 | 59 | View the package in action: 60 | 61 | - [Basic Example](https://googlemaps.github.io/js-markerwithlabel/examples/basic.html) 62 | - [Events Example](https://googlemaps.github.io/js-markerwithlabel/examples/events.html) 63 | - [Lettered Example](https://googlemaps.github.io/js-markerwithlabel/examples/lettered.html) 64 | - [Picture Example](https://googlemaps.github.io/js-markerwithlabel/examples/picturelabel.html) 65 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Report a security issue 2 | 3 | To report a security issue, please use https://g.co/vulnz. We use 4 | https://g.co/vulnz for our intake, and do coordination and disclosure here on 5 | GitHub (including using GitHub Security Advisory). The Google Security Team will 6 | respond within 5 working days of your report on g.co/vulnz. 7 | 8 | To contact us about other bugs, please open an issue on GitHub. 9 | 10 | > **Note**: This file is synchronized from the https://github.com/googlemaps/.github repository. 11 | -------------------------------------------------------------------------------- /e2e/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlemaps/js-markerwithlabel/e3ac5a3b560c7a567fa445d8231ce272b02c82ce/e2e/README.md -------------------------------------------------------------------------------- /examples/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | MarkerWithLabel Example 22 | 37 | 38 | 39 | 85 | 86 | 87 |

88 | A basic example of markers with labels. Note that an information window 89 | appears whether you click the marker portion or the label portion of the 90 | MarkerWithLabel. The two markers shown here are both draggable so you can 91 | easily verify that markers and labels overlap as expected. 92 |

93 |
94 |
95 | 96 | 97 | -------------------------------------------------------------------------------- /examples/events.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | MarkerWithLabel Mouse Events 22 | 35 | 36 | 37 | 98 | 99 | 100 |

101 | Try interacting with the marker (mouseover, mouseout, click, double-click, 102 | mouse down, mouse up, drag) to see a log of events that are fired. Events 103 | are fired whether you are interacting with the marker portion or the label 104 | portion. 105 |

106 |
107 |
108 | 109 | 110 | -------------------------------------------------------------------------------- /examples/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlemaps/js-markerwithlabel/e3ac5a3b560c7a567fa445d8231ce272b02c82ce/examples/home.jpg -------------------------------------------------------------------------------- /examples/lettered.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | Lettered Marker 22 | 33 | 34 | 35 | 69 | 70 | 71 |

72 | With MarkerWithLabel you can easily modify a standard marker to include an 73 | identifying character of your choice. In this case the marker is 74 | superimposed with the letter "A". 75 |

76 |
77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/markerwithlabel-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlemaps/js-markerwithlabel/e3ac5a3b560c7a567fa445d8231ce272b02c82ce/examples/markerwithlabel-screen.png -------------------------------------------------------------------------------- /examples/picturelabel.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | Picture Label for Marker 22 | 27 | 28 | 29 | 66 | 67 | 68 |

69 | This is an example of how to use a picture as a marker label. Since the 70 | picture label is quite large, the opacity of the label is set to 0.50 to 71 | make it possible to get a rough idea of what's on the map behind the 72 | picture. 73 |

74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | transform: { 19 | "^.+\\.tsx?$": "ts-jest", 20 | }, 21 | collectCoverage: true, 22 | testPathIgnorePatterns: ["/dist/"], 23 | }; 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@googlemaps/markerwithlabel", 3 | "version": "2.0.29", 4 | "keywords": [ 5 | "label", 6 | "google", 7 | "maps", 8 | "marker" 9 | ], 10 | "homepage": "https://github.com/googlemaps/js-markerwithlabel", 11 | "bugs": { 12 | "url": "https://github.com/googlemaps/js-markerwithlabel/issues" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/googlemaps/js-markerwithlabel.git" 17 | }, 18 | "license": "Apache-2.0", 19 | "author": "Justin Poehnelt", 20 | "main": "dist/index.umd.js", 21 | "unpkg": "dist/index.min.js", 22 | "module": "dist/index.esm.js", 23 | "types": "dist/index.d.ts", 24 | "files": [ 25 | "dist/*" 26 | ], 27 | "scripts": { 28 | "docs": "typedoc src/index.ts && cp -r dist docs/dist && cp -r examples docs/examples", 29 | "format": "eslint . --fix", 30 | "lint": "eslint .", 31 | "prepare": "rm -rf dist && rollup -c", 32 | "test": "jest src/*", 33 | "test:e2e": "jest --passWithNoTests e2e/*" 34 | }, 35 | "devDependencies": { 36 | "@babel/preset-env": "^7.24.8", 37 | "@babel/runtime-corejs3": "^7.26.0", 38 | "@googlemaps/jest-mocks": "^2.21.4", 39 | "@rollup/plugin-babel": "^6.0.4", 40 | "@rollup/plugin-commonjs": "^28.0.1", 41 | "@rollup/plugin-typescript": "^11.1.6", 42 | "@types/google.maps": "^3.58.1", 43 | "@types/jest": "^27.4.1", 44 | "@types/selenium-webdriver": "^4.1.27", 45 | "@typescript-eslint/eslint-plugin": ">=4.33.0", 46 | "@typescript-eslint/parser": ">=4.33.0", 47 | "chromedriver": "^131.0.1", 48 | "core-js": "^3.39.0", 49 | "eslint": "^7.32.0", 50 | "eslint-config-prettier": "^9.1.0", 51 | "eslint-plugin-jest": "^28.2.0", 52 | "eslint-plugin-prettier": "^4.2.1", 53 | "geckodriver": "^4.4.2", 54 | "jest": "^26.6.3", 55 | "prettier": "^2.8.8", 56 | "rollup": "^2.79.2", 57 | "rollup-plugin-terser": "^7.0.2", 58 | "selenium-webdriver": "^4.27.0", 59 | "ts-jest": "^26.5.6", 60 | "typedoc": "^0.26.11", 61 | "typescript": "^4.9.5" 62 | }, 63 | "publishConfig": { 64 | "access": "public", 65 | "registry": "https://wombat-dressing-room.appspot.com" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { babel } from "@rollup/plugin-babel"; 18 | import commonjs from "@rollup/plugin-commonjs"; 19 | import { terser } from "rollup-plugin-terser"; 20 | import typescript from "@rollup/plugin-typescript"; 21 | 22 | const babelOptions = { 23 | extensions: [".js", ".ts"], 24 | }; 25 | 26 | const terserOptions = { output: { comments: "" } }; 27 | 28 | export default [ 29 | { 30 | input: "src/index.ts", 31 | plugins: [ 32 | typescript({ tsconfig: "./tsconfig.json", declarationDir: "./" }), 33 | 34 | commonjs(), 35 | babel(babelOptions), 36 | terser(terserOptions), 37 | ], 38 | output: [ 39 | { 40 | file: "dist/index.umd.js", 41 | format: "umd", 42 | sourcemap: true, 43 | name: "markerWithLabel", 44 | }, 45 | { 46 | file: "dist/index.min.js", 47 | format: "iife", 48 | sourcemap: true, 49 | name: "markerWithLabel", 50 | }, 51 | ], 52 | }, 53 | { 54 | input: "src/index.ts", 55 | plugins: [ 56 | typescript({ tsconfig: "./tsconfig.json", declarationDir: "./" }), 57 | 58 | commonjs(), 59 | ], 60 | output: { 61 | file: "dist/index.dev.js", 62 | format: "iife", 63 | name: "markerWithLabel", 64 | }, 65 | }, 66 | { 67 | input: "src/index.ts", 68 | plugins: [ 69 | typescript({ tsconfig: "./tsconfig.json", declarationDir: "./" }), 70 | ], 71 | output: { 72 | file: "dist/index.esm.js", 73 | format: "esm", 74 | sourcemap: true, 75 | }, 76 | }, 77 | ]; 78 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { MarkerWithLabel, MarkerWithLabelOptions } from "./marker"; 18 | 19 | export { MarkerWithLabel, MarkerWithLabelOptions }; 20 | -------------------------------------------------------------------------------- /src/label.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { Label } from "./label"; 18 | import { initialize } from "@googlemaps/jest-mocks"; 19 | 20 | class OverlayView {} 21 | beforeAll(() => { 22 | document.body.innerHTML = ""; 23 | initialize(); 24 | google.maps.OverlayView = OverlayView as any; 25 | Label.prototype.getProjection = (): google.maps.MapCanvasProjection => { 26 | return { 27 | fromPointToLatLng: () => {}, 28 | fromLatLngToPoint: () => {}, 29 | fromLatLngToDivPixel: (position: google.maps.LatLng) => { 30 | return { x: 1, y: 3 }; 31 | }, 32 | } as unknown as google.maps.MapCanvasProjection; 33 | }; 34 | }); 35 | 36 | test("should render the divs correctly with string content", () => { 37 | const label = new Label({ labelContent: "foo", labelClass: "label" }); 38 | label.draw(); 39 | expect(label["labelDiv"]).toMatchInlineSnapshot(` 40 |
44 | foo 45 |
46 | `); 47 | expect(label["eventDiv"]).toMatchInlineSnapshot(` 48 |
52 | foo 53 |
54 | `); 55 | }); 56 | 57 | test("should render the divs correctly with node content", () => { 58 | const label = new Label({ labelContent: document.createElement("img") }); 59 | label.draw(); 60 | expect(label["labelDiv"]).toMatchInlineSnapshot(` 61 |
65 | 66 |
67 | `); 68 | expect(label["eventDiv"]).toMatchInlineSnapshot(` 69 |
73 | 74 |
75 | `); 76 | }); 77 | 78 | test("should render the divs with options", () => { 79 | const label = new Label({ 80 | labelContent: "foo", 81 | opacity: 0.5, 82 | labelClass: "label", 83 | position: { lat: 0, lng: 0 }, 84 | anchorPoint: { x: 100, y: 200 } as google.maps.Point, 85 | labelZIndexOffset: 10, 86 | zIndex: 1000, 87 | draggable: false, 88 | clickable: false, 89 | }); 90 | label.draw(); 91 | expect(label["labelDiv"]).toMatchInlineSnapshot(` 92 |
96 | foo 97 |
98 | `); 99 | expect(label["eventDiv"]).toMatchInlineSnapshot(` 100 | 106 | `); 107 | }); 108 | 109 | test.each([ 110 | [false, false, "none"], 111 | [true, false, "block"], 112 | [false, true, "block"], 113 | [true, true, "block"], 114 | ])( 115 | "should render the event div based upon interactivity %s %s %s", 116 | (clickable, draggable, display) => { 117 | const label = new Label({ 118 | labelContent: "foo", 119 | draggable: false, 120 | clickable: false, 121 | }); 122 | 123 | label.visible = true; 124 | 125 | label.clickable = clickable; 126 | label.draggable = draggable; 127 | label.draw(); 128 | expect(label["eventDiv"].style.display).toBe(display); 129 | expect(label["eventDiv"].style.cursor).toBe( 130 | display === "block" ? "pointer" : "inherit" 131 | ); 132 | } 133 | ); 134 | 135 | test("should not display event div if marker is not visible", () => { 136 | const label = new Label({ labelContent: "foo" }); 137 | 138 | label.clickable = true; 139 | label.draggable = true; 140 | label.visible = false; 141 | 142 | label.draw(); 143 | expect(label["eventDiv"].style.display).toBe("none"); 144 | }); 145 | -------------------------------------------------------------------------------- /src/label.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { MarkerWithLabelOptions } from "./marker"; 18 | import { OverlayViewSafe } from "./overlay-view-safe"; 19 | 20 | export type LabelOptions = Partial; 21 | 22 | const BLOCK = "block"; 23 | const NONE = "none"; 24 | const ABSOLUTE = "absolute"; 25 | const CURSOR = "pointer"; 26 | const LABEL_CLASS = "marker-label"; 27 | const EVENT_CLASS = "marker-label-event"; 28 | const EVENT_DIV_OPACITY = "0.01"; 29 | 30 | export class Label extends OverlayViewSafe { 31 | public anchor: google.maps.Point; 32 | public position: google.maps.LatLng; 33 | public zIndex: number; 34 | public clickable: boolean; 35 | public draggable: boolean; 36 | private labelDiv: HTMLElement; 37 | private eventDiv: HTMLElement; 38 | private zIndexOffset: number; 39 | private hoverCursor: string; 40 | 41 | constructor({ 42 | clickable = true, 43 | cursor = CURSOR, 44 | draggable = true, 45 | labelAnchor = new google.maps.Point(0, 0), 46 | labelClass = LABEL_CLASS, 47 | labelContent, 48 | position, 49 | opacity = 1, 50 | map, 51 | labelZIndexOffset = 1, 52 | visible = true, 53 | zIndex = 0, 54 | }: LabelOptions) { 55 | super(); 56 | 57 | this.createElements(); 58 | 59 | this.anchor = labelAnchor; 60 | this.content = labelContent; 61 | this.className = labelClass; 62 | this.clickable = clickable; 63 | this.cursor = cursor; 64 | this.draggable = draggable; 65 | 66 | if (position instanceof google.maps.LatLng) { 67 | this.position = position; 68 | } else { 69 | this.position = new google.maps.LatLng(position); 70 | } 71 | 72 | this.opacity = opacity; 73 | this.visible = visible; 74 | this.zIndex = zIndex; 75 | this.zIndexOffset = labelZIndexOffset; 76 | 77 | if (map) { 78 | this.setMap(map); 79 | } 80 | } 81 | 82 | public get element(): HTMLElement { 83 | return this.labelDiv; 84 | } 85 | 86 | public get content(): string { 87 | return this.labelDiv.innerHTML; 88 | } 89 | 90 | public set content(content: string | HTMLElement) { 91 | if (typeof content === "string") { 92 | this.labelDiv.innerHTML = content; 93 | this.eventDiv.innerHTML = content; 94 | } else { 95 | this.labelDiv.innerHTML = ""; 96 | this.labelDiv.appendChild(content); 97 | this.eventDiv.innerHTML = ""; 98 | this.eventDiv.appendChild(content.cloneNode(true)); 99 | } 100 | } 101 | 102 | /** 103 | * Get the class of the label div elements. 104 | * 105 | * **Note**: This will always return the default `marker-label`. 106 | */ 107 | public get className(): string { 108 | return this.labelDiv.className; 109 | } 110 | 111 | /** 112 | * Set the class of the label div elements. 113 | * 114 | * **Note**: The default `marker-label` will additionaly be added. 115 | */ 116 | public set className(className: string) { 117 | this.labelDiv.className = className; 118 | this.labelDiv.classList.add(LABEL_CLASS); 119 | this.eventDiv.className = className; 120 | this.eventDiv.classList.add(EVENT_CLASS); 121 | } 122 | 123 | public set cursor(cursor: string) { 124 | this.hoverCursor = cursor; 125 | if (this.isInteractive) { 126 | this.eventDiv.style.cursor = cursor; 127 | } 128 | } 129 | 130 | public get cursor(): string { 131 | return this.isInteractive ? this.hoverCursor : "inherit"; 132 | } 133 | 134 | public get isInteractive(): boolean { 135 | return this.draggable || this.clickable; 136 | } 137 | 138 | public set opacity(opacity: number) { 139 | this.labelDiv.style.opacity = String(opacity); 140 | } 141 | 142 | public set title(title: string) { 143 | this.eventDiv.title = title; 144 | } 145 | 146 | public set visible(visible: boolean) { 147 | if (visible) { 148 | this.labelDiv.style.display = BLOCK; 149 | this.eventDiv.style.display = BLOCK; 150 | } else { 151 | this.labelDiv.style.display = NONE; 152 | this.eventDiv.style.display = NONE; 153 | } 154 | } 155 | 156 | public onAdd(): void { 157 | this.getPanes().markerLayer.appendChild(this.labelDiv); 158 | this.getPanes().overlayMouseTarget.appendChild(this.eventDiv); 159 | } 160 | 161 | public draw(): void { 162 | const coordinates = this.getProjection().fromLatLngToDivPixel( 163 | this.position 164 | ); 165 | const x = Math.round(coordinates.x + this.anchor.x); 166 | const y = Math.round(coordinates.y + this.anchor.y); 167 | this.labelDiv.style.left = `${x}px`; 168 | this.labelDiv.style.top = `${y}px`; 169 | this.eventDiv.style.left = this.labelDiv.style.left; 170 | this.eventDiv.style.top = this.labelDiv.style.top; 171 | 172 | // If zIndex is not defined, used vertical position on map. 173 | const zIndex = 174 | (this.zIndex || Math.ceil(coordinates.y)) + this.zIndexOffset; 175 | this.labelDiv.style.zIndex = String(zIndex); 176 | this.eventDiv.style.zIndex = String(zIndex); 177 | 178 | // If not interactive set display none on event div 179 | this.eventDiv.style.display = this.isInteractive 180 | ? this.eventDiv.style.display 181 | : NONE; 182 | this.eventDiv.style.cursor = this.cursor; 183 | } 184 | 185 | public addDomListener( 186 | event: string, 187 | handler: (event: Event) => void 188 | ): google.maps.MapsEventListener { 189 | this.eventDiv.addEventListener(event, handler); 190 | return { remove: () => this.eventDiv.removeEventListener(event, handler) }; 191 | } 192 | 193 | public onRemove(): void { 194 | this.labelDiv.parentNode.removeChild(this.labelDiv); 195 | this.eventDiv.parentNode.removeChild(this.eventDiv); 196 | } 197 | 198 | private createElements(): void { 199 | this.labelDiv = document.createElement("div"); 200 | this.eventDiv = document.createElement("div"); 201 | 202 | // default styles for both divs 203 | this.labelDiv.style.position = ABSOLUTE; 204 | this.eventDiv.style.position = ABSOLUTE; 205 | 206 | // default styles for eventDiv 207 | this.eventDiv.style.opacity = EVENT_DIV_OPACITY; 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /src/marker-safe.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { extend } from "./util"; 18 | 19 | // eslint-disable-next-line @typescript-eslint/no-empty-interface 20 | export interface MarkerSafe extends google.maps.Marker {} 21 | 22 | /** 23 | * @ignore 24 | */ 25 | export class MarkerSafe { 26 | constructor(options: google.maps.MarkerOptions) { 27 | extend(MarkerSafe, google.maps.Marker); 28 | google.maps.Marker.call(this, options); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/marker.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { Label } from "./label"; 18 | import { MarkerWithLabel } from "./marker"; 19 | import { initialize } from "@googlemaps/jest-mocks"; 20 | 21 | class OverlayView {} 22 | beforeAll(() => { 23 | jest.useFakeTimers(); 24 | initialize(); 25 | google.maps.OverlayView = OverlayView as any; 26 | Label.prototype.getProjection = (): google.maps.MapCanvasProjection => { 27 | return { 28 | fromPointToLatLng: () => {}, 29 | fromLatLngToPoint: () => {}, 30 | fromLatLngToDivPixel: (position: google.maps.LatLng) => { 31 | return { x: 1, y: 3 }; 32 | }, 33 | } as unknown as google.maps.MapCanvasProjection; 34 | }; 35 | }); 36 | 37 | beforeEach(() => { 38 | // avoid type error without new 39 | google.maps.Marker = jest.fn() as any; 40 | google.maps.Marker.prototype.setMap = jest.fn(); 41 | google.maps.Marker.prototype.getMap = jest.fn(); 42 | 43 | Label.prototype.setMap = jest.fn(); 44 | 45 | HTMLElement.prototype.addEventListener = jest.fn(); 46 | }); 47 | 48 | test("init should not pass extended options", () => { 49 | const marker = new MarkerWithLabel({ 50 | labelContent: "foo", 51 | labelClass: "bar", 52 | clickable: true, 53 | }); 54 | expect(google.maps.Marker).toBeCalledWith({ clickable: true }); 55 | }); 56 | 57 | test("should have listeners after multiple calls to setMap", () => { 58 | const map = jest.fn() as any as google.maps.Map; 59 | (google.maps.Marker.prototype.getMap as jest.Mock).mockImplementation(() => { 60 | return map; 61 | }); 62 | const marker = new MarkerWithLabel({ labelContent: "foo" }); 63 | 64 | marker.setMap(map); 65 | jest.advanceTimersByTime(1); 66 | expect(marker["interactiveListeners"].length).toBeGreaterThan(0); 67 | 68 | marker.setMap(null); 69 | jest.advanceTimersByTime(1); 70 | expect(marker["interactiveListeners"]).toBe(null); 71 | 72 | marker.setMap(map); 73 | jest.advanceTimersByTime(1); 74 | expect(marker["interactiveListeners"].length).toBeGreaterThan(0); 75 | }); 76 | 77 | test("should have interactive listeners", () => { 78 | const marker = new MarkerWithLabel({ labelContent: "foo" }); 79 | (google.maps.Marker.prototype.getMap as jest.Mock).mockImplementation(() => { 80 | return {} as google.maps.Map; 81 | }); 82 | marker["addInteractiveListeners"](); 83 | 84 | expect( 85 | (HTMLElement.prototype.addEventListener as any).mock.calls.map( 86 | (c: any[]) => c[0] 87 | ) 88 | ).toMatchInlineSnapshot(` 89 | Array [ 90 | "mouseover", 91 | "mouseout", 92 | "mousedown", 93 | "mouseup", 94 | "click", 95 | "dblclick", 96 | "touchstart", 97 | "touchmove", 98 | "touchend", 99 | ] 100 | `); 101 | }); 102 | 103 | test("should not have interactive listeners if no map", () => { 104 | const marker = new MarkerWithLabel({ labelContent: "foo" }); 105 | (google.maps.Marker.prototype.getMap as jest.Mock).mockImplementation(() => { 106 | return; 107 | }); 108 | marker["addInteractiveListeners"](); 109 | 110 | expect( 111 | HTMLElement.prototype.addEventListener as jest.Mock 112 | ).toHaveBeenCalledTimes(0); 113 | }); 114 | 115 | test("should set class on label", () => { 116 | const marker = new MarkerWithLabel({ labelContent: "foo" }); 117 | const className = "bar baz"; 118 | marker.labelClass = className; 119 | expect(marker.labelClass).toMatch(className); 120 | }); 121 | 122 | test("should set content on label", () => { 123 | const marker = new MarkerWithLabel({ labelContent: "foo" }); 124 | const newConent = "bar"; 125 | marker.labelContent = newConent; 126 | expect(marker.labelContent).toMatch(newConent); 127 | }); 128 | -------------------------------------------------------------------------------- /src/marker.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { abortEvent, omit, stopPropagation } from "./util"; 18 | 19 | import { Label } from "./label"; 20 | import { MarkerSafe } from "./marker-safe"; 21 | 22 | const CLICK = "click"; 23 | const DBLCLICK = "dblclick"; 24 | const DRAG = "drag"; 25 | const DRAGEND = "dragend"; 26 | const DRAGSTART = "dragstart"; 27 | const MOUSEDOWN = "mousedown"; 28 | const MOUSEMOVE = "mousemove"; 29 | const MOUSEOVER = "mouseover"; 30 | const MOUSEOUT = "mouseout"; 31 | const MOUSEUP = "mouseup"; 32 | 33 | export interface MarkerWithLabelOptions extends google.maps.MarkerOptions { 34 | labelContent: string | HTMLElement; 35 | labelAnchor?: google.maps.Point; 36 | labelZIndexOffset?: number; 37 | labelClass?: string; 38 | } 39 | 40 | export class MarkerWithLabel extends MarkerSafe { 41 | private label: Label; 42 | private propertyListeners: google.maps.MapsEventListener[]; 43 | private interactiveListeners: google.maps.MapsEventListener[]; 44 | private isTouchScreen = false; 45 | private isDraggingLabel = false; 46 | private isMouseDownOnLabel = false; 47 | private shouldIgnoreClick = false; 48 | private eventOffset: google.maps.Point | null; 49 | private mouseOutTimeout: ReturnType; 50 | 51 | constructor(options: MarkerWithLabelOptions) { 52 | // need to omit extended options to Marker class that collide with setters/getters 53 | super( 54 | omit(options, [ 55 | "labelAnchor", 56 | "labelZIndexOffset", 57 | "labelClass", 58 | "labelContent", 59 | ]) 60 | ); 61 | this.label = new Label({ ...{}, ...options }); 62 | 63 | this.propertyListeners = [ 64 | google.maps.event.addListener( 65 | this, 66 | "clickable_changed", 67 | this.handleClickableOrDraggableChange 68 | ), 69 | google.maps.event.addListener(this, "cursor_changed", () => { 70 | this.label.cursor = this.getCursor(); 71 | }), 72 | google.maps.event.addListener( 73 | this, 74 | "draggable_changed", 75 | this.handleClickableOrDraggableChange 76 | ), 77 | google.maps.event.addListener(this, "position_changed", () => { 78 | this.label.position = this.getPosition(); 79 | }), 80 | google.maps.event.addListener(this, "opacity_changed", () => { 81 | this.label.opacity = this.getOpacity(); 82 | }), 83 | google.maps.event.addListener(this, "title_changed", () => { 84 | this.label.title = this.getTitle(); 85 | }), 86 | google.maps.event.addListener(this, "visible_changed", () => { 87 | this.label.visible = this.getVisible(); 88 | }), 89 | google.maps.event.addListener(this, "zindex_changed", () => { 90 | this.label.zIndex = this.getZIndex(); 91 | this.label.draw(); 92 | }), 93 | ]; 94 | } 95 | 96 | public get isInteractive(): boolean { 97 | return this.getClickable() || this.getDraggable(); 98 | } 99 | 100 | /** 101 | * Gets label element. 102 | */ 103 | public get labelElement(): HTMLElement { 104 | return this.label.element; 105 | } 106 | 107 | /** 108 | * Gets label `innerHTML`. See {@link Marker.labelElement} for 109 | * accessing the HTMLElement instead. 110 | */ 111 | public get labelContent(): string { 112 | return this.label.content; 113 | } 114 | 115 | public set labelContent(content: string | HTMLElement) { 116 | this.label.content = content; 117 | } 118 | 119 | public get labelClass(): string { 120 | return this.label.className; 121 | } 122 | 123 | public set labelClass(className: string) { 124 | this.label.className = className; 125 | } 126 | 127 | public setMap( 128 | map: google.maps.Map | google.maps.StreetViewPanorama | null 129 | ): void { 130 | super.setMap(map); 131 | setTimeout(() => { 132 | this.label.setMap(map); 133 | this.removeInteractiveListeners(); 134 | if (map) { 135 | this.addInteractiveListeners(); 136 | } 137 | }); 138 | } 139 | 140 | private handleClickableOrDraggableChange() { 141 | this.label.clickable = this.getClickable(); 142 | this.label.draggable = this.getDraggable(); 143 | 144 | if (this.isInteractive) { 145 | this.addInteractiveListeners(); 146 | } else { 147 | this.removeInteractiveListeners(); 148 | } 149 | } 150 | 151 | private removeInteractiveListeners() { 152 | if (this.interactiveListeners) { 153 | this.interactiveListeners.forEach((l) => 154 | google.maps.event.removeListener(l) 155 | ); 156 | this.interactiveListeners = null; 157 | } 158 | } 159 | 160 | private addInteractiveListeners() { 161 | if (!this.interactiveListeners) { 162 | // If the map is not set, do not set listeners 163 | if (!this.getMap()) { 164 | return; 165 | } 166 | 167 | this.interactiveListeners = [ 168 | this.label.addDomListener(MOUSEOVER, (e) => { 169 | if (!this.isTouchScreen) { 170 | google.maps.event.trigger(this, MOUSEOVER, { 171 | latLng: this.getPosition(), 172 | }); 173 | 174 | abortEvent(e); 175 | } 176 | }), 177 | this.label.addDomListener(MOUSEOUT, (e) => { 178 | if (!this.isTouchScreen) { 179 | // wrap the mouseout event in a timeout to avoid the case where mouseup occurs out 180 | if (this.mouseOutTimeout) { 181 | clearTimeout(this.mouseOutTimeout); 182 | } 183 | 184 | if (this.isMouseDownOnLabel) { 185 | this.mouseOutTimeout = setTimeout(() => { 186 | if (this.isMouseDownOnLabel) { 187 | this.isMouseDownOnLabel = false; 188 | google.maps.event.trigger(this, MOUSEUP, { 189 | latLng: this.getPosition(), 190 | }); 191 | 192 | if (this.isDraggingLabel) { 193 | this.isDraggingLabel = false; 194 | this.shouldIgnoreClick = true; 195 | google.maps.event.trigger(this, DRAGEND, { 196 | latLng: this.getPosition(), 197 | }); 198 | } 199 | } 200 | 201 | google.maps.event.trigger(this, MOUSEOUT, { 202 | latLng: this.getPosition(), 203 | }); 204 | }, 200); 205 | } else { 206 | google.maps.event.trigger(this, MOUSEOUT, { 207 | latLng: this.getPosition(), 208 | }); 209 | } 210 | 211 | abortEvent(e); 212 | } 213 | }), 214 | this.label.addDomListener(MOUSEDOWN, (e) => { 215 | this.isDraggingLabel = false; 216 | this.isMouseDownOnLabel = true; 217 | google.maps.event.trigger(this, MOUSEDOWN, { 218 | latLng: this.getPosition(), 219 | }); 220 | if (!this.isTouchScreen) { 221 | abortEvent(e); 222 | } 223 | }), 224 | this.label.addDomListener(MOUSEUP, (e) => { 225 | const markerEvent = { latLng: this.getPosition() }; 226 | 227 | if (this.isMouseDownOnLabel) { 228 | this.isMouseDownOnLabel = false; 229 | 230 | google.maps.event.trigger(this, MOUSEUP, markerEvent); 231 | 232 | if (this.isDraggingLabel) { 233 | this.isDraggingLabel = false; 234 | this.shouldIgnoreClick = true; 235 | google.maps.event.trigger(this, DRAGEND, markerEvent); 236 | } 237 | 238 | if (!this.getDraggable()) { 239 | abortEvent(e); 240 | } 241 | } 242 | }), 243 | this.label.addDomListener(CLICK, (e) => { 244 | if (this.shouldIgnoreClick) { 245 | this.shouldIgnoreClick = false; 246 | } else { 247 | google.maps.event.trigger(this, CLICK, { 248 | latLng: this.getPosition(), 249 | }); 250 | } 251 | abortEvent(e); 252 | }), 253 | this.label.addDomListener(DBLCLICK, (e) => { 254 | google.maps.event.trigger(this, DBLCLICK, { 255 | latLng: this.getPosition(), 256 | }); 257 | abortEvent(e); 258 | }), 259 | google.maps.event.addListener( 260 | this.getMap(), 261 | MOUSEMOVE, 262 | (e: google.maps.MapMouseEvent) => { 263 | if (this.isMouseDownOnLabel && this.getDraggable()) { 264 | if (this.isDraggingLabel) { 265 | // Adjust for offset 266 | const position = new google.maps.LatLng( 267 | e.latLng.lat() - this.eventOffset.y, 268 | e.latLng.lng() - this.eventOffset.x 269 | ); 270 | // this.setPosition(position); 271 | google.maps.event.trigger(this, DRAG, { 272 | ...e, 273 | latLng: position, 274 | }); 275 | } else { 276 | this.isDraggingLabel = true; 277 | 278 | // Calculate and store event offset from marker position 279 | this.eventOffset = new google.maps.Point( 280 | e.latLng.lng() - this.getPosition().lng(), 281 | e.latLng.lat() - this.getPosition().lat() 282 | ); 283 | google.maps.event.trigger(this, DRAGSTART, { 284 | ...e, 285 | latLng: this.getPosition(), 286 | }); 287 | } 288 | } 289 | } 290 | ), 291 | google.maps.event.addListener(this, DRAGSTART, () => { 292 | this.label.zIndex = 1000000; 293 | }), 294 | google.maps.event.addListener( 295 | this, 296 | DRAG, 297 | ({ latLng }: google.maps.MapMouseEvent) => { 298 | this.setPosition(latLng); 299 | } 300 | ), 301 | google.maps.event.addListener(this, DRAGEND, () => { 302 | this.label.zIndex = this.getZIndex(); 303 | this.label.draw(); 304 | }), 305 | // Prevent touch events from passing through the label DIV to the underlying map. 306 | this.label.addDomListener("touchstart", (e) => { 307 | this.isTouchScreen = true; 308 | stopPropagation(e); 309 | }), 310 | this.label.addDomListener("touchmove", (e) => { 311 | stopPropagation(e); 312 | }), 313 | this.label.addDomListener("touchend", (e) => { 314 | stopPropagation(e); 315 | }), 316 | ]; 317 | } 318 | } 319 | } 320 | -------------------------------------------------------------------------------- /src/overlay-view-safe.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { extend } from "./util"; 18 | 19 | // eslint-disable-next-line @typescript-eslint/no-empty-interface 20 | export interface OverlayViewSafe extends google.maps.OverlayView {} 21 | 22 | /** 23 | * @ignore 24 | */ 25 | export class OverlayViewSafe { 26 | constructor() { 27 | extend(OverlayViewSafe, google.maps.OverlayView); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/util.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** 18 | * Extends an object's prototype by another's. 19 | * 20 | * @param type1 The Type to be extended. 21 | * @param type2 The Type to extend with. 22 | * @ignore 23 | */ 24 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 25 | export function extend(type1: any, type2: any): void { 26 | // eslint-disable-next-line prefer-const 27 | for (let property in type2.prototype) { 28 | type1.prototype[property] = type2.prototype[property]; 29 | } 30 | } 31 | 32 | export function abortEvent(e: Event | null) { 33 | e = e || window.event; 34 | if (e.stopPropagation) { 35 | e.stopPropagation(); 36 | } else { 37 | e.cancelBubble = true; 38 | } 39 | if (e.preventDefault) { 40 | e.preventDefault(); 41 | } else { 42 | e.returnValue = false; 43 | } 44 | } 45 | 46 | export function stopPropagation(e: Event | null) { 47 | e = e || window.event; 48 | if (e.stopPropagation) { 49 | e.stopPropagation(); 50 | } else { 51 | e.cancelBubble = true; 52 | } 53 | } 54 | 55 | export function omit( 56 | o: { [key: string]: any }, 57 | keys: string[] 58 | ): { [key: string]: any } { 59 | const x = { ...o }; 60 | 61 | keys.forEach((k) => delete x[k]); 62 | return x; 63 | } 64 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "./dist", 5 | "noImplicitAny": true, 6 | "outDir": "./dist", 7 | "sourceMap": true, 8 | "esModuleInterop": true, 9 | "lib": ["DOM", "ESNext"], 10 | "target": "ES6", 11 | "moduleResolution": "node", 12 | "skipLibCheck": true 13 | }, 14 | "include": ["src/**/*"], 15 | "exclude": ["node_modules", "./dist"] 16 | } 17 | -------------------------------------------------------------------------------- /typedoc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | out: "docs", 19 | exclude: ["**/node_modules/**", "**/*.spec.ts", "**/*.test.ts"], 20 | name: "@googlemaps/markerwithlabels", 21 | excludePrivate: true, 22 | }; 23 | --------------------------------------------------------------------------------