fullscreen map not responsive

[I3auke]

Hi, I would expect to create a responsive fullscreen map in shiny via:

# ui <- fluidPage(
#   google_mapOutput(outputId = "map", height = "100%")
# )

But it is not working (map is not loading at all; only search box is visible). "height ='800px'" does look better, but it is not responsive (it does not respond when window is resized).

thnx. Bauke

[SymbolixAU]

Can you post the full shiny code please (you can omit the api key)?

[I3auke]

see below. I tried omitting "height = '100%'" and changing it to 'auto' but without the desired result. thnx!

library(shiny)
library(googleway)
library(shinydashboard)

ui <- fluidPage(google_mapOutput("map",height = '100%'))
latitude<-c(50.814,51.953)
longitude<-c(3.6345, 4.567)
markers <- data.frame(latitude=latitude,longitude=longitude)

server <- function(input, output, session){
  map_key <- "XXXXXX"
  output$map <- renderGoogle_map({
    map<-google_map(key = map_key, data = markers,
                    search_box = TRUE, fullscreen_control = TRUE) %>%
      add_markers()
    map
  })
}

shinyApp(ui, server)

[SymbolixAU]

Thanks - I can replicate the issue.

We are getting a google is not defined javascript error.

I'll look into it.

[SymbolixAU]

"height ='800px'" does look better, but it is not responsive (it does not respond when window is resized).

But I'm not seeing this behaviour.

[I3auke]

found a workaround:

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  google_mapOutput("map",width = "100%", height = "100%"))

works well

[jimbrig]

did you ever find a solution for the uncaught reference error?

[dcooley]

nope...

I kind of let it slide given the workaround. Have you tried the proposed solution ?

[jimbrig]

yes and it caused my map to not render when I set height to "100%". Does it require bootstrapPage?

I am using shinydashboardPlus, and my map is in a held within a box > fluidRow > column width 6.

[jimbrig]

scratch that. simply changing height to 400px worked.

This is all I changed:

Pretty weird given that the default arguments already use 100% and 400px for width and height:

google_mapOutput
function (outputId, width = "100%", height = "400px") 
{
    htmlwidgets::shinyWidgetOutput(outputId, "google_map", 
        width, height, package = "googleway")
}

Thanks though! Glad I found this thread, feels good finally getting those console errors down to zero in an enormous app! 💪