![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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& …キー]"
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>
関数を記述する場所がまちがっているのか、ほかに記述するべき関数がいるのか、
大変初歩的で申し訳ないのですが、ご回答のほどよろしくお願いします。
No.1ベストアンサー
- 回答日時:
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
で操作するの技もありますが、思わぬところで不具合が出た思い出があります。
(詳細は忘れたけど)
つたない質問内容でしたがくみとっていただきありがとうございました。
基本的な仕組みも理解せずあれこれ試していました。
丁寧に説明していただきよく理解することができました。
No.2
- 回答日時:
情報が曖昧すぎで困るかな。
Google Maps APIプログラミング入門 [大型本]
勝又 雅史 (著)
これを買うか。
http://make-view.appspot.com/index
このサイトのソースコードを見るか。
http://d.hatena.ne.jp/jyouji1979/files/makeview. …
Google Map APIに関する本はやはりあるのですね。
上記のサイトについては私にはあまりにも上級でしたので
あきらめます。。。
教えていただきありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ハイパーリンクに下線を表示す...
-
ページによって表示位置がずれ...
-
google mapをiframeで表示させ...
-
<object data="">の挙動について
-
<a href="#" …>の意味を教えて...
-
<div>のタッチ状態を維持したま...
-
Dreamweaver で 外部JSを読み込...
-
window.openで同画面遷移しない
-
別ファイルのfunctionの読み込み方
-
getElementsByNameで要素が取得...
-
プルダウンメニューを別ファイ...
-
ウインドウの後ろに隠れている...
-
子フレームの自動リロードは可...
-
確認ダイアログで「キャンセル...
-
location.reload() について
-
window.openで404エラーがでます
-
新しいウィンドゥを最大化で立...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
テキストをクリックすると答え...
-
bodyタグの範囲について
-
ページの読み込みが完了してか...
-
「overflow: hidden」ペー ジ内...
-
"mailtoでメールの【氏名】【性...
-
外部ページからハッシュタグ(...
-
DOCTYPE宣言をするとstyleが適...
-
mailtoで質問・・・
-
IE以外は色が付かない なぜ?
-
javaScript Nullまたはオブジェ...
-
divで作成したテキストボックス...
おすすめ情報