Access to a Javascript map in R, using Shiny and leaflet

Question

I'm currently trying to use a googlelayer as a base layer for a leaflet map in shiny R, that's why I've been using shinyJs in order to insert a Js script into my R code in order to insert a map, the thing is that I don't manage to access the map outside of the Javascript code, and if I look up to the Js console, it says that "the map container has already been initialized". I provide you the code of the app as a reproducible science.

###################
#### Library ######
###################
library(leaflet)
library(shiny)
library(shinythemes)
library(shinyjs)
#library(raster)
###################

setwd("D:\\R")


ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"),
    tags$script(src="shared/shiny.js"),
    tags$script(src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQvaBc5_RruTllCvOxy3i9YNFYlaDzaJ8"),
    tags$script(src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"),
    tags$script(src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js')
  ),
  sidebarLayout(
    sidebarPanel(
      actionButton(inputId = "button",
                   label = "coucou")
    ),
    mainPanel(
        leafletOutput("mymap")
    )
  #)
  ),
  tags$script(HTML('$(document).on("shiny:connected", function(){
  var mymap = L.map("mymap").setView([45.777222,3.087025],4);
  var roads = L.gridLayer.googleMutant({type : "satellite"}).addTo(mymap);
  var el = document.getElementById(mymap.id);
  Shiny.onInputChange("mymap",el);

})'))
)


server <- function(input, output) {
  # output$mymap <- renderLeaflet({
  #   leaflet() %>%
  #     setView(-1.252441, 47.802332, 4)
  # })

  # jean <- reactive(input$el)
  #print(output$mymap)

  observeEvent(input$button, {
    output$mymap <- renderLeaflet({
    leafletProxy("mymap", data =input$mymap) %>%
      addMarkers(45.777222,
               3.087025,
               "btn")
    })
  })

  observeEvent(input$mymap_click, {
    cat("vroum")
  })



}

shinyApp(ui = ui, server = server)

Answer 1

You can plot a Google Map directly using my googleway package

library(shiny)
library(googleway)

ui <- fluidPage(
    google_mapOutput(outputId = "map", height = 600)
)

server <- function(input, output){

    output$map <- renderGoogle_map({
        google_map(key = 'your_api_key')
    })

    observeEvent(input$map_map_click, {
        print(input$map_map_click)
    })

}

shinyApp(ui, server)

Answer 2

To answer your question, you can access the map using the following code:

  var el = document.getElementById("mymap");
  var map = $(el).data("leaflet-map"));

But this doesn't get you to add the google layer as you need leaflet version 1.0.3 and the R package uses version 0.7 and you can't just load the version 1.0.3 as you did because it will raise come compatibility issues with the R package.

I'm trying to do the same but I found nothing so far. If you managed to do it, I would be very happy to know how.