Home/ Questions/Q 7946727
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:14:05+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0