From 5f3486d68dd6a6c2b13acf7127188220a4012290 Mon Sep 17 00:00:00 2001
From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>
Date: Tue, 6 Jul 2021 19:50:08 -0700
Subject: fix link to map; ownerdocument error

---
 deploy/index.html                                  |   1 +
 package-lock.json                                  | 321 +++++++++++++++++++++
 package.json                                       |   1 +
 .../collections/MapView/CollectionMapView.tsx      | 206 +++++++------
 4 files changed, 422 insertions(+), 107 deletions(-)

diff --git a/deploy/index.html b/deploy/index.html
index dda0c6457..33cc0906a 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg&libraries=places"></script>
 
     <script>
         function getCookie(cname) {
diff --git a/package-lock.json b/package-lock.json
index 9f82ee33f..2b1dba232 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1109,6 +1109,12 @@
             "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.8.tgz",
             "integrity": "sha512-z03u79t1v8QIktoUXypWD06Fzl499/hA162hurA+eCDlWXxFynuU+hMZIaferILF5Gzr4PMX1ShHszT666sUHQ=="
         },
+        "@types/html-minifier-terser": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+            "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
+            "dev": true
+        },
         "@types/jquery": {
             "version": "3.5.0",
             "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.0.tgz",
@@ -3334,6 +3340,24 @@
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
         },
+        "camel-case": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+            "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+            "dev": true,
+            "requires": {
+                "pascal-case": "^3.1.2",
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+                    "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+                    "dev": true
+                }
+            }
+        },
         "camelcase": {
             "version": "5.3.1",
             "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -5739,6 +5763,15 @@
             "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
             "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
         },
+        "dom-converter": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+            "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+            "dev": true,
+            "requires": {
+                "utila": "~0.4"
+            }
+        },
         "dom-helpers": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
@@ -5805,6 +5838,24 @@
                 "domelementtype": "1"
             }
         },
+        "dot-case": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+            "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+            "dev": true,
+            "requires": {
+                "no-case": "^3.0.4",
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+                    "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+                    "dev": true
+                }
+            }
+        },
         "dot-prop": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
@@ -7768,6 +7819,29 @@
             "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
             "dev": true
         },
+        "html-minifier-terser": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+            "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
+            "dev": true,
+            "requires": {
+                "camel-case": "^4.1.1",
+                "clean-css": "^4.2.3",
+                "commander": "^4.1.1",
+                "he": "^1.2.0",
+                "param-case": "^3.0.3",
+                "relateurl": "^0.2.7",
+                "terser": "^4.6.3"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+                    "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+                    "dev": true
+                }
+            }
+        },
         "html-to-image": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-0.1.1.tgz",
@@ -7784,6 +7858,33 @@
                 "minimist": "^1.2.0"
             }
         },
+        "html-webpack-plugin": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.3.2.tgz",
+            "integrity": "sha512-HvB33boVNCz2lTyBsSiMffsJ+m0YLIQ+pskblXgN9fnjS1BgEcuAfdInfXfGrkdXV406k9FiDi86eVCDBgJOyQ==",
+            "dev": true,
+            "requires": {
+                "@types/html-minifier-terser": "^5.0.0",
+                "html-minifier-terser": "^5.0.1",
+                "lodash": "^4.17.21",
+                "pretty-error": "^3.0.4",
+                "tapable": "^2.0.0"
+            },
+            "dependencies": {
+                "lodash": {
+                    "version": "4.17.21",
+                    "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+                    "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+                    "dev": true
+                },
+                "tapable": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
+                    "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
+                    "dev": true
+                }
+            }
+        },
         "htmlparser2": {
             "version": "3.10.1",
             "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -9314,6 +9415,23 @@
                 "signal-exit": "^3.0.0"
             }
         },
+        "lower-case": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+            "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+            "dev": true,
+            "requires": {
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+                    "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+                    "dev": true
+                }
+            }
+        },
         "lowercase-keys": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
@@ -10136,6 +10254,24 @@
             "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
             "dev": true
         },
+        "no-case": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+            "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+            "dev": true,
+            "requires": {
+                "lower-case": "^2.0.2",
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+                    "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+                    "dev": true
+                }
+            }
+        },
         "node-abi": {
             "version": "2.16.0",
             "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.16.0.tgz",
@@ -13937,6 +14073,24 @@
                 }
             }
         },
+        "param-case": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+            "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+            "dev": true,
+            "requires": {
+                "dot-case": "^3.0.4",
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+                    "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+                    "dev": true
+                }
+            }
+        },
         "parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -14004,6 +14158,24 @@
             "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
             "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
         },
+        "pascal-case": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+            "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+            "dev": true,
+            "requires": {
+                "no-case": "^3.0.4",
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+                    "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+                    "dev": true
+                }
+            }
+        },
         "pascalcase": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -14432,6 +14604,24 @@
             "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
             "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
         },
+        "pretty-error": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-3.0.4.tgz",
+            "integrity": "sha512-ytLFLfv1So4AO1UkoBF6GXQgJRaKbiSiGFICaOPNwQ3CMvBvXpLRubeQWyPGnsbV/t9ml9qto6IeCsho0aEvwQ==",
+            "dev": true,
+            "requires": {
+                "lodash": "^4.17.20",
+                "renderkid": "^2.0.6"
+            },
+            "dependencies": {
+                "lodash": {
+                    "version": "4.17.21",
+                    "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+                    "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+                    "dev": true
+                }
+            }
+        },
         "probe-image-size": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-4.1.1.tgz",
@@ -15629,11 +15819,136 @@
                 "rc": "^1.0.1"
             }
         },
+        "relateurl": {
+            "version": "0.2.7",
+            "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+            "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+            "dev": true
+        },
         "remove-trailing-separator": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
             "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
         },
+        "renderkid": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
+            "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
+            "dev": true,
+            "requires": {
+                "css-select": "^4.1.3",
+                "dom-converter": "^0.2.0",
+                "htmlparser2": "^6.1.0",
+                "lodash": "^4.17.21",
+                "strip-ansi": "^3.0.1"
+            },
+            "dependencies": {
+                "ansi-regex": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+                    "dev": true
+                },
+                "css-select": {
+                    "version": "4.1.3",
+                    "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+                    "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+                    "dev": true,
+                    "requires": {
+                        "boolbase": "^1.0.0",
+                        "css-what": "^5.0.0",
+                        "domhandler": "^4.2.0",
+                        "domutils": "^2.6.0",
+                        "nth-check": "^2.0.0"
+                    }
+                },
+                "css-what": {
+                    "version": "5.0.1",
+                    "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+                    "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+                    "dev": true
+                },
+                "dom-serializer": {
+                    "version": "1.3.2",
+                    "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+                    "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+                    "dev": true,
+                    "requires": {
+                        "domelementtype": "^2.0.1",
+                        "domhandler": "^4.2.0",
+                        "entities": "^2.0.0"
+                    }
+                },
+                "domelementtype": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+                    "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+                    "dev": true
+                },
+                "domhandler": {
+                    "version": "4.2.0",
+                    "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+                    "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+                    "dev": true,
+                    "requires": {
+                        "domelementtype": "^2.2.0"
+                    }
+                },
+                "domutils": {
+                    "version": "2.7.0",
+                    "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+                    "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+                    "dev": true,
+                    "requires": {
+                        "dom-serializer": "^1.0.1",
+                        "domelementtype": "^2.2.0",
+                        "domhandler": "^4.2.0"
+                    }
+                },
+                "entities": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+                    "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+                    "dev": true
+                },
+                "htmlparser2": {
+                    "version": "6.1.0",
+                    "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+                    "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+                    "dev": true,
+                    "requires": {
+                        "domelementtype": "^2.0.1",
+                        "domhandler": "^4.0.0",
+                        "domutils": "^2.5.2",
+                        "entities": "^2.0.0"
+                    }
+                },
+                "lodash": {
+                    "version": "4.17.21",
+                    "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+                    "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+                    "dev": true
+                },
+                "nth-check": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+                    "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+                    "dev": true,
+                    "requires": {
+                        "boolbase": "^1.0.0"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+                    "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+                    "dev": true,
+                    "requires": {
+                        "ansi-regex": "^2.0.0"
+                    }
+                }
+            }
+        },
         "repeat-element": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
@@ -18501,6 +18816,12 @@
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
             "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
         },
+        "utila": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+            "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
+            "dev": true
+        },
         "utility-types": {
             "version": "3.10.0",
             "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
diff --git a/package.json b/package.json
index 666ebc946..42f2af28f 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
         "dotenv": "^8.6.0",
         "file-loader": "^3.0.1",
         "fork-ts-checker-webpack-plugin": "^1.6.0",
+        "html-webpack-plugin": "^5.3.2",
         "jsdom": "^15.2.1",
         "mocha": "^5.2.0",
         "sass-loader": "^7.3.1",
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index 42059b61c..4243b89a5 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -1,4 +1,4 @@
-import { GoogleMap, Marker, InfoWindow, InfoBox, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api';
+import { GoogleMap, Marker, InfoWindow, InfoBox, useJsApiLoader, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api';
 import { observable, action, computed, Lambda, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../../fields/Doc";
@@ -35,6 +35,7 @@ const defaultCenter = {
 @observer
 export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) {
 
+    @observable private _map = null as any
     @observable private mapRef = null as any;
     @observable private selectedPlace: LocationData = { id: undefined, pos: undefined };
     @observable private markerMap = {};
@@ -42,6 +43,10 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
     @observable private zoom = 2.5;
     @observable private clickedLatLng = null;
     @observable private infoWindowOpen = false;
+    @observable private bounds = new window.google.maps.LatLngBounds();
+    @observable private inputRef = React.createRef<HTMLInputElement>();
+    @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+    @observable private searchMarkers: google.maps.Marker[] = [];
 
     @observable private myPlaces = [
         { id: 1, pos: { lat: 39.09366509575983, lng: -94.58751660204751 } },
@@ -50,15 +55,19 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
         { id: 4, pos: { lat: 36.7783, lng: 119.4179 } }
     ];
 
+    @action
+    private setSearchBox = (searchBox: any) => {
+        this.searchBox = searchBox;
+    }
+
     // iterate myPlaces to size, center, and zoom map to contain all markers
     private fitBounds = (map: any) => {
-        const bounds = new window.google.maps.LatLngBounds();
-        console.log('map bound is:' + bounds);
+        console.log('map bound is:' + this.bounds);
         this.myPlaces.map(place => {
-            bounds.extend(place.pos);
+            this.bounds.extend(place.pos);
             return place.id;
         });
-        map.fitBounds(bounds)
+        map.fitBounds(this.bounds)
     }
 
     // store a reference to google map instance; fit map bounds to contain all markers
@@ -125,31 +134,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
         }
     }
 
-    /**
-     * func that handles user's search location and zoom/pan on the input location
-     */
-    private searchLocation = () => {
-
-    }
-
-    /**
-     * func that adds marker to google maps
-     */
-    @undoBatch
-    private addMarker = () => {
-
-    }
-
-    /**
-     * func that updates suggested results (and auto-complete) during user input
-     */
-    private handleChange = () => {
-
-    }
-
     // private mapRef = document.getElementById("map")
     // private markers: google.maps.Marker[] = [];
-    @observable private inputRef = React.createRef<HTMLInputElement>();
+
 
     // @action
     // private setInputRef = (element: HTMLInputElement) => {
@@ -159,8 +146,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
     //     }
     // }
 
-    @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+    // @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
 
+    @action
     private handlePlacesChanged = () => {
         console.log(this.searchBox);
         const places = this.searchBox.getPlaces();
@@ -169,49 +157,51 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
 
         if (places.length == 0) { return; }
 
-        // // clear out old markers
-        // this.markers.forEach((marker) => {
-        //     marker.setMap(null);
-        // });
-        // this.markers = []
+        // clear out old markers
+        this.searchMarkers.forEach((marker) => {
+            marker.setMap(null);
+        });
+        this.searchMarkers = []
 
-        // // for each place, get icon, name, location
-        const bounds = new window.google.maps.LatLngBounds();
+        // for each place, get icon, name, location
         places.forEach((place) => {
             if (!place.geometry || !place.geometry.location) {
                 console.log("Returned place contains no geometry");
                 return;
             }
 
-            // const icon = {
-            //     url: place.icon as string,
-            //     size: new google.maps.Size(71, 71),
-            //     origin: new google.maps.Point(0, 0),
-            //     anchor: new google.maps.Point(17, 34),
-            //     scaledSize: new google.maps.Size(25, 25),
-            // }
-
-            // //create a marker for each place
-            // this.markers.push(
-            //     new google.maps.Marker({
-            //         mapRef, 
-            //         title: place.name,
-            //         position: place.geometry.location,
-            //     })
-            // );
+            const icon = {
+                url: place.icon as string,
+                size: new google.maps.Size(71, 71),
+                origin: new google.maps.Point(0, 0),
+                anchor: new google.maps.Point(17, 34),
+                scaledSize: new google.maps.Size(25, 25),
+            }
+
+            //create a marker for each place
+            this.searchMarkers.push(
+                new google.maps.Marker({
+                    map: this._map,
+                    icon: icon,
+                    title: place.name,
+                    position: place.geometry.location,
+                })
+            );
 
             if (place.geometry.viewport) {
                 // only geocodes have viewport
-                bounds.union(place.geometry.viewport);
+                this.bounds.union(place.geometry.viewport);
             }
             else {
-                bounds.extend(place.geometry.location);
+                this.bounds.extend(place.geometry.location);
             }
         });
+
+        console.log(this.searchMarkers);
     }
 
     private onBoundsChanged = () => {
-        this.searchBox.setBounds(this.mapRef.getBounds())
+        this.searchBox.setBounds(this.bounds);
     }
 
     private onCenterChanged = () => {
@@ -250,62 +240,64 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
                 style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
                 onWheel={e => e.stopPropagation()}
                 onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
-                <LoadScript
+                {/* <LoadScript
                     googleMapsApiKey={process.env.GOOGLE_MAPS!}
                     libraries={['places', 'drawing']}
-                >
-                    <div className="map-wrapper">
-                        <GoogleMap
-                            mapContainerStyle={mapContainerStyle}
-                            zoom={this.zoom}
-                            center={this.center}
-                            onLoad={map => this.loadHandler(map)}
-                            onBoundsChanged={this.onBoundsChanged}
-                            onCenterChanged={this.onCenterChanged}
-                        >
-                            <StandaloneSearchBox
-                                onPlacesChanged={this.handlePlacesChanged}>
-                                <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
-                            </StandaloneSearchBox>
-
-                            {this.myPlaces.map(place => (
-                                <Marker
-                                    key={place.id}
-                                    position={place.pos}
-                                    // onLoad={marker => this.markerLoadHandler(marker, place)}
-                                    onClick={e => this.markerClickHandler(e, place)}
-                                    draggable={true}
-                                    onDragEnd={marker => this.handleDragMarker(marker, place)}
-                                />
-                            ))}
-                            {this.infoWindowOpen && this.selectedPlace && (
-                                <InfoWindow
-                                    // anchor={this.markerMap[this.selectedPlace.id]}
-                                    onCloseClick={this.handleInfoWindowClose}
-                                    position={this.selectedPlace.pos}
-                                // options={{ enableEventPropagation: true }}
-                                >
-                                    <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
-                                        <div style={{ fontSize: 16 }}>
-                                            <div>
-                                                <a>a link to another node</a>
-                                            </div>
-                                            <div>
-                                                <a>a link to another node</a>
-                                            </div>
-                                            <div>
-                                                <a>a link to another node</a>
-                                            </div>
-                                            <div>
-                                                <button>New +</button>
-                                            </div>
+                > */}
+                <div className="map-wrapper">
+                    <GoogleMap
+                        ref={(map) => this._map = map}
+                        mapContainerStyle={mapContainerStyle}
+                        zoom={this.zoom}
+                        center={this.center}
+                        onLoad={map => this.loadHandler(map)}
+                        onBoundsChanged={this.onBoundsChanged}
+                        onCenterChanged={this.onCenterChanged}
+                    >
+                        <StandaloneSearchBox
+                            onLoad={this.setSearchBox}
+                            onPlacesChanged={this.handlePlacesChanged}>
+                            <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
+                        </StandaloneSearchBox>
+
+                        {this.myPlaces.map(place => (
+                            <Marker
+                                key={place.id}
+                                position={place.pos}
+                                // onLoad={marker => this.markerLoadHandler(marker, place)}
+                                onClick={e => this.markerClickHandler(e, place)}
+                                draggable={true}
+                                onDragEnd={marker => this.handleDragMarker(marker, place)}
+                            />
+                        ))}
+                        {this.infoWindowOpen && this.selectedPlace && (
+                            <InfoWindow
+                                // anchor={this.markerMap[this.selectedPlace.id]}
+                                onCloseClick={this.handleInfoWindowClose}
+                                position={this.selectedPlace.pos}
+                            // options={{ enableEventPropagation: true }}
+                            >
+                                <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
+                                    <div style={{ fontSize: 16 }}>
+                                        <div>
+                                            <a>a link to another node</a>
+                                        </div>
+                                        <div>
+                                            <a>a link to another node</a>
+                                        </div>
+                                        <div>
+                                            <a>a link to another node</a>
+                                        </div>
+                                        <div>
+                                            <button>New +</button>
                                         </div>
                                     </div>
-                                </InfoWindow>
-                            )}
-                        </GoogleMap>
-                    </div>
-                </LoadScript >
+                                </div>
+                            </InfoWindow>
+                        )}
+                    </GoogleMap>
+                </div>
+                {/* </LoadScript > */}
             </div >
         </div >;
     }
-- 
cgit v1.2.3-70-g09d2