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

Hi,

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)



app.js
index.html
stores.json.txt
LVL 1
LetterpartAsked:
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

       http://www.apache.org/licenses/LICENSE-2.0

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

  <script src="app.js"></script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
  </script>
</body>
</html>

Open in new window

0
LetterpartAuthor Commented:
Hi,

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)
0
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.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

LetterpartAuthor Commented:
Hi,

that's me uploaded the new code to: http://digitalessence.net/map/google-original/
0
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

0

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.
0
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
Google

From novice to tech pro — start learning today.