I'm using Google Maps as a header image on my contact page as seen here: www.tarmastersasphalt.com/contact.asp
I have found that my Google Maps doesn't work properly in any IE browser version at the moment. I am working on fixing that, but in the meantime, I need a quick work-around.
EDIT: Can anyone help by providing a way to do the following:
if any IE Browser version
~ run this section of code
else
~ run this section of code
endif
CSS, Html or Javascript solutions are OK
I edited this question to help to be more precise with what I am looking for. For those who want more specific info about my code, etc, see below:
~~~~~~~~~~ Original post info below ~~~~~~~~~~
I just want to check for any IE browser (doesn't matter what version), and skip rendering this line of code: <div id="map" class="map img-responsive"> (Instead, I just want to display a .jpg image of the map area, and a link to go to google maps in another window)
I can skip the code by checking for IE<9 easily enough, but I am having problems finding a way to check for IE9, IE10 and IE11 (or any future versions) to not execute that section.
I've provided the section of code, and the associated js and css that relates to this problem.
The attached code almost gets the results I want... except when viewed on IE 9+ browsers.. where it does show the static image, but also shows a big space below it where it is also trying to display the Google Map (which doesn't work on IE, so is blank). Note: I only have a IE11 browser to test wtih, but I am assuming that the issue is there for any IE9+ versions.
Hopefully this is enough to show you my problem, and enable someone to help me find a solution.
To sum it up: "I want the Interactive Google Map to ONLY display on all non-IE browsers with a screen size larger than 768px. Otherwise, I want to just display a static map jpg image. (This means displaying a static image for ALL IE browsers, and for all non-IE browsers that have a screen size smaller than 768px)"
$(function() {
if( document["documentMode"] ) { // If Internet Explorer 10, 11
var cssClass = "ie" + document["documentMode"];
$('body').addClass(cssClass);
}
});
var GoogleMap = function () {
var panorama1, panorama2;
// Return
return {
//Basic Map
initGoogleMap: function () {
/* Map */
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.9823426, lng: -94.1994833},
scrollwheel: false,
zoom: 12
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">TarMasters</h1>'+
'<div id="bodyContent">'+
'<p><b>Full Service Asphalt Company</b><br />' +
'1426 State Hwy TT<br />' +
'Bates City, MO 64011</p>'+
'<p><b>816-721-1699</b></p>'+
'<p><b><a target="_blank"'+
'href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216">'+
'<span> View on Google Maps </span> </a></b></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 38.9562579, lng: -94.1057286},
label: {
text: 'Tarmasters',
color: '#820000',
fontSize: "10px"
},
title: 'TarMasters - full service asphalt company'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
},
// End Basic Map
// Basic Panorama Map 1
initPanorama1: function () {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano1'),
{
position: {lat: 40.748866, lng: -73.988366},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
},
// End Basic Panorama Map 1
// Basic Panorama Map 2
initPanorama2: function () {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano2'),
{
position: {lat: 42.345573, lng: -71.098326},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
},
// End Basic Panorama Map 2
};
// End Return
}();
// Google Map
function initMap() {
GoogleMap.initGoogleMap();
}.ie-dependant {
display:none;
}
body.ie11 .ie-dependant.ie11 {
display: block;
}
body.ie10 .ie-dependant.ie10 {
display: block;
}
@media (min-width: 768px) {
.hidelg2 {
display: none !important;
}
}
@media (max-width: 768px) {
.hidesm2 {
display: none !important;
}
}
.centersomething {
text-align: center;
margin: 0px auto; /*Center container on page */
float: none;
}
.im-centered {
margin-left: auto;
margin-right: auto;
padding-left: 0px !important;
padding-right: 0px !important;
float: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAWR4lerRuEliCpkQtVlProdv-B_XrG6VM&callback=initMap" async defer></script>
<!-- Google Map -->
<!-- this next section displays static map jpg image for IE 8 and less -->
<!--[if lt IE 9]>
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="im-centered img-responsive" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
<![endif]-->
<!--[if gte IE 9]><!-->
<!-- everything after this section is being rendered for all non-IE browsers and IE browsers 9 and above -->
<!-- this next <div> section displays the static map jpg image for IE 10 and 11 -->
<div class="ie-dependant ie10 ie11">
<a
href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive centersomething im-centered" align="center" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div>
<!-- this next <div> section displays the interactive google map for all non-IE browsers (and IE >9 -unfortunatly) if the window size is wider than 768px. ***Note this is the section I would like to have hidden to all IE browsers, but can't seem to find a way to do so for IE >9) -->
<div class="hidesm2">
<div id="map" class="map img-responsive">
</div><!---/map-->
</div><!---/hidesm2-->
<!-- this next <div> section displays the static map jpg image for all non-IE browsers (and IE >9) if the window size is less than 768px. -->
<div class="hidelg2">
<a
href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div><!---/hidelg2-->
<!--<![endif]-->
<!-- End Google Map -->