2012-05-14 71 views
0

http://dev.epicwebdesign.ca/emco/assets/mapping.php谷歌地圖JS API V3:地圖將無法在Internet Explorer

那是裝在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

沒關係的PHP - 你能告訴我們所有生成的JavaScript? – duncan

+0

請給我一些有效的郵政編碼嗎?並非我們所有人都像您所期望的那樣熟悉系統,我也不想通過這個正則表達式來涉水。 –

+0

E1A0A1 E1A0B2 E1A0E5 – evandentremont

回答

2

看來地圖api在使用地圖內容的表格單元格時遇到問題。這在Internet Explorer中並不奇怪。通過在表格單元格內嵌入一個帶id =「map_canvas」的div(並從「td」標籤中刪除id),我在Internet Explorer 9中顯示的頁面。

因此,將IE設置爲IE7模式即使使用表格單元格的地圖也能正確顯示地圖。

+0

謝謝,就是這樣。我希望我能夠高興,我沒有代表。 – evandentremont