• ベストアンサー

GoogleMAPを自社サイトに表示させる方法

GoogleMAPを自社サイトに表示させる方法なのですが、Iframeの方式では無くAjax等で行う方法について。 1つのサイトで複数のページに別々のMapを掲載したいのですが、可能でしょうか。 14のページに分けて、各ページに別の地域のGmapを表示させたい。 Iframeでは出来たのですが、CMSを利用している関係、IframeですとCMSが更新したときに読み込みしなく消えてしまうのです。

質問者が選んだベストアンサー

  • ベストアンサー
  • my-hobby
  • ベストアンサー率21% (659/3045)
回答No.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)
回答No.2

<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> ポイント増やせば良い

tomo0117
質問者

お礼

ありがとうございました。 何とか吹き出しのところも工夫してみました。 吹き出しの中の画像と吹き出しの大きさについてははあきらめました。

tomo0117
質問者

補足

ソースアドバイス深謝！ 昨晩遅くまでかかり、ほぼうまくいきました。ありがとうございます。 ただ、ポイントをクリックしたときに表示される吹き出しのサイズを変える方法と吹き出しにリンク先の施設名は入るのですが、その下の小枠にテキストを入れる方法がわかりませんでした。 再度教えていただけないでしょうか。 または、この吹き出しを出さないようにscriptを修正したのですが、今度はgoogleMap自体が表示されなくなってしまいました。 よろしくお願いいたします。

  • my-hobby
  • ベストアンサー率21% (659/3045)
回答No.1

このページ参考に成るか？ http://www.geekpage.jp/web/google-maps-api/ 佐渡地図情報のソフトです http://jyu-denkou.com/web_gis/ http://saka-den.xrea.jp/h4dgmap/h4tizu.html

tomo0117
質問者

補足

おかげさまで参考サイトを拝見し、<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>

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • googlemapがうまく自社サイトに組み込めません

    自分のサイトでグーグルマップを掲載するべく奮闘しておりますが、なぜかgooglemapを埋め込んだサイトを開こうとすると「インタネットサイトwww.～は開けません。操作は中断されました」となってしまい開けません。 でも別のウィンドウでgooglemapだけを開くようにするとなんの問題もなく閲覧できるのです？？？ どうしても直すことが出来ずに途方にくれております。 googlemapを組み込むサイトの言語はutf-8に設定しております。 なにか対策などありましたらご教授いただけると幸いです。 どうぞよろしくお願いいたします。

  • iPhoneサイトにgooglemapを掲載したい

    iPhone用のウェブサイトにgooglemapの地図を掲載しています。 PCから見たGoogleMapの「HTML を貼り付けてサイトに地図を埋め込みます」というソースをそのまま利用しているのですが、iPhoneからみると右上にある「写真」「地形」を選択しても何も表示されません。 また、左上にある地図を上下左右・拡大縮小させるコントローラー？も全く動きません。 地図上を指でドラッグすると地図はスルスルと動いてくれるのですが、「写真」「地形」などを表示したり、拡大縮小するにはどうしたらいいのでしょうか？ iframeのパラメーターに何か追加する必要があるのでしょうか？ それとも「HTML を貼り付けてサイトに地図を埋め込みます」からではダメなのでしょうか？

  • GoogleMAPに好きな場所のマークをつける方法

    よくサイトでGoogleMAPを使っているところではGoogleMAPに、例えば温泉なら温泉の場所にマークがついた地図などをサイトに載せています。これってどうやるんでしょうか？ MAPを貼り付けるのは、GoogleMAPで表示させたあとにリンクボタンで埋め込みコードを出すのはわかります。好きな場所にマークがついた地図はどうやるんでしょうか？

  • GoogleMap（埋込）上のボタンを非表示したい

    GoogleMapを自分のサイトへ埋め込んだ際、 Mapの右上に「地図」「写真」「地形」「Earth」と 4つの切り替えボタンが表示されますが、 これを表示させない方法をご存知の方教えてください。 よろしくお願いします。

  • GoogleMapApi GoogleMap のカスタマイズについて。現在見えているマーカーの情報のみをサイドバーに表示したい。

    GoogleMapをサイトで利用を考えています。 現在、XMLを利用して、マーカーをGMap上へ表示させることまではできました。 http://www.i-ll.jp/test/map/xml.html コードはソースを参照をお願いします。 ここからカスタマイズについてなのですが 現在はマーカーの情報をすべてサイドバーに表示してあります。 これを、マーカーが実際に目で見えている情報のみをサイドバーに表示させたい場合 どうしたらよいのでしょうか？（添付画像参照） スクロールするたびに情報が変化します。 参考サイト 川越なう：http://kawagoe-now.jp/ 初めて、GoogleMapをカスタマイズしていて、不慣れな部分も多いのですが よろしくお願いいたします。

  • GoogleMapを複数表示させたい

    GoogleMap　を　API　で２つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。 マーカーをつけて吹き出すをだすまではできたのですが、 マップをもうひとつ増やすにはどのように記述すればよいでしょうか？ 現在のソースは以下です -------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=http://maps.google.com/maps?file=api&amp;v=2&amp;key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真 切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします

  • ChromeでGooglemapが表示されない

    手元に３台のWin7SP1のPC(３台とも同じバージョンV．33のChrom)があります。そのうちの１台がｇoogle.co.jp/maps/サイトのmapが表示(一瞬表示されかかり、その後真っ白なブラウザ画面に遷移)されません。（IE11では正常に地図が表示される） 他の２台は正常に表示されます。 ところが、この表示されないPCでgoogle.com/maps/へアクセスしgooglemapを表示すると正常に地図が表示されます。 １台のみ「.ｊｐサイト」のgooglemapが表示されないが、「.comサイト」のgooglemapは正常に表示されるという状況です。 google.co.jp/maps/で地図が表示されないPCを何とかしようと、(1)キャッシュの削除、(2)ブラウザの再インストール、(3)「同期の解除」等を試みましたが解決に至りませんでした。 どなたか解決策のお知恵をお貸しください。

  • GoogleMapの情報ウィンドウの動的表示

    C#、asp.netで開発しています。 ＤＢから持ってきた情報をGoogleMapの情報ウィンドウに記載したいです。 マーカーがつく場所は動的に変わるため、xmlファイルに出力したのちに表示しようと考えています。 http://mspec.jp/blog/archives/67 こちらのサイトを参考に、javascriptを書いたのですが、setPointMarker()からMarkerSet(lat,lng,text)へ動作しません。 setPointMarkerの「$.ajax({」の部分が動作していないように感じています。 ajaxは特別な記述がないと動かないものでしょうか。 aspxファイルにjqueryを読み込むタグは記載しているのですが、それだけではajaxは動かないのでしょうか。 上記サイトでも、特別ajaxの何かのファイルを読み込んでいる記述が見当たらなかったため、困っています。 api V3からはxmlを読み込むタグがなくなったそうなので、 どのようにして読み込めばいいのかわからず途方に暮れています。 もし、動的なものを出力するのにxml以外で何かいい方法があればそちらも検討します。 どなたかアドバイスお願いいたします。

  • 背景色を切り替えてもGoogleMapを表示させる

    ページにあるボタンを押下してスクリプトを実行してスタイルシートで、デフォルトの白から背景色を変更すると、元から表示されていたGoogleMapのタイル画像が表示されずに変更した色になります。背景色を切り替えてもGoogleMapのタイルを表示させる設定方法を教えてください。

  • 【jQuery】 googlemap のフェード

    googlemapをjQueryでフェードインさせると IE以外のブラウザでは指定の場所が表示されません。 表示させる方法はありますでしょうか？ 宜しくお願いします。 ■jQuery $(function() { $("#box").hide(); $("#gMap").hide(); $("#box").fadeIn(1000,function(){ $("#gMap").fadeIn(600); }); }); ■html <div id="box">あいうえお</div> <div id="gMap"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4820130764!2d139.70051100000003!3d35.689754400000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0892532b1%3A0x6b5d24f0d0eacf29!2z5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yT5LiB55uu77yT77yY4oiS77yS!5e0!3m2!1sja!2sjp!4v1397613553985" width="100%" height="350" frameborder="0" style="border:0"></iframe></div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する