What are the required props used for when using withScriptjs HOC

Question

Just started using react-google-maps and would like to know what the required properties loadingElement, containerElement, and mapElement are used for when using the withScriptsjs HOC. Are they strictly used for styling as the examples show? Again I'm not exactly sure what these properties are used for.

Answer 1

This answer is about the containerElement and mapElement props that are associated with the withGoogleMap HOC.

If you do not include either the containerElement or mapElement props (test it out in this CodeSanbox demo app), you get the following error:

Required props containerElement or mapElement is missing. You need to provide both of them. The google.maps.Map instance will be initialized on mapElement and it's wrapped by containerElement. You need to provide both of them since Google Map requires the DOM to have height when initialized.

The way I see it, the mapElement prop is used to specify the HTML element that the map will attach too.

In a simple Vanilla JavaScript example(taken from the Google Maps Documentation), this is represented by the following code:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

The first argument to the google.maps.Map constructor is the DOM element in which you want to create the new map. In the JS example, this is the div element with an id of "map" inside the body tag (<div id="map"></div>).

As for the containerElement prop: the same JS example does not explicitly specify a container element because I believe the body and html elements are assumed to be the containers. That is why the CSS specifies a height for them:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

This ties in with the following part of the error I shared above:

... Google Map requires the DOM to have height when initialized.

If you remove the height: 100% CSS rule from the JS example (try removing it from the CSS in this JSBin), the map doesn't show up anymore. This might be equivalent to removing the containerElement prop.

---

Regarding the loadingElement prop, I'm not sure what that is for yet... :)