# Google Maps **URL:** https://community.elfsight.com/c/css-codes/google-maps/196.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Add scroll bar to the location description (for long descriptions)](https://community.elfsight.com/t/add-scroll-bar-to-the-location-description-for-long-descriptions/139984)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:34pm UTC](https://community.elfsight.com/t/add-scroll-bar-to-the-location-description-for-long-descriptions/139984 "2025-09-24T18:34:44Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .global-styles, :root { --max-lines: 4; } .eapps-google-maps-marker-description { line-height: 15.6px; max-height: calc… --- ## [Make background of the location panel transparent](https://community.elfsight.com/t/make-background-of-the-location-panel-transparent/139983)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:32pm UTC](https://community.elfsight.com/t/make-background-of-the-location-panel-transparent/139983 "2025-09-24T18:32:50Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .global-styles, .eapps-google-maps:not(.eapps-google-maps-small) .eapps-google-maps-map-container { width: 100%; pos… --- ## [Show location panel after opening the location popup](https://community.elfsight.com/t/show-location-panel-after-opening-the-location-popup/139982)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:31pm UTC](https://community.elfsight.com/t/show-location-panel-after-opening-the-location-popup/139982 "2025-09-24T18:31:28Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: @media (min-width: 480px) { .eapps-google-maps-bar-container { left: 0 !important; } .eapps-google-maps-map-container {… --- ## [Hide "google", "keyboard shortcuts", "map data 2024", "terms", and "report a map error" on the map](https://community.elfsight.com/t/hide-google-keyboard-shortcuts-map-data-2024-terms-and-report-a-map-error-on-the-map/139981)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:29pm UTC](https://community.elfsight.com/t/hide-google-keyboard-shortcuts-map-data-2024-terms-and-report-a-map-error-on-the-map/139981 "2025-09-24T18:29:34Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .gmnoprint:not(\[data-control-width\]), .gmnoprint ~ div, a\[aria-label="Open this area in Google Maps (opens a new window)… --- ## [Change color of title and description in popup](https://community.elfsight.com/t/change-color-of-title-and-description-in-popup/139980)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:27pm UTC](https://community.elfsight.com/t/change-color-of-title-and-description-in-popup/139980 "2025-09-24T18:27:44Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-title { color: #000000 !important; } .eapps-google-maps-marker-directions-label { color: #000… --- ## [Move zoom in/out icons higher](https://community.elfsight.com/t/move-zoom-in-out-icons-higher/139979)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:25pm UTC](https://community.elfsight.com/t/move-zoom-in-out-icons-higher/139979 "2025-09-24T18:25:04Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .gm-bundled-control-on-bottom { bottom: unset; top: 100px; } --- ## [Change size of the widget on mobile](https://community.elfsight.com/t/change-size-of-the-widget-on-mobile/139978)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 24, 2025, 6:23pm UTC](https://community.elfsight.com/t/change-size-of-the-widget-on-mobile/139978 "2025-09-24T18:23:59Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: @media (max-width: 500px) { .eapps-google-maps { height: 500px; max-width: 80%; } } --- ## [Change location color in popup](https://community.elfsight.com/t/change-location-color-in-popup/62657)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 23, 2024, 6:59pm UTC](https://community.elfsight.com/t/change-location-color-in-popup/62657 "2024-07-23T18:59:02Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-title-wrapper{ background-color: #ffde05 !important; } .eapps-google-maps-marker-directions-ic… --- ## [Change background color of location name and Directions icon in popup](https://community.elfsight.com/t/change-background-color-of-location-name-and-directions-icon-in-popup/90012)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:55pm UTC](https://community.elfsight.com/t/change-background-color-of-location-name-and-directions-icon-in-popup/90012 "2024-12-17T17:55:59Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-title-wrapper{ background-color: #ffde05 !important; } .eapps-google-maps-marker-directions-ic… --- ## [Manually translate "Filters" into another language](https://community.elfsight.com/t/manually-translate-filters-into-another-language/90010)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:53pm UTC](https://community.elfsight.com/t/manually-translate-filters-into-another-language/90010 "2024-12-17T17:53:29Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-bar-button-filter { font-size: 0px; } .eapps-google-maps-bar-button-filter:before { content: 'филтри… --- ## [Change font size in location popup](https://community.elfsight.com/t/change-font-size-in-location-popup/90009)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:52pm UTC](https://community.elfsight.com/t/change-font-size-in-location-popup/90009 "2024-12-17T17:52:01Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-title { font-size: 20px; } .eapps-google-maps-marker-content { font-size: 16px; } .eapps-googl… --- ## [Change address color in the location panel](https://community.elfsight.com/t/change-address-color-in-the-location-panel/90008)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:50pm UTC](https://community.elfsight.com/t/change-address-color-in-the-location-panel/90008 "2024-12-17T17:50:35Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-bar-list-item-info-item { color: #000 !important; } --- ## [Change width of the location panel](https://community.elfsight.com/t/change-width-of-the-location-panel/90007)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:49pm UTC](https://community.elfsight.com/t/change-width-of-the-location-panel/90007 "2024-12-17T17:49:29Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .global-styles, :root { --width: 500px; } .global-styles, .eapps-google-maps:not(.eapps-google-maps-small) .eapps-googl… --- ## [Link website url with the word](https://community.elfsight.com/t/link-website-url-with-the-word/90006)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:48pm UTC](https://community.elfsight.com/t/link-website-url-with-the-word/90006 "2024-12-17T17:48:33Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-info-item-text a { font-size: 0; } .eapps-google-maps-marker-info-item-text a::after { conten… --- ## [Display images in full height](https://community.elfsight.com/t/display-images-in-full-height/90005)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 17, 2024, 5:46pm UTC](https://community.elfsight.com/t/display-images-in-full-height/90005 "2024-12-17T17:46:45Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-image img { position: static !important; transform: none !important; margin-bottom: -4px; } .… --- ## [Display location list under the map](https://community.elfsight.com/t/display-location-list-under-the-map/62656)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 23, 2024, 6:57pm UTC](https://community.elfsight.com/t/display-location-list-under-the-map/62656 "2024-07-23T18:57:08Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-bar-container { height: 320px; width: 100%; left: 0; transition: width .3s, max-height .3s, top .3s .… --- ## [Move arrow opening list of locations on mobile under search bar](https://community.elfsight.com/t/move-arrow-opening-list-of-locations-on-mobile-under-search-bar/47932)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 11:42am UTC](https://community.elfsight.com/t/move-arrow-opening-list-of-locations-on-mobile-under-search-bar/47932 "2024-04-17T11:42:48Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .global-styles, .eapps-google-maps-small .eapps-google-maps-bar-toggle { position: absolute; top: 50px; left: 0; }… --- ## [Change direction of the arrows hiding list of locations on mobile (Up to Down)](https://community.elfsight.com/t/change-direction-of-the-arrows-hiding-list-of-locations-on-mobile-up-to-down/47931)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 11:40am UTC](https://community.elfsight.com/t/change-direction-of-the-arrows-hiding-list-of-locations-on-mobile-up-to-down/47931 "2024-04-17T11:40:07Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .global-styles, .eapps-google-maps-small .eapps-google-maps-bar-toggle-icon-small { transform: none; } Guys, if thi… --- ## [Display location panel under the map](https://community.elfsight.com/t/display-location-panel-under-the-map/37862)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 17, 2024, 2:03pm UTC](https://community.elfsight.com/t/display-location-panel-under-the-map/37862 "2024-01-17T14:03:01Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-bar-container { height: 320px; width: 100%; left: 0; transition: width .3s, max-height .3s, t… --- ## [Change font of all elements (Google Maps)](https://community.elfsight.com/t/change-font-of-all-elements-google-maps/37863)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 17, 2024, 2:06pm UTC](https://community.elfsight.com/t/change-font-of-all-elements-google-maps/37863 "2024-01-17T14:06:16Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-bar-container, .eapps-google-maps-marker{ font-family: Arial; } You are very welcome to use any othe… --- ## [Hide location info in popup](https://community.elfsight.com/t/hide-location-info-in-popup/37864)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 17, 2024, 2:10pm UTC](https://community.elfsight.com/t/hide-location-info-in-popup/37864 "2024-01-17T14:10:47Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-content { display: none; } .eapps-google-maps-marker-directions-icon { display:none ; } --- ## [Hide location name in popup](https://community.elfsight.com/t/hide-location-name-in-popup/37865)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 17, 2024, 2:12pm UTC](https://community.elfsight.com/t/hide-location-name-in-popup/37865 "2024-01-17T14:12:24Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s settings: .eapps-google-maps-marker-title-wrapper { display: none; } --- ## [Hide email under the clickable phrase](https://community.elfsight.com/t/hide-email-under-the-clickable-phrase/37866)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 17, 2024, 2:19pm UTC](https://community.elfsight.com/t/hide-email-under-the-clickable-phrase/37866 "2024-01-17T14:19:19Z")
Add this code to the Custom CSS field on the Appearance tab of your Google Maps widget’s setttings: .eapps-google-maps-marker-info-item-email a { visibility: hidden; } .eapps-google-maps-marker-info-item-email .eapps-g…