google mapをiframeで表示させた後、GoogleMapA

解決済

質問者：ugugokana
質問日時：2010/10/06 12:04
回答数：2件

google mapをiframeで表示させた後、GoogleMapAPIを使用して地図を
カスタマイズする方法を教えてください。

Google Map APIおよび、htmlのコーディングに関しても全くの初心者です。
マップ上にマーカーを表示させたくて下記のように見よう見まねでプログラミングしましたが
地図は表示されますが、マーカーが表示されませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&amp …キー]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var marker = new GMarker(new GLatLng(34.685567, 135.527467));
map.addOverlay(marker);
}
}
//]]>
</script>
</head>

<iframe width="600" height="600" frameborder="1" scrolling="no"
　　　　　marginheight="0" marginwidth="0"
src="http://maps.google.co.jp/maps/ms?ie=UTF8&hl= …
msid=..................;z=5&output=embed">

</iframe>

</html>

関数を記述する場所がまちがっているのか、ほかに記述するべき関数がいるのか、
大変初歩的で申し訳ないのですが、ご回答のほどよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2010/10/06 13:19

GoogleMapAPIの使い方が間違っていると思います。

GoogleMapAPI(Ver2)では、貼り付け埋め込みしたGoogleMapを操作する事は出来ません。
GoogleMapAPIはAPIのスクリプトを読み込んだHTMLファイルの中に、MAPのコンテナーと
なる<div id="map"><div>要素を配置し、
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.685567, 135.527467), 12);
とかして、javascriptでmapオブジェクトを操作する物です。
マーカーオブジェクトやマップイベントも同様です。

100歩譲って、iframeに読み込む別HTML内の<div>要素をMAPのコンテナーとする
事も↓のように指定すれば可能ですが（何のメリットもないです）
var content=iframe.contentDocument||iframe.contentWindow.document;
var map = new GMap2(content.getElementById("map"));
親からは、mapの基本操作しかできません。
マーカーオブジェクトやマーカーイベントの操作は苦労してオブジェクトを
ラップして操作する必要があり、私には超困難でした。

よって、すなおに同じページ内にMAPコンテナーをおいた方が良いです。

※iframe内のHTMLにGoogleMapAPIをロードして、それを親のjavascript
で操作するの技もありますが、思わぬところで不具合が出た思い出があります。
（詳細は忘れたけど）

- 0
- 件

通報する

この回答へのお礼

つたない質問内容でしたがくみとっていただきありがとうございました。
基本的な仕組みも理解せずあれこれ試していました。
丁寧に説明していただきよく理解することができました。

通報する

お礼日時：2010/10/12 09:16

No.2

回答者： noname#121283
回答日時：2010/10/06 13:34

情報が曖昧すぎで困るかな。

Google Maps APIプログラミング入門 [大型本]
勝又雅史 (著)
これを買うか。

http://make-view.appspot.com/index
このサイトのソースコードを見るか。
http://d.hatena.ne.jp/jyouji1979/files/makeview. …