Google Maps API is only partially rendering the map

Good Morning.

I have a code from a web page that calls the google maps API: https://codepen.io/PietroBondioli/pen/pooLyLL. It is working and the maps are displaying correctly, however when trying to interact/scroll the map it is noticed that it is only partially rendering (it only renders the initial area that was chosen through the parameters passed to the objects instantiated by the class ‘Map’).

Images of the problem:

1 Like

Hey, make sure that if you’re using any Google API service that you also register an API-key alongside it. An API-key for the JavaScript Maps API can be registered here.

Hope this helps!

1 Like

The API-key is already registered and the API service is activated. The API is working correctly, the problem comes when i try to interact with the map(as I demonstrated in the image) because it only rendering the initial area which has the size specified in html div style.

.section__image--style {
         width: 350px;
         height: 350px;
      }
2 Likes

Could it possibly be the way that the map is being loaded via a class?

1 Like

The map isn’t being loaded via a class, its loading by the id of the map div. 

<div id="map1" class="section__image--style"></div>

You can check all the code either in https://codepen.io/PietroBondioli/pen/pooLyLL or https://pastebin.com/c2J2r9xv

1 Like

You may need to trigger a map resize on interaction. E.g. from here.

2 Likes