stackoom
  简体   繁体   中英

Google Maps JS API V3: Map won't show in Internet Explorer

 原文  2012-05-14 07:50:48  2   1    php/ javascript/ internet-explorer/ google-maps-api-3

Question

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

That's loaded as an iFrame in http://dev.epicwebdesign.ca/emco/?page=dealerlocator .

For some reason, the map won't appear in Internet Explorer. There are no (JS) error messages. I've tried everything I can find, down to removing a couple extraneous commas at the end of lines.

If I manually set the div height to 500px with the developer tools it works until I search again and it resets. The inner div doesn't always appear.

The inner div has a height of 100%. The map_canvas height is 550px. Shouldn't the inner div fill it instead of being 0px tall?

This is only in Internet Explorer. There are no classes or id's on the Google code, so I can't just force it.

This is the same behaviour . That fix didn't work, with 3.3, through 3.8.

I have used up my Google-fu at the moment, and it's 4:44 AM. Any Ideas? 

<!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 answers

solution1
 2 ACCPTED  2012-05-14 11:47:24

It appears that the maps api is having problems using a table cell for the map content. This is not surprising in Internet Explorer. By simply nesting a div with id="map_canvas" inside of the table cell (and removing the id from the "td" tag), the page displayed for me in Internet Explorer 9.

Consequently, setting IE to IE7 mode made the map display correctly even with the map using a table cell.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Google Maps API V3 not showing map How to show multiple city on map using Google Maps API v3 Google Maps API V3 KML layer does not show up Google Maps API JS V3 included but not working Can't load waypoints and routes on Google Maps api v3 Google Maps Javascript API V3 not working PHP Within Google Maps API V3 Google Maps API v3 - PHP - MYSQL Reverse Geocode On Google Maps api v3 Google Maps V3 API link to infowindow
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM