rc: set height on google map via id (#2300)

viamrobotics · Apr 28, 2023 · 521f415 · 521f415
1 parent dbf6abf
commit 521f415
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
diff --git a/web/frontend/package.json b/web/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/remote-control",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

diff --git a/web/frontend/src/components/navigation.vue b/web/frontend/src/components/navigation.vue
@@ -266,7 +266,7 @@ const loadMaps = () => {
   const key = googleApiKey.value;
   const script = document.createElement('script');
   script.id = 'google-maps';
-  script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&callback=googleMapsInit&libraries=&v=weekly`;
+  script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&callback=googleMapsInit&libraries=&v=weekly&map_ids=google-maps-1`;
   script.async = true;
   document.head.append(script);
 };
@@ -340,12 +340,10 @@ onUnmounted(() => {
           />
         </div>
 
-        <!-- hard setting height here since this is ignoring the tailwind class -->
         <div
-          id="map"
+          id="google-maps-1"
           ref="container"
           class="mb-2 h-[400px] w-full"
-          style="height: 400px;"
         />
 
         <v-input

diff --git a/web/frontend/src/index.css b/web/frontend/src/index.css
@@ -177,3 +177,8 @@ body, table {
 .v-toast__item.v-toast__item--warning .v-toast__icon {
   background: url("data:image/svg+xml,%3csvg viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill='%23fff' d='M49.466 41.26L29.216 6.85c-.69-1.16-1.89-1.85-3.22-1.85-1.32 0-2.53.69-3.21 1.85L2.536 41.26c-.71 1.2-.72 2.64-.03 3.85.68 1.18 1.89 1.89 3.24 1.89h40.51c1.35 0 2.56-.71 3.23-1.89.7-1.21.69-2.65-.02-3.85zm-25.53-21.405h3.381v3.187l-.724 8.92H24.66l-.725-8.92v-3.187zm2.97 17.344a1.712 1.712 0 01-1.267.543c-.491 0-.914-.181-1.268-.543a1.788 1.788 0 01-.531-1.297c0-.502.176-.935.53-1.297a1.712 1.712 0 011.269-.544c.49 0 .914.181 1.268.544s.53.795.53 1.297c0 .503-.176.934-.53 1.297z'/%3e %3c/svg%3e") no-repeat
 }
+
+
+#google-maps-1 {
+  height: 400px;
+}