[API]Google MapsがIEでエラーがでる時の対処
InternetExplorerだと、AjaxでのGoogle Maps APIが正常に表示されないので、その修正方法。
<!--[if IE]>
<iframe src="map.php?k=[経度]&i=[緯度]" width="500" height="400" scrolling="NO" frameborder="0"></iframe>
<![endif]-->
<!--[if !IE]> <-->
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
...省略...
//]]>
</script>
<!--> <![endif]-->
と別途IEのみiframeで表示させます。
iframeで指定したmap.phpは以下のように記述。
省略部分については、こちらやこちらを参考にしてください。
<?php
$k = $_GET['k'];
$i = $_GET['i'];
$googlemap=<<<_EOD_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Map
<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = new Array(1);
function onLoad() {
var map = new GMap(document.getElementById("map"));
...省略...
}
//]]>
</script>
</head>
<body onload="onLoad()" style="margin:0px; padding:0px;">
<div id="map" style="width:500px; height:400px; margin:0px; padding:0px;"></div>
</body>
</html>
_EOD_
;
echo $googlemap;
?>
Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック
著者／訳者：Rich Gibson Schuyler Erle
出版社：オライリー・ジャパン( 2007-10-26 )
定価：￥ 3,045
Amazon価格：￥ 3,045
単行本（ソフトカバー） ( 340 ページ )
ISBN-10 : 4873113415
ISBN-13 : 9784873113418
