0

In my react.js web app, I launch a react bootstrap modal menu from a google map and it displays correctly. However, when I display the google map in fullscreen mode, the react bootstrap modal menu does not display. The information I've found so far, indicates that the modal menu needs to be inside of the maps fullscreen div and that the z-index will not fix this. I've also found 2 working samples ([sample1][1], [sample2][2]), but I can't get them to work for my particular implementation using react. In my implementation, the modal menu is a component that I create using the bootstrap modal component. Here is a high level view of the code:

import {GoogleMap, LoadScript, Marker} from "@react-google-maps/api";
<LoadScript>
   <GoogleMap>
   </GoogleMap>
   {MenuModalShow ? (
     <MenuModal
       id="MenuModal"
       show={MenuModalShow}
       onHide={() => setMenuModalShow(false)}
       menu_modal_list={MenuModalList}
       menu_modal_heading={MenuModalHeading}
       menu_model_image={MenuModalImage}
       menu_modal_place={MenuModalPlace}
     />
   ) : null}
</LoadScript>


  [1]: https://stackoverflow.com/questions/47247907/google-map-in-fullscreen-with-bootstrap-modal
  [2]: https://stackoverflow.com/questions/60738875/open-a-bootstrap-modal-over-leaftlet-in-fullscreen
Tom
  • 63
  • 6
  • My backup plan is to create a pop up menu using the google maps InfoWindow functionality. A third option could be to create a simple embedded menu using html (e.g. using the select tag) and adding it to the map. I already have code that adds buttons to the map, so this is just a bit more code with additional interactivity. Has anyone tried any of these? – Tom Jan 14 '22 at 10:53
  • I found a better workaround (option #4). I realized that I really don't need "fullscreen", all I need is to make the map as big as possible. Normally it takes up 25% of the screen, I just want it to take up as much of the screen as possible. The workaround is to use react to toggle between 2 different views of the app. The "normal" view and the large map view. I added a button to the map and clicking on it toggles a redux variable that forces the re-render. Since this does not answer the original question, I'm not listing it as an answer, but it's what I'm going with. – Tom Jan 15 '22 at 06:47

0 Answers0