http://dev.epicwebdesign.ca/emco/assets/mapping.php
これは、 http: //dev.epicwebdesign.ca/emco/?page=dealerlocatorにiFrameとして読み込まれます。
何らかの理由で、マップがInternetExplorerに表示されません。(JS)エラーメッセージはありません。行末の余分なコンマをいくつか削除するまで、見つけたすべてのことを試しました。
開発者ツールを使用してdivの高さを手動で500pxに設定すると、再度検索してリセットされるまで機能します。内部divが常に表示されるとは限りません。
内側のdivの高さは100%です。map_canvasの高さは550pxです。内側のdivは、高さが0pxではなく、それを埋めるべきではありませんか?
これはInternetExplorerのみにあります。GoogleコードにはクラスやIDがないので、強制することはできません。
これは同じ動作です。この修正は、3.3から3.8では機能しませんでした。
現在、Google-fuを使い切っており、午前4時44分です。何か案は?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Markers</title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
<?php
$a = ''; $b = ''; $c='';
$btext='';
function validateCanadaZip($zip_code)
{
$zip_code = strtoupper($zip_code);
$zip_code = str_replace(" ", "", $zip_code);
$zip_code = str_replace("-", "", $zip_code);
$count = count($zip_code);
if(strlen($zip_code) != 6) {
return array(false, $zip_code);
}
if(preg_match("/^([a-ceghj-npr-tv-z]){1}[0-9]{1}[a-ceghj-npr-tv-z]{1}[0-9]{1}[a-ceghj-npr-tv-z]{1}[0-9]{1}$/i",$zip_code))
return array(true, $zip_code[0].$zip_code[1].$zip_code[2]." ".$zip_code[3].$zip_code[4].$zip_code[5]);
else
return array(false, $zip_code);
}
if (isset($_POST['submit'])){
if (isset($_POST['location']))
{
$zipcode = $_POST['location'];
$result = validateCanadaZip($zipcode);
if ($result['0']) {
} else {
print $_POST['location'] ." is not a valid Postal Code";
}
}
$host = "removed";
$user = "removed";
$pass = "removed";
$dbnm = "removed";
$conn = mysql_connect ($host, $user, $pass);
if ($conn) {
$buka = mysql_select_db ($dbnm);
if (!$buka) {
die ("Database Not Found");
}
} else {
notify("Fatal Error. Can not connect to Database", "");
}
$radius = $_POST['radius'];
$selected="selected=\"selected\"";
if ($radius == 10) $a=$selected;
else if ($radius == 25) $b=$selected;
else if ($radius == 50) $c=$selected;
else if ($radius == 100) $d=$selected;
$address = str_replace(" ", "+", $result[1]);
$url= 'http://maps.googleapis.com/maps/api/geocode/json?address='.$address.'&sensor=false';
$data = @file_get_contents($url);
$jsondata = json_decode($data,true);
if(is_array($jsondata )&& $jsondata ['status']=="OK"){
$lat = $jsondata['results'][0]['geometry']['location']['lat'];
$lng = $jsondata['results'][0]['geometry']['location']['lng'];
}
else echo "didnt get in";
$query1 = "SELECT name, address, city, prov, postalcode, phone, showroom, lat, lng, ( 6371 * ACOS( COS( RADIANS( $lat ) ) * COS( RADIANS( lat ) ) * COS( RADIANS( lng ) - RADIANS( $lng ) ) + SIN( RADIANS( $lat ) ) * SIN( RADIANS( lat ) ) ) ) AS distance FROM dealers HAVING distance <$radius ORDER BY showroom desc, distance LIMIT 0, 6";
$data = mysql_query($query1) or die("A MySQL error has occurred.<br />Your Query: " . $your_query . "<br /> Error: (" . mysql_errno() . ") " . mysql_error());
?>
<?php
$btext = '<table width="100%" cellspacing="0" cellpadding="0" id="dealers">';
// set up the arrays
$n = 0;
while($info = mysql_fetch_array( $data ))
{
${'latlng'.$n} = array(
"lat" => addslashes ($info['lat']),
"lng" => addslashes ($info['lng']),
"name" => ucwords(strtolower(addslashes ($info['name']))),
"address" => addslashes ($info['address']),
"city" => addslashes ($info['city']),
"province" => addslashes ($info['prov']),
"postalcode" => addslashes ($info['postalcode']),
"phonenumber" => addslashes ($info['phone']),
"dist" => round($info['distance'],2),
"showroom" => addslashes ($info['showroom'])
);
$info['showroom']?$bg="#DDD":$bg="";
$info['showroom']?$sr="*":$sr="";
$btext.= '<tr style="background:'.$bg.';">';
$btext.= '<td>';
$btext.= '<a href="javascript:void(0)" class="sidebar" id="row'.$n.'" ><span>'.$sr.ucwords(strtolower($info['name']))."</span></a>";
$btext.= '</td>';
$btext.= '<td>';
$btext.= ucwords(strtolower($info['address']));
$btext.= '<br>';
$btext.= ucwords(strtolower($info['city'])).", ".strtoupper($info['prov']);
$btext.= '<br>';
$btext.= $info['phone'];
$btext.= '</td>';
$btext.= '</td>';
$btext.= '</tr>';
$n++;
}
$btext.= '</table>';
$btext.= '*Come visit our showroom';
function getlatlng($array){
echo $array["lat"].",".$array["lng"];
}
function getmarkertext($array){
echo "'<div id=\"boxcontent\">'+
'<div id=\"siteNotice\">'+
'</div>'+
'<h2 id=\"firstHeading\" class=\"firstHeading\">".$array["name"]."</h2>'+
'<div id=\"bodyContent\">'+
'<p>".ucwords(strtolower($array['address']))."<br>".$array["city"].", ".
$array["province"]."<br>".
$array["postalcode"]."<br>".
$array["phonenumber"]."<br>"."</p>'+
'</div>'+
'</div>' ";
}
?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
var markerBounds = new google.maps.LatLngBounds();
var randomPoint, i;
var infowindow = new google.maps.InfoWindow();
<?php for ($i = 0; $i < $n; $i++) {?>
randomPoint = new google.maps.LatLng(<?php getlatlng(${'latlng'.$i}); ?>);
var marker<?php echo $i ?> = new google.maps.Marker({
position: randomPoint,
map: map
});
var contentString<?php echo $i ?> = <?php getmarkertext(${'latlng'.$i}) ?> ;
google.maps.event.addListener(marker<?php echo $i ?>, 'click',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent(contentString<?php echo $i ?>);//update the content for this marker
infowindow.open(map, marker<?php echo $i ?>);//"move" the info window to the clicked marker and open it
});
google.maps.event.addDomListener(document.getElementById('row<?php echo $i ?>'), 'mouseover',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent(contentString<?php echo $i ?>);//update the content for this marker
infowindow.open(map, marker<?php echo $i ?>);//"move" the info window to the clicked marker and open it
map.setZoom(15);
map.setCenter(marker<?php echo $i ?>.getPosition());
});
markerBounds.extend(randomPoint);
<?php } ?>
map.fitBounds(markerBounds);
}
</script>
<?php } ?>
<style>
body, body form input, a{
background:none;
font-family:Arial, Helvetica, sans-serif;
height:100%;
text-align:justify;
color:#383838;
text-decoration:none;
text-align:left;
}
body form input{
background:#FFF;
}
#map_canvas {
height: 550px;
width:400px;
display:block;
margin:0 auto;
}
#boxcontent{
}
#firstHeading{
margin:0px;
font-size:14px;
}
#bodyContent{
font-size:12px;
}
.sidebar{
display:block;
height:59px;
width:190px;
padding:0px;
}
#dealers{
font-size:12px;
}
#dealers a:hover{
background:#eee;
}
#dealers tr td{
padding:0px;
width:200px;
margin: -10px 0px;
height:59px;
}
#dealers tr{
height:59px;
padding:0px;
}
</style>
</head>
<?php $i = isset($_POST['submit'])?"<body onload=\"initialize()\">" : "<body>";
echo $i."\n";
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;">
<form method='post'>
Within <select name='radius' value='50'>
<option <?php echo $a ?> value='10' >10</option>
<option <?php echo $b ?> value='25'>25</option>
<option <?php echo $c ?> value='50'>50</option>
</select>
km of
<input type='text' maxlength="7" name='location' value='<?php echo $result[1] ?>'/>
<input type='submit' name='submit' value='submit' />
</form>
<?php echo $btext ?>
</td>
<td id="map_canvas">
</td>
</tr>
</table>
</body>
</html>