- ベストアンサー
GoogleMAPを自社サイトに表示させる方法
GoogleMAPを自社サイトに表示させる方法なのですが、Iframeの方式では無くAjax等で行う方法について。 1つのサイトで複数のページに別々のMapを掲載したいのですが、可能でしょうか。 14のページに分けて、各ページに別の地域のGmapを表示させたい。 Iframeでは出来たのですが、CMSを利用している関係、IframeですとCMSが更新したときに読み込みしなく消えてしまうのです。
- tomo0117
- お礼率50% (43/86)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<div style="width:400px; padding:8px; background-color:#CCCCFF; font-family:Courier; border:solid 1px #6600CC;" >TOKYOU <BR><a href="http://jdenkou.com/">住宅サービス<\/a> <\/div><br /><img src="kousei.gif" width="350" height="370"/>'); width:400px; padding:38px; ←変更で吹き出しの文字書き込みスペースの大きさ変わる ><img src="kousei.gif" width="400" height="370"/>'); ←画像のスペース変わる 画像はソフトで大きさ編集（例：400:370) 色は色コード変更
その他の回答 (2)
- my-hobby
- ベストアンサー率21% (659/3045)
<title>Google Maps API 2 テンプレート（000電気）</title> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAqiNrMXddeFfaTv6-jLWTRBRurFxxr1KoBVeF_ztCDbLjV1taZRT-rtkfDxZIb2uYGtieMTTYXPC1Bw"></script> <!-- ★前の行の「key」はグーグルから取得した独自のものに変更する --> <!-- javascriptはじまり --> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { // ===== 基礎部分、setCenterで中心座標とズームレベルを指定 ===== var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); // ズームコントロール。Small で小型に map.addControl(new GMapTypeControl()); // 地図タイプ切り替え。Control(true)で小型に map.setCenter(new GLatLng(35.866795, 139.854208), 12); // ★ およそ北緯35度67分・・・、およそ東経139度74分・・・、ズームレベルは13（最大は19） // ===== マーカーとフキダシ（変更不要） ===== function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } // ===== ポイント設置設定、前が緯度（Lat）、後が経度（Lng） ===== // ===== ポイント１ ===== var point = new GLatLng(35.866795,139.854208); //★位置設定 var marker = createMarker(point,'<div style="width:200px; padding:8px; background-color:#CCCCFF; font-family:Courier; border:solid 1px #6600CC;" ><a href="http://jyu-denkou.com/">住宅電気工事サービス<\/a> <\/div><br /><img src="kousei.gif" width="250" height="170"/>'); // ★ map.addOverlay(marker); // ===== ポイント２ ===== } } //]]> </script> <!-- javascriptおわり --> <!-- スタイル指定の例 --> <style type="text/css"> body { font-family: Verdana, Arial, sans-serif; font-size: 13px; } </style> <!-- スタイル指定おわり --> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 960px; height: 614px; border: 1px solid black;">Loading...</div> </body> </html> ポイント増やせば良い
- my-hobby
- ベストアンサー率21% (659/3045)
このページ参考に成るか？ http://www.geekpage.jp/web/google-maps-api/ 佐渡地図情報のソフトです http://jyu-denkou.com/web_gis/ http://saka-den.xrea.jp/h4dgmap/h4tizu.html
補足
おかげさまで参考サイトを拝見し、<head> </head>のところに <script src="http://maps.google.com/maps?file=api&v=2&key=取得したkey" type="text/javascript" charset="utf-8"></script> を挿入し、 <body></body> で地図を挿入したい箇所に座標を含めて挿入したところ 2つのページで問題なく表示する事を確認しました。 ただ、該当の場所にバルーン みたいな目印を挿入できませんでした。 Maps JavaScript API Ver2だったかと思います。 バルーンのような目印を挿入させる方法はございますでしょうか。 <div id="map" style="width:417px; height:308px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(緯度, 経度), 13); } //]]> </script> </div>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございました。 何とか吹き出しのところも工夫してみました。 吹き出しの中の画像と吹き出しの大きさについてははあきらめました。
補足
ソースアドバイス深謝！ 昨晩遅くまでかかり、ほぼうまくいきました。ありがとうございます。 ただ、ポイントをクリックしたときに表示される吹き出しのサイズを変える方法と吹き出しにリンク先の施設名は入るのですが、その下の小枠にテキストを入れる方法がわかりませんでした。 再度教えていただけないでしょうか。 または、この吹き出しを出さないようにscriptを修正したのですが、今度はgoogleMap自体が表示されなくなってしまいました。 よろしくお願いいたします。