こんにちは、少し質問があります。iframeをキャンバスに入れる方法
Googleマップでiframeをhtmlに配置するにはどうすればよいですか？
<canvas id="google_map" width="600" height="400">
<iframe width="600" height="390" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe>
</canvas>
残念ながら、Canvasタグ内にiFrameを配置することはできません。ただしcanvas要素の上にiFrameをオーバーレイする相対位置を使用することができます。
<style type="text/css">
canvas {
width: 600px;
height: 400px;
}
iframe {
position: relative;
top: -400px;
width: 600px;
height: 400px;
}
</style>
<canvas></canvas>
<iframe src=""></iframe>
私も言っていることの一つは、フレームのを使用すると、通常のWeb開発における経験不足の兆候であるということです。あなたのそれらの使用はおそらく回避される可能性があります。
キャンバスに入れたいんなぜあなたは
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; margin-top: 50px;">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="200" frameborder="0" style="border:0"></iframe>
</div>
....これを試してキャンバスにマップを配置する必要がありませんか？キャンバスタグをサポートしていないブラウザの場合 – arahaya
私は少しこのマップを変形する必要があるので、実際の紙の地図のようになります – Lukas
私はあなたがこれを行うことができるとは思わない。あなたは、Googleの静的マップapiから画像を取得し、 'キャンバス'を使ってそれを歪めることができるかもしれませんか？ –