- ベストアンサー
Google Mapをホームページに表示する方法
- ホームページ作成初心者の方にGoogle Mapを表示する方法を解説します。
- HTMLファイルを100個以上作成するのは困難な場合、ホームページに地図ボタンを作成し、ボタンを押されたときに地図を表示するHTMLファイルをひとつ用意することで全ての地図を表示させることができます。
- 今回の方法を使えば簡単にホームページにGoogle Mapを表示することができます。必要な情報や詳しい手順などがあればご教示ください。
- panda_1105
- お礼率100% (4/4)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには
いつもお世話になっております。 Google Mapsを利用し、同マップ内でそれぞれのアイコンの表示・非表示を切り替えたいという要望を受けたのですが、やりかたがわからず途方に暮れています。 - 要望 ------------------------------------------- 1.Google Maps内にカテゴリ1～6に属する、デザインがちがうアイコンをそれぞれ3つずつ表示。 2.このアイコンを、カテゴリ群ごとにボタンか何かで表示・非表示を切り替える。 -------------------------------------------------- [1]に関してはできたのですが、[2]のやり方がわかりませんでした。 代替案として、カテゴリごとにGoogle Mapsを読み込むhtmlを変えて iframe内で表示するというのを出したのですが、 “同マップ上でアイコンだけ表示したり消したり”したいとの ことでした。 [1]を実現するのに使用したコードが下記になります。 (※マーカーの関するスクリプトだけ外部ファイル化し、bodyにonloadでcreateMapを読み込んでいます) ----------------------------------------------------- function createMap() { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GOverviewMapControl()); map.setCenter(new GLatLng(緯度, 経度), 13); var icon = new GIcon(); icon.image = "marker.png"; icon.shadow = "shadow.png"; icon.iconSize = new GSize(20, 34); icon.iconAnchor = new GPoint(10, 34); icon.infoWindowAnchor = new GPoint(7, 1); var icon2 = new GIcon(); icon2.image = "marker2.png"; icon2.shadow = "shadow.png"; icon2.iconSize = new GSize(20, 34); icon2.iconAnchor = new GPoint(10, 34); icon2.infoWindowAnchor = new GPoint(7, 1); var point001 = new GLatLng(緯度, 経度); var marker001 = new GMarker(point001, icon); map.addOverlay(marker001); GEvent.addListener(marker001, 'click', function() { marker001.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); var point002 = new GLatLng(緯度, 経度); var marker002 = new GMarker(point002, icon2); map.addOverlay(marker002); GEvent.addListener(marker002, 'click', function() { marker002.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); } ---------------------------------------------- ここまで 方法について、ご存じの方がいらっしゃったら 教えていただきたいです。 よろしくお願いいたします！
- 締切済み
- AJAX
- google mapで二番目以降のマップが表示されない
自作のマーカーを使い、マーカーをクリックすると吹き出しが出るようにして、マップ上２か所にマーカーを付けたのですが、２番目のマーカーが全く反映されません。 下に書いたものがそのコードなのですが、見直してもどこにミスがあるのかわかりません… どなたか解決策をお願いします… <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.384521484375,34.73709847578162), 8 ); var icon = new GIcon(); icon.image = " pngイメージ画像 "; icon.shadow = " pngイメージ画像 "; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // １番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // １番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); // ２番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // ２番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); //]]> </script>
- ベストアンサー
- JavaScript
- googleマップが表示されない。
Google Maps APIを使用しホームページに地図を載せているのですが、自分自身のパソコンではFTPイメージを出力した出力先html、ネット上でもしっかりと地図は表示されているのですが、他の人のパソコンで見てみると表示しません。 下記のようにGoogle Maps APIでキーを取得し作成したのですが、どこかおかしいところがあるのでしょうか？申し訳ありませんがアドバイスよろしくお願いします。 <!-- key=*** の***部分をグーグル( http://www.google.com/apis/maps/signup.html )から取得し、入れ替える --> <SCRIPT src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAUV0srDj6343wV8Rdpy-xRRQ2GBzO3UXWtLA5PQfCol6gfChjOhS-izw7H3T2ywNEuQOminx4rgEgGw" type="text/javascript"></SCRIPT> <!-- ここへ地図を出力します↓ 地図の大きさの変更はwidthとheightの数値を使います。 --> <div id="map" style="width: 500px; height: 500px"> </div> <SCRIPT type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById('map')); map.addControl(new GLargeMapControl()); //所在地の座標設定 var lon = ○○;//経度 var lat = ○○;//緯度 var myoffice = new GPoint(lon,lat); //所在地を中心にする map.centerAndZoom(myoffice , 0);// 数値部分を変えると詳細-広域に変更できます。0-17 //中心を所在地と別に設定する場合 //map.centerAndZoom(new GPoint(○○, ○○) , 0); // 所在地の地点にアイコンを設定する // Create a base icon for all of our markers that specifies the // shadow, icon dimensions, etc. var baseIcon = new GIcon(); baseIcon.shadow = 'http://www.google.com/mapfiles/shadow50.png'; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); baseIcon.infoShadowAnchor = new GPoint(18, 25); var icon = new GIcon(baseIcon); icon.image = 'http://www.google.com/mapfiles/markerA.png'; //所在地を表示する var marker = new GMarker(myoffice,icon); //var marker = new GMarker(myoffice);// デフォルトのマーカー画像を利用する場合 map.addOverlay(marker); //]]> </SCRIPT>
- ベストアンサー
- レンタルサーバ・ASP
- googleマップがWinIEのみエラーになってしまします。
googleマップの地図をサイトに入れているのですが、WinIEのみ６も７も表示されません。FireFOX,Safariなどは閲覧できます。 地図が表示されないだけでなく、ページ自体がエラーで表示できなくなってします。(地図以外の静的なHTMLも) 記述以下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>タイトル</title> </head> <script src="http://maps.google.co.jp/maps?file=api&v=2&key=キー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(緯度を入れています), 0); var point = new GPoint(緯度を入れています); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindow("<!--<img src=images/byld.jpg>--><img src=/images/logo02.gif>"); //]]> </script> 原因かどうか解りませんが、同じURLでAPIキーを取得2回取得しています。（1回目のキーを忘れてしまったので） 何かおわかりのことがありましたら教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- Googleマップのウィンドウの表示
Googleマップの情報ウィンドウの件ですが、ページが開いた瞬間ウィンドウが開いた状態にしたいのですが、 クリックしてウィンドウを開く方法しかわかりませんでした。 ワンクッション置かずにウィンドウを表示させる方法はありませんでしょうか？ 以下が関連のソースになります。 上手くカスタマイズできませんでしょうか。（座標はダミーです） よろしくお願いいたします。 //指定されたpoint(緯度経度)、icon、htmlをもったGMarkerを作って返す関数 function createMarker(point, icon, html) { var marker = new GMarker(point, icon); //クリックしたら吹き出し表示 GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //アイコンを追加 map.addOverlay(createMarker(new GLatLng(105.612038, 27.409698), icon, "<nobr><b>aaa<br>aaa</b><br>aaa<br>aaa</nobr>"));} }
- ベストアンサー
- その他（プログラミング・開発）
- Google Map Api 複数のマーカーをおくと、一部が表示されない
お疲れ様です。 お世話になっております。 Google Map Apiで複数のマーカーを設置するスクリプトを組みました。 10件程度は問題なく表示されるのですが、10件を境に、表示されたり、されなかったりします。 F5で表示されるもの、されないものとまばらになるので、なんとなく原因は、処理よりも表示のほうが速いからではないか？ということなんですが、JSの処理の流れがイマイチわかっていないので、結論は出せません。 実際20件登録したところ、10件～17件の間で出たり出なかったりします。1～10件までは必ず表示され、その後ろのIDを持つものがランダムになります。 これを確実に全部表示されるようにしたいのですが、表示の前にsleepなどかけるのがよいのか、ajaxにしてみるのがよいのかなど、検討がつきません。 下記が、書いたスクリプトです。 もしよければ、アドバイスお願いします。 var markers = new Object(); var marker = new Object(); marker["name"] = "xxx"; marker["icon"] = "ylw-pushpin"; marker["address"] = "座標変換用の住所"; marker["text"] = "噴出しの中身"; marker["center"] = "中心にするかしないか"; markers[0] = marker; ２０回ループ markers[20] = marker; googlemap(markers) -----------googlemap(markers) function googlemap(markers) { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById("map")); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); for(var i in markers){ showAddress(markers[i]); //ここは20回ちゃんとまわってるようです } } } ------------------showAddress() function showAddress(amarker) { if (geocoder) { geocoder.getLatLng( amarker['address'], function(point) { if(amarker['center'] == 1){ map.setCenter(point, 12); } //アイコンが指定されてたらアイコンを設定 if(amarker['icon']){ var marker = new GMarker(point,micon); //アラートしてみると、ここが10回～17回ぐらいしか回ってない }else{ var marker = new GMarker(point); } map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(ふきだしのなかみ) }); } ); } }
- ベストアンサー
- JavaScript
- GoogleMAPの切り替えについて
Javascriptのエラーについて質問させてください。 １つのページで、２種類のGoogleMAPを切り替えたいと思っています。しかし、以下のように記述したところ「"offsetwidth"はnullまたはオブジェクトではありません。」とエラー表示されてしまいます（確認ブラウザ：IE6、FireFOX3、Safari、Googlechorome）。 一体、何がマズイのかさっぱりわからなくなり、困り果てて質問しています。どうかお力をお貸しください。 宜しくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="style_sheet.css" type="text/css"> <title>マップテスト</title> <script src="http://maps.google.com/maps?file=api&v=2&key=グーグルマップAPIキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //エリア１マップ用設定開始。 var map = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map.addControl( new GSmallMapControl() ); map.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point1 = new GLatLng(座標,座標); map.setCenter(point1, 10); var point2 = new GLatLng(座標,座標); map.setCenter(point2, 10); var point3 = new GLatLng(座標,座標); map.setCenter(point3, 10); //アイコンのための宣言 var icon = new GIcon(); // アイコン画像のURL icon.image = "./img/hoge.png"; // アイコン画像のサイズ icon.iconSize = new GSize(50, 25); // アイコンの表示場所 con.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map.addOverlay( new GMarker(point1, icon) ); map.addOverlay( new GMarker(point2, icon) ); map.addOverlay( new GMarker(point3, icon) ); //デフォルトの表示 map.setCenter(new GLatLng(座標,座標), 10); } } function load2() { if (GBrowserIsCompatible()) { //エリア２マップ用設定開始。 var map2 = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map2.addControl( new GSmallMapControl() ); map2.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point21 = new GLatLng(座標,座標); map2.setCenter(point21, 10); var point22 = new GLatLng(座標,座標); map2.setCenter(point22, 10); var point23 = new GLatLng(座標,座標); map2.setCenter(point23, 10); var point24 = new GLatLng(座標,座標); map2.setCenter(point24, 10); //アイコンのための宣言 var icon2 = new GIcon(); // アイコン画像のURL icon2.image = "./img/hoge2.png"; // アイコン画像のサイズ（横幅/縦幅） icon2.iconSize = new GSize(50, 25); // アイコンの表示場所 icon2.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map2.addOverlay( new GMarker(point21, icon2) ); map2.addOverlay( new GMarker(point22, icon2) ); map2.addOverlay( new GMarker(point23, icon2) ); map2.addOverlay( new GMarker(point24, icon2) ); //デフォルトの表示 map2.setCenter(new GLatLng(座標,座標); 12); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <a href="#" onclick="load()">エリア１</a>｜ <a href="#" onclick="load2()">エリア２</a>｜ <!-- マップ表示用DIV --> <div id="map" style="width:700px;height:350px;"></div> </body> </html>
- ベストアンサー
- JavaScript
- グーグルマップについて教えてください。
【やりたいこと】 グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか？ ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl3D()); streetview = new GStreetviewOverlay(); map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() { myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }
- 締切済み
- JavaScript
- googleMapでアイコン変更すると情報ウィンドウが開かない
お世話になります。 タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。 以下のプログラムで何か問題があるのでしょうか。 わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }
- ベストアンサー
- JavaScript
- google mapのピンを変更したい
お店の位置をホームページ上でgoogle mapを使い、お客様にお知らせしたいので、API keyを取得し、位置情報などを入力しているのですが、初期設定の赤いピンマークをお店のオリジナルピンマークに変更したいのですが、方法がわかりません。 書いたコードは… <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI key" type="text/javascript"></script> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // センター 位置 map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // お店位置 var point = new GPoint(お店の位置情報); // お店紹介 var html = "<div style='width:350px;font-size:12px;' ><table><tr><td><img src=画像アドレス ></td><td>郵便番号 <br>住所 <br>電話番号<br><br>営業時間<br><br>最寄り駅紹介</td></tr></table></div>"; var marker = createMarker(point,html); map.addOverlay(marker); var marker = createMarker(point,html); map.addOverlay(marker); function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </body> </html> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか？ また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。
- ベストアンサー
- Windows XP
- プリンターとWiFiは接続されているが、ドライバインストール時にプリンターが検出されない。USB接続では問題なくドライバインストールはできる。
- IPアドレスでの検索でもプリンターが見つからず、印刷ができない状況。
- この問題はキヤノン製品に関しての質問です。
お礼
詳しく教えていただきありがとうございます。 私はC言語などではプログラム暦はながいのですが javascriptやperlの経験がほとんどありませんので ご教示頂いたURLを参考に勉強します。 ありがとうございました。