https://stackoverflow.com/questions/37991340/error-google-maps-api-error-missingkeymaperror

@walk2fly

Thanks.

I have a API key now. It works well.
Additional question.

I am using the built-in Bootstrap style.

Any idea how I could make the map responsive too ?

"responsive" refers to the pixel resolution the appliance is facing at the end of the gadget. Usually, I mean, before the newer smartphones and tablets with 1920 x 1080 resoltuion had been flooding the market, the main non-bootstrapped option to go was:
https://xlinesoft.com/phprunner/docs/mobile_template.htm
to cover whatsoever non-1080p displays of smartphones and else (lower than 1920 x 1080) pixels. What I would like to say is this: If your map ends up on a 1920 x 1080 display (e.g. smartphone) it should work fine like that. If lower pixel resolution would be ON, you would need to make a compromise in map size between PC monitor and else by sizing the map that way, it's not too small for the big display and not to big for the smaller displays with lower resolutions.
Or you run a MIX of bootstrapped and non-bootstrapped as mentioned above, informing the user by a linked button to choose from.
https://xlinesoft.com/phprunner/docs/choose_fields.htm
Finally, as another option to go, please check whether to can out the map into landscape mode, informing the user by small text message accordingly on how to view the map.

Is something like here [url="https://bootsnipp.com/snippets/BaPj4"]https://bootsnipp.com/snippets/BaPj4[/url] possible ?
Wrapping the google map within a <div class="map-responsive">
and add additional CSS like :
.map-responsive{

overflow:hidden;

padding-bottom:56.25%;

position:relative;

height:0;

}

.map-responsive iframe{

left:0;

top:0;

height:100%;

width:100%;

position:absolute;

}
I tried this but without success.
May admin help ?

Got it working now.
Added this to custom CSS :

mymapeventname_map {

}
and added this to the map event:
$mapSettings["width"] = '100%'; // instead of ... px

mymapeventname_map {

height: 0;

width: 100%;

overflow: hidden;

padding-bottom: 50%;

padding-top: 30px;

position: relative;

}
and added this to the map event:
$mapSettings["width"] = '100%'; // instead of ... px

I ran into this as well a little while back and am glad to see you have it worked out. I would review your code and change out all "px" to "%, even your "padding-top: 30px" above. It will save you a lot of future edits.