Google Maps JS API V3：地图不会在Internet Explorer中显示

时间：2012-05-14 07:50:48

标签： php javascript internet-explorer google-maps-api-3

http://dev.epicwebdesign.ca/emco/assets/mapping.php

在http://dev.epicwebdesign.ca/emco/?page=dealerlocator中加载为iFrame。

由于某种原因，地图不会出现在Internet Explorer中。没有（JS）错误消息。我已经尝试了所有我能找到的东西，直到在行尾删除一些无关的逗号。

如果我使用开发人员工具手动将div高度设置为500px，它将一直有效，直到我再次搜索并重置。内部div并不总是出现。

内部div的高度为100％。 map_canvas高度为550px。内部div不应该填充它而不是0px高吗？

这仅适用于Internet Explorer。 Google代码上没有类或ID，所以我不能强迫它。

这是same behaviour。这个修复不起作用，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>

1 个答案:

答案 0 :(得分：2)

似乎地图api在使用表格单元格映射内容时遇到问题。这在Internet Explorer中并不奇怪。只需在表格单元格中嵌入id =“map_canvas”的div（并从“td”标记中删除id），就可以在Internet Explorer 9中为我显示该页面。

因此，将IE设置为IE7模式，即使地图使用表格单元，也可以正确显示地图。

相关问题
最新问题