• 締切済み

グーグルマップが表示されません

どなたか教えて下さい。 ウインドウズ10、クロームですがグーグルマップを使用したサイトを開きたいのですが一瞬はマップが表示されますが次のような表示がでてマップが見れません。 javascriptコンソールで技術情報をご確認下さい 何をすれば見れるようになるのでしょうか？ APIキーは取得済みでスクリプトはすべて有効にしております

みんなの回答

  • 2012tth
  • ベストアンサー率20% (1889/9435)
回答No.1

これかな？ http://nendeb.com/429 Google Mapsを利用する場合はAPIキーが必須になったもようです

  1. カテゴリ
  2. パソコン・スマートフォン
  3. Windows
  4. Windows 10

関連するQ&A

  • Google Map APIのエラーについて

    6月20日以降にドメイン取得したサイトで、Google Mapの埋め込み表示が、添付画像のようなエラーになります。 調べてみて、 Google Map API キーが必要とありましたので、その手順でキーを取得しました。Google Mapを表示させるHTMLの<head>内の最下部に、Google Map API キーを以下のように書いてあります。 <script src="https://maps.googleapis.com/maps/api/js?key=（キー部）" type="text/javascript"></script> エラーの原因が、わかりません。 教えてください。 【関連情報】 ローカルPCでは、以下のソースできちんと表示されています。 <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> ・DOCTYPE 宣言文は、関係しますか？ ・サイトはブロックされていません、 <meta name="ROBOTS" content="INDEX,FOLLOW">を記載。 ・1HTMLに２個の地図があります。複数のマーカーを立てています。 過去のサイトでは、エラーはありませんでした。 以上、エラ回避方法を教えてください！！！！！！

  • Facebookでgoogle MAP

    Facebookページで、google MAPの複数マーカー表示を作りました。 しかしサーバーに上げ、ページを表示させようとすると、 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。 という文章が出て、地図が表示されません。 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" type="text/javascript"></script> Facebookではこの表記じゃダメなのでしょうか？ ちなみにFacebookページはiframeで作っています。

  • ホームページをあたらしいアドレスに移動中です。しかし、MAPが表示され

    ホームページをあたらしいアドレスに移動中です。しかし、MAPが表示されません。 「このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/ で作成できます。 」　のメッセージがでます。 1)APIキーを取得するときは、ホームページ名(xxx.co.jp)で取得し、ホームページのindex.htmに下記のコード(map.htm というページにもキーをセットしています)をセットしました。下記のように。 <script type="text/javascript" src="jquery.js"></script> <script src="http://maps.google.com/maps? file=api&amp;v=2&amp;key=ABQIAAAAiItYfhdk5yy9PUvtJ4epRTctn4dAblzLQuTlG4XTMkhLdCVvRRsNNsYECYpxO8S1qfPdex・・・・・・・" type="text/javascript"></script> <script type="text/javascript" src="common.js"></script> しかし、上記のえらーメッセージがでます。キーを取得するとき　xxx.co.jp/index.htmを指定して取得もしましたが、えらーがでました。 2)現在レンタルサーバーの移動中(移動完了時期は、5/26期限)で、このホームページ(xxx.co.jp)では、MAPは表示をしております。 　あたらしいIPアドレスで、ドメイン名はおなじですが、MAPを表示したいのです。旧のページはまだ存在します。新旧共存と言うことになります。IPアドレスを指定して(キーを指定して取得しても、同じ結果です。Google Mapsのみ、表示ができず、上記のえらーがでます。 インターネット上に、おなじドメイン名が存在するからでしょうか。たしかに、ドメイン名を指定すると、どっちのIPのHTMLが表示されているのか、わかりませんが。 以上よろしくお願いいたします。

  • Google Mapの地図を複数表示する

    Google Mapの地図を複数表示したいのですが、わかりません APIのキーを取得して一カ所だけは利用していますが一枚の ページに複数のマップを表示したいのですが可能でしょうか？ できればコントロール機能もつけたいです。

    • 締切済み
    • CSS
  • グーグルマップAPI

    グーグルマップAPIはサイトを持たないと利用できないのですか？ APIキーの取得はできますが、ドメインの登録ができません（分かりません。）。 そのせいかAPIキーを記載すると、未登録か無効などのコメントがでます。 サイトを持たずにグーグルマップAPIを使用する方法、手順などを教えて下さい。

  • 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&amp;v=2&amp;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回目のキーを忘れてしまったので） 何かおわかりのことがありましたら教えてください。よろしくお願いします。

  • 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>

  • Google Mapのマーカー非表示

    JavaScriptは初心者ですが、質問させてください。 Google Mapでルート表示をし、かつマーカー（おたまじゃくし）を非表示にしたいのですがGoogle Maps APIで可能でしょうか？またソースの例も教えていただけると嬉しいのですが。 よろしくお願いいたします。

  • Google マップにマーカーと同心円を入れたい

    2回目の質問です。前回の掲載期間で、解決できなかったため。 超初心者的質問ですが、教えてください。 Google マップのある地点を中心に、 マーカーと1km/5km/10kmなどの同心円（半透明で外側ライン）の2種を表示をしようとしています。 おのおの単独で表示することは、例がありわかりましたが、 その2つを同時に表示するために、scriptを変更するのがわかりません。 1. マーカーを表示するscript <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.setCenter(new GLatLng(　緯度　,　経度　), 地図サイズ　); //マーカーを追加(国会議事堂) var marker = new GMarker(new GLatLng(　緯度　,　経度　)); map.addOverlay(marker); } } //]]> </script> 2. 同心円を表示するscript <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <div id='map' style='width:700px; height:400px;'><br /></div> <script type="text/javascript"> var myLatLng = new google.maps.LatLng(　緯度　,　経度　); var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 地図サイズ, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.5, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 95330, // 半径（ｍ） strokeColor: '#ff0000', // 外周色 strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight: 1 // 外周太さ（ピクセル） }); </script> この2ヶのscriptをどのようにつなげば、解決できるか教えてください。 JavaScriptの基本知識不足のため、書いていただければ助かります。

  • フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください

    フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください こんにちは、よろしくお願いします <HEAD> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> </HEAD> <FORM> <div id="default-open"> <a href="javascript:;" onclick="document.getElementById('default-close').style.display='block'; document.getElementById('default-open').style.display='none';"> オプションを追加する</a> </div> <div id="default-close" style="display: none;"> <a href="javascript:;" onclick="document.getElementById('default-open').style.display='block'; document.getElementById('default-close').style.display='none';"> 閉じる</a><br> <div id="map" style="width:300px; height:300px; margin-left: 0px; margin-top:0px;"> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.033333, 139.15), 8); } //]]> </script> </div> </FORM> 「オプションを追加する」をクリックしたら、javascriptで下側にgoogleマップAPIが現れるといったコンテンツを作っています マップの表示はできるのですが、中のマップの表示がどうしてもずれたような感じになってしまいます 灰色の帯のようなものがマップの周囲に出てきて、きちんと読み込まれて無いように見えます <div id="default-close">の外側に出すときちんと表示できるので、CSSで制御できないかと頑張ってみましたがうまくできません 上側の<div>タグで細工したのがずれる原因ではないかと思うのですが・・・ 誰かこの問題について分かる方はいないでしょうか

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する