user1536798
Reputation: 11
google maps api v2 not displaying in internet explorer
Here is the code. It uses the Google Maps API V3. Works perfectly well on all browsers both on Mac and PC, except for Internet Explorer 9. I checked for stray commas and some of the other common IE compatibility issues but am stumped. Any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Patient Wait Times for Hospitals and Clinics</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Live Wait Times for Hospitals and Clinics. Real-time updates. Patient satisfaction and emergency room wait time data for more than 5,000 hospitals and clinics. Identify hospital with highest patient satisfaction and shortest wait time." />
<link href="stat.css" rel="stylesheet" type="text/css" /><!--Google Tracking Script -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31929746-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
<!--
// create the XMLHttpRequest object, according browser
function get_XmlHttp() {
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(php_file, tagID) {
var request = get_XmlHttp(); // call the function for the XMLHttpRequest instance
// create pairs index=value with data that must be sent to server
var the_data = 'test='+document.getElementById('addressInput').innerHTML;
request.open("POST", php_file, true); // set the request
// adds a header to tell the PHP script to recognize the data as is sent via POST
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(the_data); // calls the send() method with datas as parameter
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(tagID).innerHTML = request.responseText;
}
}
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
<!--
BODY
{
padding-left: 50px;
padding-right: 50px;
font-size:14px;
</body>
}
-->
/*]]>*/
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDAB1Q6VnjM9eLivEdelHRuXIzvFeSdvXo" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
}
}
function searchLocations() {
var address = document.getElementById('addressInput').value;
// window.location.href = "capture.php?var=" + address;
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
alert(address + ' not found');
} else {
searchLocationsNear(latlng);
}
});
}
//function OnUnload() {
//var address = document.getElementById('addressInput').value;
// window.location.href = "capture.php?var=" + address;
//alert(address);
//}
//function OnUnload() {
//var address = document.getElementById('addressInput').value;
//window.location.href = "capture.php?var=" + address;
//alert ("The current document will be unloaded!");
//}
// create the XMLHttpRequest object, according browser
function get_XmlHttp() {
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(php_file, tagID) {
var request = get_XmlHttp(); // calls the function for the XMLHttpRequest instance
// gets data from form fields, using their ID
var box = document.getElementById('addressInput').value;
//var mesaj = document.getElementById('mesaj').value;
// create pairs index=value with data that must be sent to server
var the_data = 'box='+box;
request.open("POST", php_file, true); // sets the request
// adds a header to tell the PHP script to recognize the data as is sent via POST
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(the_data); // sends the request
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(tagID).innerHTML = request.responseText;
}
}
}
function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml2.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
//var searchUrl = 'phpsqlsearch_genxml2.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&address=' + address;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(40, -100), 4);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var ID = markers[i].getAttribute('ID');
var name = markers[i].getAttribute('name');
// var address = markers[i].getAttribute('address');
var street = markers[i].getAttribute('street');
var city = markers[i].getAttribute('city');
var wait = markers[i].getAttribute('wait');
var collected = markers[i].getAttribute('collected');
var min = markers[i].getAttribute('min');
var sat = markers[i].getAttribute('sat');
var nps = markers[i].getAttribute('nps');
var score = markers[i].getAttribute('score');
var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));
//var d = new Date('collected');
//var e = dateFormat('collected', "dddd, mmmm dS, yyyy, h:MM:ss TT");
// var marker = createMarker(point, name, address, wait);
var marker = createMarker(point, name, street, city, wait, collected, distance, min, nps, score);
map.addOverlay(marker);
// var sidebarEntry = createSidebarEntry(marker, name, address, wait, distance);
var sidebarEntry = createSidebarEntry(marker, name, street, city, wait, distance, collected, min, nps, score);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, street, city, wait, collected, distance, min, nps) {
var marker = new GMarker(point);
//var html = '<b>' + name + '<\/b> <br/>' + address + '<br/>' + wait +' minutes';
var html = '<b>' + name + '<\/b> <br/>' + street + ', '+ city + '<br/>' + 'Wait Time: ' + wait + ' ' + min + '<br/>' + 'Updated: '
+ collected + '<br/>' +'Distance: ' + distance.toFixed(1) + ' miles' + '<br/>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, street, city, wait, distance, collected, min, nps, score) {
var div = document.createElement('div');
// var html = '<b>' + name + '<\/b> ' + distance.toFixed(1) + ' miles <br/>' + address + '<br/>' + wait +' minutes';
//var html = '<b>' + name + '<\/b> ' + distance.toFixed(1) + ' miles <br/>' + street + ', ' + city + '<br/>' + wait +' minutes';
var html = '<span class="sidefont">' + '<b>' + name + '<\/b>' + '<br/>' + ' GovRank: ' + score + '<br/>' +
' Wait Time: ' + '<font color=#336FF>' + wait + ' ' + min + '<br/>' + '<\/font>' +
' ' + '<font size="-5"><i>' + 'Updated ' + collected + ' pt' + '<\/i><\/font>' + '<\/span>';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
// div.style.backgroundColor = '#eee';
div.style.backgroundColor = '#3366FF';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Header</title>
<link href="stat.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer</title>
<link href="stat.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
span.c4 {color: #093}
div.c3 {color: #000; font-size: 14px; height: 450px; overflow: auto; text-align: left; width: 350px}
div.c2 {height: 450px; overflow: hidden; text-align: left; width: 600px}
div.c1 {font-family: Arial, sans-serif; font-size: 11px; text-align: left; width: 600px}
/*]]>*/
</style>
</head>
<!--script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script-->
<!--script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDAB1Q6VnjM9eLivEdelHRuXIzvFeSdvXo&sensor=true">
</script-->
<!--script type="text/javascript" src=""></script-->
<!--body onload="load()" onunload="OnUnload()"-->
<body onload="load()">
<div class="story"><!--p class="basic-paragraph"><!==body onload="load()" onunload="GUnload(); Capture();"--></div>
<div id="context"></div>
<div class="c1"></div>
<table align="left">
<tr>
<td>
<table align="left">
<tr>
<td valign="bottom">
<table align="left">
<tr>
<td valign="bottom"><span class="no-style-override-2">W</span><span class="no-style-override-3">AIT</span><span class="no-style-override-2">H
</span><span class="no-style-override-3">EALTH.COM</span></td>
</tr>
<tr>
<td valign="bottom"><span class="no-style-override-4">Compare Government Rankings and Patient Wait Times at Hospitals</span></td>
</tr>
<!--tr><td width="600px"><hr align=left noshade size=2 width=80% color=#b4b4b4></td></tr--></table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><!--form action="test_form.php" method="post" name="form1" onsubmit="searchLocations(); ajaxrequest('test_form.php', 'resp'); return false;"-->
<div id="resp"></div>
<form action="capture_search.php" method="post" name="form1" id="form1"></form>
<table align="left">
<tr align="top">
<td><span class="no-style-override-9">Enter Hospital Name, City, or Zip</span></td>
<td><span class="no-style-override-9"> Search Radius</span></td>
</tr>
<tr>
<td valign="bottom"><input type="text" id="addressInput" size="20" /></td>
<td valign="bottom"><select id="radiusSelect">
<option value="10" selected="selected">10 miles</option>
<option value="5">5 miles</option>
<option value="20">20 miles</option>
</select></td>
<td valign="bottom"><input type="submit" onclick="searchLocations(); ajaxrequest('capture_search.php', 'resp'); return false;" onkeypress="this.onclick()"
value="Find Hospitals" /></td>
<!--td valign="bottom"><input type="text" onkeypress="searchLocations(); OnUnload();"/></td--></tr>
</table>
<!--/form--></td>
</tr>
<!--/table-->
<tr>
<td>
<table align="left" border="1"><!--tr><td colspan="1"><hr align=left noshade size=2 width=160% color="#FF0000"></td></tr-->
<!--tbody--><!--Map-->
<tr>
<td align="left">
<div id="map" class="c2"></div>
</td>
<!--list of places on map -->
<td align="left">
<div id="sidebar" class="c3">Detailed results will appear here.</div>
</td>
</tr>
<!--/tbody--></table>
<div>
<table>
<tr>
<td>
<table align="left">
<tr>
<td>
<table align="left"><!--tr><td> </td><td> </td><td> </td><td> </td></tr-->
<!--tr><td width="600px"><hr align=left noshade size=2 width=80% color=#b4b4b4></td></tr-->
<tr>
<td align="left">
<div id="footer"><span class="no-style-override-5"><a href="index.php">Home</a> | <a href="about.php">About</a> | <a href="contact.php">Contact</a> | <a href="display_wait.php">Show All</a> | <a href="grade.php">GovRank</a> | <a href="search_ratings.php"><span class="c4">Rate a Hospital</span></a></span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--script type="text/javascript">
//var x="one";
window.location.href = "http://www.capture.php?var=" + address;
</script--></td>
</tr>
</table>
</body>
</html>
Upvotes: 0
Views: 619
Answers (1)
geocodezip
Reputation: 161334
The v2 API is deprecated and is no longer being actively supported. Although the FAQ says IE6+:
Google Maps JavaScript API V2:
- IE 6.0+ (Windows)
- Firefox 2.0+ (Windows, Mac OS X, Linux)
- Safari 3.1+ (Mac OS X, iOS)
- Chrome (Windows)
I doubt any work is being done to support quirks of new versions of IE.
Upvotes: 1
Related Questions
- Google Maps JS API V3: Map won't show in Internet Explorer
- Google Maps API v3 in IE Not Displaying Map or Markers
- Google Maps API Javascript - Map not showing
- Google map api3 wont show in Chrome or IE
- Google Maps not working in IE7
- Google Map API v3 not loading in IE9
- Google Maps doesn't show in IE7
- Google Maps API v2 doesn't work at Firefox and IE
- IE6: Doesn't load Google Maps API v3
- Google Maps API v3 problems on IE