このコード例を使用して、Google マップに何かをオーバーレイしています。
<!DOCTYPE HTML>
<html>
<head>
<title>Google Map Test</title>
<style>
html, body {
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif, Arial;
}
.txt {
position: absolute;
top: 100px;
left: 150px;
padding: 30px 50px;
text-align: center;
font-size: 13px;
font-weight: bold;
z-index: 99;
background-color: #fff;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div>
<iframe src="http://www.apps-tube.com/ip-lookup/google-map.php?xy=14.4673541,78.8241339" scrolling="no" frameborder="no" id="gmap" style="width:746px;height:380px;"></iframe>
</div>
<div class="txt">Country name</div>
</body>
</html>
この結果が得られます [テキストを自動的にblurred
]
blur effect
しかし、下の画像のようなものなしで結果が欲しいです。
このぼかし効果を取り除くのを手伝ってください。サンプルページについては、このリンクにアクセスしてください。
注: Google Chrome を使用しています。