Google map API 3 works in Chrome and Firefox but displays a blank white page in Internet Explorer 11


I have a Google map API 3 which works in Chrome and Firefox but displays a blank white page in Internet Explorer 11. It is a copy of the  Google Maps Api Example called Simple Store Locator App

The example has 3 files.

1) index.html
2) app.js
3) stores.json

Which I have attached to this question.

After a lot of head scratching and trying to work out what was wrong with my code I went back to the example given by Google to rule out anything I had done. The only thing I have changed in the files is my API Key.

The errors that the IE11 console are giving are as follows:

HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
Google-original (16,1)
HTML1503: Unexpected start tag.
Google-original (23,1)
SCRIPT1002: Syntax error
app.js (116,64)
SCRIPT5022: InvalidValueError: initMap is not a function
js (100,96)

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Try adding this code at the top of the page <!DOCTYPE html>
<!DOCTYPE html>
  Copyright 2017 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  See the License for the specific language governing permissions and
  limitations under the License.
  <title>Store Locator</title>
    .map {height: 100%;}
    html, body {height: 100%; margin: 0; padding: 0;}
  <div class="map"></div>

  <script src="app.js"></script>
  <script async defer

Open in new window

LetterpartAuthor Commented:

no improvement except that one error has now cleared.

SCRIPT1002: Syntax error
app.js (116,64)
SCRIPT5022: InvalidValueError: initMap is not a function
js (100,96)
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yea, that is troubleshooting. Fix one error to get to the next.

Post a link to your test page or recreate on jsbin or codepen.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

LetterpartAuthor Commented:

that's me uploaded the new code to:
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sorry, I have been too busy.

It does not like this line in app.js
result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LetterpartAuthor Commented:
Sorry for delay.

I've had to shelve this due to other work. After I fixed the last issue it complains about the next and so on. Will re-visit at a later date.

Thanks for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.