◆ Babel polyfill を bundle したコードと GoogleMaps API の JavaScript を両方ロードすると
  ◆ ⇨ GoogleMaps を先にロードするとエラー
  ◆ 途中で polyfill 追加されるのがダメみたい
◆ GoogleMaps API を polyfill 登録後にロードすると問題なし
◆ 地図の初期化タイミングが分かりづらい

とうとう webpack 使ったし ES5 直書きのにモダンなコードを追加で書けるように webpack/babel に置き換えようかなといじっていたら意外なところで困りました

Babel と GoogleMaps API

GoogleMaps を使っているページで IE11 でのみエラーが出ます

使ってるコードで何かあったのかなと思ってシンプルな例を作ってみたらそれでも再現しました

test.html
<!doctype html>
<meta charset="utf-8" />
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=KEY"></script>
<script src="test-bundle.js" defer></script>

test.js
import "@babel/polyfill"

console.log("1")

webpack.config.js
module.exports = {
mode: "development",
entry: "./test.js",
output: {
path: __dirname,
filename: "test-bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
],
},
],
},
}

package.json
{
"name": "test",
"browserslist": [
"last 1 chrome version",
"IE 11"
],
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.6"
}
}

これでビルドして test.html を開きます
Chrome ではなにもないですが IE11 では

文字列を指定してください。

というエラーが起きます
場所は GoogleMaps API の JavaScript の中です
GoogleMaps API のライブラリだけだと何も起きません

自分のコードは console.log(1) だけで あとは webpack のバンドラー部分のコードと @babel/polyfill です

対処方法

発生するのは GoogleMaps → bundle コード の順でロードしたときです
途中で polyfill が追加されるせいで問題が起きてるような感じです
追加する分には問題なさそうですが エラーになります

ロード順を変えてみて bundle コード → GoogleMaps とロードした場合はこのエラーは出ません
最初から polyfill があれば Chrome と同じような動きになる のでしょうか

並び替えるくらいでいいなら 大したことはないのですが GoogleMaps を後でロードすると地図の初期化タイミングがはかりづらいです
一応 GoogleMaps ライブラリの URL にクエリパラメータで callback を指定すれば任意の名前の関数を呼び出せます

しかし webpack などでバンドルしてると callback が呼び出せてもグローバルからになるのであまり使い勝手がよくありません
従来の作りだとグローバルに初期化関数書いてることも多いので困らないのですがモジュール化してスコープが閉じられているので 呼び出す関数を参照できません
window.init みたいなグローバルに関数を出してしまうこともできますが せっかくモジュールなのであまりやりたくないです

タイマーという手もありますが ロードされるまで数ミリ秒ごとにチェック繰り返しっていう昔の仕方なくやってたような方法もあまり取りたくないです

インストールしない外部参照のライブラリは HTML に書いておきたい気もするのですが JavaScript からロードするようにしてしまえば読み込み終了を検出することができそうです
こういうローダーモジュールを使うのがいいのかもですね(未動作確認)

googlemaps-jsapi-loader.js
function promise(){
let resolve
let reject
const promise = new Promise((a, b) => {
resolve = a
reject = b
})
return { resolve, reject, promise }
}

export default function load(url){
const { resolve, reject, promise: p } = promise()
const script = document.createElement("script")
script.src = url
script.onload = resolve
script.onerror = reject
document.head.append(script)
return p
}

これを こういう感じで使います

import load from "./googlemaps-jsapi-loader.js"

load("https://maps.googleapis.com/maps/api/js?libraries=places&key=KEY").then(init)