fix: get playground to work again (#2)

- fix package name in example code and ts-config - update 'get started' instructions - fix export name for UMD builds Co-authored-by: Alex Muramoto <[email protected]>
googlemaps · Aug 17, 2023 · 25ffa0d · 25ffa0d
1 parent 7ae422d
commit 25ffa0d
Show file tree

Hide file tree

Showing 20 changed files with 36 additions and 35 deletions.
diff --git a/examples/playground/README.md b/examples/playground/README.md
@@ -5,23 +5,23 @@ the marker API.
 
 ## Get Started
 
-1. Install dependencies:
+1. Change into the playground-folder and install dependencies:
 
-       npm install
+        cd examples/playground
+        npm install
 
-2. create the `.env` file. The API Key to use
-   [can be found here][gcloud_console_maps_credentials].
+2. [Create an API-key][gmp_create_apikey] for the Google Maps API.
+3. create a file `.env` with the API key in the following format:
 
        GOOGLE_MAPS_API_KEY="<INSERT API KEY HERE>"
-       PRODUCTION_BASEURL="/marker-api-playground/"
 
-3. start the 'playground' environment:
+4. start the development server:
 
        npm start
 
-4. open http://localhost:5173 in your browser
+5. open http://localhost:5173 in your browser
 
-[gcloud_console_maps_credentials]: https://console.cloud.google.com/apis/credentials/key/cace4819-4b19-489c-bd49-d91300d72dab?project=ubilabs-dev
+[gmp_create_apikey]: https://developers.google.com/maps/documentation/embed/get-api-key#create-api-keys
 
 ## Overview
 

diff --git a/examples/playground/src/code-samples/00.default.ts b/examples/playground/src/code-samples/00.default.ts
@@ -24,8 +24,8 @@
 // <Cmd> + <S>        save the code to the URL
 //
 
-import {Marker} from '@googlemaps/marker';
-import {MaterialIcons} from '@googlemaps/marker/icons';
+import {Marker} from '@googlemaps/adv-markers-utils';
+import {MaterialIcons} from '@googlemaps/adv-markers-utils/icons';
 
 export default (map: google.maps.Map) => {
   Marker.registerIconProvider(MaterialIcons());

diff --git a/examples/playground/src/code-samples/01.simple-marker.ts b/examples/playground/src/code-samples/01.simple-marker.ts
@@ -15,7 +15,7 @@
  */
 
 // title: create marker and add it to the map
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   const m1 = new Marker();

diff --git a/examples/playground/src/code-samples/02.update-position.ts b/examples/playground/src/code-samples/02.update-position.ts
@@ -15,7 +15,7 @@
  */
 
 // title: specifying and updating position
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   // position can be speecified in a number of different formats:

diff --git a/examples/playground/src/code-samples/03.pin-styling.ts b/examples/playground/src/code-samples/03.pin-styling.ts
@@ -15,7 +15,8 @@
  */
 
 // title: simple marker customizations: color
-import {Marker} from '@googlemaps/marker';
+
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   const m1 = new Marker({map, position: {lat: 50, lng: 10}});

diff --git a/examples/playground/src/code-samples/04.pin-icons.ts b/examples/playground/src/code-samples/04.pin-icons.ts
@@ -15,8 +15,8 @@
  */
 
 // title: simple marker customizations: icons
-import {Marker} from '@googlemaps/marker';
-import {MaterialIcons, MaterialIconsStyle} from '@googlemaps/marker/icons';
+import {Marker} from '@googlemaps/adv-markers-utils';
+import {MaterialIcons, MaterialIconsStyle} from '@googlemaps/adv-markers-utils/icons';
 
 export default (map: google.maps.Map) => {
   // first we need to register the icon-provider, which is a function that knows how to create the kind of dom-element needed for an icon-set

diff --git a/examples/playground/src/code-samples/04b.places-icons.ts b/examples/playground/src/code-samples/04b.places-icons.ts
@@ -16,8 +16,8 @@
 
 // title: simple marker customizations: Google Maps Places API icons
 
-import {Marker} from '@googlemaps/marker';
-import {PlaceIcons} from '@googlemaps/marker/icons';
+import {Marker} from '@googlemaps/adv-markers-utils';
+import {PlaceIcons} from '@googlemaps/adv-markers-utils/icons';
 
 export default (map: google.maps.Map) => {
   Marker.registerIconProvider(PlaceIcons());

diff --git a/examples/playground/src/code-samples/05.hover-styling.ts b/examples/playground/src/code-samples/05.hover-styling.ts
@@ -15,7 +15,7 @@
  */
 
 // title: marker interactivity: hover
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   const position = {lat: 53.5, lng: 10};

diff --git a/examples/playground/src/code-samples/06.click-events.ts b/examples/playground/src/code-samples/06.click-events.ts
@@ -15,7 +15,7 @@
  */
 
 // title: marker interactivity: click events
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   const marker = new Marker({

diff --git a/examples/playground/src/code-samples/07.mulitple-marker-single-select.ts b/examples/playground/src/code-samples/07.mulitple-marker-single-select.ts
@@ -15,7 +15,7 @@
  */
 
 // title: multiple markers / single selection (w/ user-data)
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 function rnd(min: number, max: number) {
   return min + Math.random() * (max - min);

diff --git a/examples/playground/src/code-samples/07b.mulitple-marker-single-select.ts b/examples/playground/src/code-samples/07b.mulitple-marker-single-select.ts
@@ -15,7 +15,7 @@
  */
 
 // title: multiple markers / single selection (alternative w/ 'style objects')
-import {Attributes, Marker} from '@googlemaps/marker';
+import {Attributes, Marker} from '@googlemaps/adv-markers-utils';
 
 function rnd(min: number, max: number) {
   return min + Math.random() * (max - min);

diff --git a/examples/playground/src/code-samples/08.attribute-dependencies.ts b/examples/playground/src/code-samples/08.attribute-dependencies.ts
@@ -16,7 +16,7 @@
 
 // title: dynamic attributes depending on each other
 
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 // dynamic attributes can be written to reliably depend on the current value
 // of another attribute, for example to make colors depend on the icon shown

diff --git a/examples/playground/src/code-samples/09.draggable-manual.ts b/examples/playground/src/code-samples/09.draggable-manual.ts
@@ -15,8 +15,8 @@
  */
 
 // title: draggable markers / update position after drag
-import {Marker} from '@googlemaps/marker';
-import {MaterialIcons} from '@googlemaps/marker/icons';
+import {Marker} from '@googlemaps/adv-markers-utils';
+import {MaterialIcons} from '@googlemaps/adv-markers-utils/icons';
 
 export default (map: google.maps.Map) => {
   Marker.registerIconProvider(MaterialIcons());

diff --git a/examples/playground/src/code-samples/10.marker-collection.ts b/examples/playground/src/code-samples/10.marker-collection.ts
@@ -16,8 +16,8 @@
 
 // title: basic marker collection
 
-import {CollisionBehavior, Marker, MarkerCollection} from '@googlemaps/marker';
-import {MaterialIcons} from '@googlemaps/marker/icons';
+import {CollisionBehavior, Marker, MarkerCollection} from '@googlemaps/adv-markers-utils';
+import {MaterialIcons} from '@googlemaps/adv-markers-utils/icons';
 
 type MyData = {
   id: number;

diff --git a/examples/playground/src/code-samples/11.marker-collection-update.ts b/examples/playground/src/code-samples/11.marker-collection-update.ts
@@ -18,7 +18,7 @@
 
 /* eslint-disable @typescript-eslint/no-misused-promises */
 
-import {MarkerCollection} from '@googlemaps/marker';
+import {MarkerCollection} from '@googlemaps/adv-markers-utils';
 
 type MyData = {
   id: number;

diff --git a/examples/playground/src/code-samples/12.place-details.ts b/examples/playground/src/code-samples/12.place-details.ts
@@ -15,7 +15,7 @@
  */
 
 // title: simple marker for google places API PlaceResult
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   const marker = new Marker<google.maps.places.PlaceResult>({

diff --git a/examples/playground/src/code-samples/12b.place-details.ts b/examples/playground/src/code-samples/12b.place-details.ts
@@ -16,7 +16,7 @@
 
 // title: PlaceResult using the PlaceMarker class
 
-import {PlaceMarker} from '@googlemaps/marker/places';
+import {PlaceMarker} from '@googlemaps/adv-markers-utils/places';
 
 export default (map: google.maps.Map) => {
   const markers = res.map(

diff --git a/examples/playground/src/code-samples/13.html-marker.ts b/examples/playground/src/code-samples/13.html-marker.ts
@@ -16,7 +16,7 @@
 
 // title: dynamic html marker
 
-import {Marker} from '@googlemaps/marker';
+import {Marker} from '@googlemaps/adv-markers-utils';
 
 export default (map: google.maps.Map) => {
   // create a stylesheet to be used by the marker

diff --git a/examples/playground/tsconfig.json b/examples/playground/tsconfig.json
@@ -18,9 +18,9 @@
 
     "baseUrl": "./",
     "paths": {
-      "@googlemaps/marker": ["../../src/index.ts"],
-      "@googlemaps/marker/*": ["../../src/*"]
+      "@googlemaps/adv-markers-utils": ["../../src/index.ts"],
+      "@googlemaps/adv-markers-utils/*": ["../../src/*"]
     },
-    "typeRoots": ["./types", "./node_modules/@types"],
+    "typeRoots": ["./types", "./node_modules/@types"]
   }
 }
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
       "browser": "./dist/places.module.js"
     }
   },
-  "amdName": "google.maps.plugins.adv-markers-utils",
+  "amdName": "google.maps.plugins.advMarkersUtils",
   "files": [
     "/src",
     "/dist"
@@ -53,7 +53,7 @@
     "test:prettier": "prettier -c ./src",
     "test:eslint": "eslint './src/**/*ts' './examples/playground/src/*.ts'",
     "test:jest": "jest",
-    "build": "microbundle src/index.ts src/icons.ts src/places.ts --external @googlemaps/adv-markers-utils --globals @googlemaps/adv-markers-utils=google.maps.plugins.adv-markers-utils",
+    "build": "microbundle src/index.ts src/icons.ts src/places.ts --external @googlemaps/adv-markers-utils --globals @googlemaps/adv-markers-utils=google.maps.plugins.advMarkersUtils",
     "build:docs": "typedoc",
     "watch": "microbundle watch src/index.ts src/icons.ts src/places.ts",
     "watch:docs": "typedoc --watch",