Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 6

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:
imagem1.pngimagem2.png

5 Replies
Pilot Lvl 2
Message 2 of 6

Re: Google Maps API is only partially rendering the map

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!

 

Gavin R. Isgar - Freelance Software Developer
Copilot Lvl 2
Message 3 of 6

Re: Google Maps API is only partially rendering the map

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;
      }
Pilot Lvl 2
Message 4 of 6

Re: Google Maps API is only partially rendering the map

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

 

Gavin R. Isgar - Freelance Software Developer
Copilot Lvl 2
Message 5 of 6

Re: Google Maps API is only partially rendering the map

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

Commander Lvl 2
Message 6 of 6

Re: Google Maps API is only partially rendering the map

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

Please follow-up to let us know how you made out. For good karma, mark a reply as the answer if it helped!