2

R version 3.6.2 (2019-12-12) -- "Dark and Stormy Night" Platform: x86_64-apple-darwin15.6.0 (64-bit)

Code as per example below (replace "your_key" with the proper Google API key). My question: is there a way to customize the size of the search_box, namely its length?

Thanks in advance.

library(shiny)
library(googleway)

ui <- fluidPage(
  google_mapOutput('myMap')
               )

server <- function(input, output){

       output$myMap <- renderGoogle_map({
          google_map(key = "your_key", search_box = TRUE)
                                       })
                                  }

shinyApp(ui, server)
  • The search box is defined [here](https://github.com/SymbolixAU/googleway/blob/master/inst/htmlwidgets/google_map.js#L29), and the css is defined [here](https://github.com/SymbolixAU/googleway/blob/master/inst/htmlwidgets/lib/map/map_style.css) - so you'll have to override the specific element. I don't have time to test or check this at the moment though. – SymbolixAU Feb 10 '20 at 19:44

1 Answers1

2

using the link in the comment above the css styling, you can override the default css as follows. First create a file with the custom css, here called gmap.css, and update the search box layout.

/* Google search box */

.pac-input {
  background-color: #f7c088;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  width: 600px;
  padding: 0 11px 0 13px;
  margin-left: 12px;
  text-overflow: ellipsis;
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 80px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

Then use the includeCSS() above the mapping function.

library(shiny)
library(googleway)

ui <- fluidPage(
  includeCSS('www/gmap.css'),
  google_mapOutput('myMap')
)

server <- function(input, output){
  
  output$myMap <- renderGoogle_map({
    google_map(key = 'your_key', search_box = TRUE)
  })
}

shinyApp(ui, server)

And design away (although maybe pick a better colour scheme).

enter image description here

pdbentley
  • 430
  • 4
  • 9