I know this is a duplicate question but none of the answers and examples (I have found so far) have resolved my issue so it's either a different issue or I will get heavily downvoted ;-).
EDIT After a lot of testing and scratching my head I remembered that this was taken from an example and I have found it.
It is the Google Maps Api Example called Simple Store Locator App and this also doesn't work in Internet Explorer 11.
I have a Google map which works in Chrome and Firefox but displays a blank white page in IE11.
I have researched this and all the answers I have found point to IE11 needing a width:100% and height:100% on all the containers which I have added but I still get a blank page.
I have also tried adding a pixel value to html and body then 100% to the .map class and vice versa.
The code I am using is:
EDIT: The code I pasted into the question had a missing / on the closing head. I have added this now.
<!--
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>Team area & Incident map</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
.map {
height: 100%;
width:100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width: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>
And app.js contains:
/*
* Copyright 2017 Google Inc. All rights reserved.
*
*
* 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.
*/
// Style credit: https://snazzymaps.com/style/1/pale-dawn
const mapStyle = [
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 33
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2e5d4"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#c5dac6"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 20
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"lightness": 20
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#c5c6c6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#e4d7c6"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#fbfaf7"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"color": "#acbcc9"
}
]
}
];
// Escapes HTML characters in a template literal string, to prevent XSS.
// See https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.231_-_HTML_Escape_Before_Inserting_Untrusted_Data_into_HTML_Element_Content
function sanitizeHTML(strings) {
const entities = {'&': '&', '<': '<', '>': '>', '"': '"', "'": '''};
let result = strings[0];
for (let i = 1; i < arguments.length; i++) {
result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {
return entities[char];
});
result += strings[i];
}
return result;
}
function initMap() {
// Create the map.
const map = new google.maps.Map(document.getElementsByClassName('map')[0], {
zoom: 9,
center: {lat: 55.588290, lng: -3.258820},
styles: mapStyle
});
var triangleCoords = [
{lat: 55.354355, lng: -2.477846},
{lat: 55.355146, lng: -2.479756},
{lat: 55.355731, lng: -2.482717},
{lat: 55.355668, lng: -2.483640},
{lat: 55.356156, lng: -2.488189},
{lat: 55.358302, lng: -2.491450},
{lat: 55.361415, lng: -2.495334},
{lat: 55.362025, lng: -2.497995},
{lat: 55.362927, lng: -2.497609},
{lat: 55.363537, lng: -2.494390},
{lat: 55.364171, lng: -2.494648},
{lat: 55.364464, lng: -2.496364},
{lat: 55.364781, lng: -2.496665},
{lat: 55.365854, lng: -2.495806},
{lat: 55.367279, lng: -2.492480},
{lat: 55.372498, lng: -2.490592},
{lat: 55.379764, lng: -2.496085},
{lat: 55.383373, lng: -2.496600},
{lat: 55.386444, lng: -2.495828},
{lat: 55.392684, lng: -2.499003},
{lat: 55.403564, lng: -2.502651},
{lat: 55.416038, lng: -2.509174},
{lat: 55.419741, lng: -2.513638},
{lat: 55.458930, lng: -2.553635},
{lat: 55.500955, lng: -2.545395},
{lat: 55.505621, lng: -2.574234},
{lat: 55.576331, lng: -2.663498},
{lat: 55.704217, lng: -2.714310},
{lat: 55.733611, lng: -2.767868},
{lat: 55.775342, lng: -2.792587},
{lat: 55.824744, lng: -2.859879},
{lat: 55.909507, lng: -3.064499},
{lat: 55.924742, lng: -3.061409},
{lat: 55.944358, lng: -3.071709},
{lat: 55.988552, lng: -3.176765},
{lat: 55.985095, lng: -3.328514},
//{lat: , lng: },
//Section from A68 South West to
{lat: 55.125042, lng: -2.829666},
{lat: 55.170559, lng: -2.696457},
{lat: 55.220725, lng: -2.670364},
{lat: 55.224642, lng: -2.634659},
{lat: 55.243980, lng: -2.631054},
{lat: 55.245937, lng: -2.611485},
{lat: 55.259244, lng: -2.646160},
{lat: 55.261787, lng: -2.627621},
{lat: 55.284083, lng: -2.606678},
{lat: 55.311252, lng: -2.558270},
{lat: 55.322192, lng: -2.519817},
];
// Construct the polygon.
var tweedvalleymrtarea = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF6699',
fillOpacity: 0.35
});
tweedvalleymrtarea.setMap(map);
// Load the Incident GeoJSON file into the map.
map.data.loadGeoJson('incidents.json');
// Define the custom incident marker icons, using the incident category.
// bike
// misper
// walker
map.data.setStyle(feature => {
return {
icon: {
url: `img/icon_${feature.getProperty('category')}.png`,
scaledSize: new google.maps.Size(64, 64)
}
};
});
const apiKey = 'your_api_key';
const infoWindow = new google.maps.InfoWindow();
infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
// Show the information for a store when its marker is clicked.
map.data.addListener('click', event => {
const team = event.feature.getProperty('team');
const year = event.feature.getProperty('year');
const grid = event.feature.getProperty('grid');
const day = event.feature.getProperty('day');
const date = event.feature.getProperty('date');
const category = event.feature.getProperty('category');
const type = event.feature.getProperty('type');
const area = event.feature.getProperty('area');
const sex = event.feature.getProperty('sex');
const age = event.feature.getProperty('age');
const members = event.feature.getProperty('members');
const hours = event.feature.getProperty('hours');
const description = event.feature.getProperty('description');
const phone = event.feature.getProperty('phone');
const position = event.feature.getGeometry().get();
const content = sanitizeHTML`
<img style="float:left; width:120px; margin-top:20px 0 0 20px;" src="img/logo_${category}.png">
<div class="incident-container" style="margin-left:150px; margin-bottom:20px;">
<div class="title">${type}</div>
<strong>Sex: </strong>${sex}<br>
<strong>Age: </strong>${age}<br>
<strong>Grid Reference: </strong>${grid}<br>
<strong>Date: </strong>${day} ${date}<br>
<strong>Location: </strong>${area}<br>
<strong>Team: </strong>${team}<br>
<strong>Year: </strong>${year}<br>
<strong>Members : </strong>${members}<br>
<strong>Hours: </strong>${hours}<br>
<p>${description}</p>
</p>
</div>
`;
infoWindow.setContent(content);
infoWindow.setPosition(position);
infoWindow.open(map);
});
}
EDIT: IE11 Console is giving me two errors: 1) app.js Syntax error on line (116,64) 2) js InvalidValueError: initMap is not a function (100,96)
1) Line 116 of app.js is part of the sanitise function and the line is:
result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {
If I comment out that function, it then gives me a syntax error on this line:
map.data.setStyle(feature => {
How is this line now giving me a syntax error when it didn't before? All it's doing is setting the map style?
I have an example uploaded at: http://digitalessence.net/map/
