GoogleMapsAPIの表示カスタマイズ｜高速道路のジャンクションやパーキングエリアが表示されない問題
- 食べログの地図を見ていると、GoogleMapsAPI を使っているのに、高速道路のジャンクションやパーキングエリアは表示されていません。クリックしても吹き出しが出ないようにしたいです。
- この記事では、GoogleMapsAPIを利用して食べログの地図に高速道路のジャンクションやパーキングエリアの表示を追加する方法について説明します。
- また、吹き出しの表示を制御する方法も紹介します。GoogleMapsAPIのドキュメントを参考にしながら、カスタマイズした地図を作成することができます。
- ベストアンサー
GoogleMapsAPIの表示のカスタマイズ
食べログの地図を見ていると、GoogleMapsAPI を使っているのに、 例えば高速道路のジャンクションやパーキングエリアは表示されていません。 正確にいうと、クリックしても吹き出しが出ないようになっています。 このように特定の要素でクリックしても吹き出しが出ないようにしたいのですが… https://developers.google.com/maps/documentation/javascript/styling?hl=ja#map_features https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeStyleFeatureType この辺りがヒントのように思うのですが、力尽きてしまいました。 わかる方がおられましたらよろしくお願いします。
- koyuki_0808
- お礼率62% (5/8)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ＞例えば高速道路のジャンクションやパーキングエリアは表示されていません。 おやっ。 そんな機能があったのですかぁ… 興味があったので、ご提示のサイトでお勉強させていただきました。 （ご提示のところがドンピシャのようですが、私は、英語がさっぱりなので斜め読みしただけです） 「地図表記のうちの何がどのような分類になっているのかわからない」と思っていたら、親切なgoogleさんは（↓）のようなページを作ってくれていました。 http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html ここで、表示を赤色などにしておいていろいろ選択を変えてみると、地図上の対応しているアイテムの表示が変わるので、どのような分類になっているかわかりますし、そのまま「Show JSON」のボタンを押すとその表示のスタイルでのJSONまで作成してくれるので便利です。 食べログの地図を細かく分析はしていませんが、インフォウィンドウがあらかじめセットされているアイテムを非表示にしているようですね。 とはいうものの一部は残っているようで、例えば東京駅のそばの東京中央郵便局の〒マークをクリックするとインフォウィンドウが表示されます。（全部消しているわけではないみたい） （↑）のサイトで設定を変えてみれば、何を表示して何を表示しないか自由に選択が可能になりますので、試してみてください。 ちなみに、ご質問の例に出ている「高速道路のジャンクション」は { featureType: "poi.business", elementType: "labels.icon", stylers: [ { visibility: "off" } ] } をスタイルに設定することで消せます。 この場合、ジャンクション以外にも高速道路の出入り口やビルのクリック用アイコン（の一部）なども同じ分類なので、一緒に非表示になるようです。
関連するQ&A
- GoogleMapsAPI Key取得ができない
HPを変更しました。 google maps を入れたいのです。 しかし、下記コメントが出てます。 このウエブサイトには 別のgoogle maps apiキーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。 ここを調べて見ても、apiキーが取得できません。 Google Maps APIを使うための API Key の取得が、V3では不要になりました。 と書いてありますが、現状api keyを取得しないと、使えません。 いろいろ調べたのですが、v2の取得方法は書いてありますが、現状では役に立ちません。 http://code.google.com/intl/ja/apis/maps/signup.html で登録できないから、質問しています。 具体的なやり方を教えてください。
- 締切済み
- HTML
- GoogleMapsAPIが表示されません
以下は、GoogleMapsAPIを表示させる部分のみを抜き取ったコードです。 これに併せてGoogleMapsDiretionsサービスを使った経路検索も設置してあります。そちらの経路選択は表示されるのですが、GoogleMapsAPIだけが表示されない現状です。 ・変数名の整合性 ・APIキー（v3は必要なし？） の2点は確認しました。 どうかアドバイスをお願い致します。 ------------↓コード部分↓（test.php）------------ <?php /*----------------------------------------------------------------------------- 概要 : : 作成者 : 作成日 : 更新履歴 : -----------------------------------------------------------------------------*/ // HTTPヘッダーで文字コードを指定 header("Content-Type:text/html; charset=UTF-8"); //--------処理部--------- //検索用クッキー削除 if(isset($_COOKIE["CoSrch"])){ setcookie("CoSrch", "", time() - 3600); } //--------処理部ここまで--------- ?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="css/gmapv3.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> $(function(){ var renderFLG=false; var directionsDisplay; var directionsService=new google.maps.DirectionsService(); var map,mode; var currentDirections=null; var startSpot="東京駅"; var endSpot="六本木ヒルズ"; initialize(); /* 地図初期化 */ function initialize() { var myOptions={ zoom:14, center: new google.maps.LatLng(35.670236,139.749832),//虎の門 mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図オブジェクト生成 */ map=new google.maps.Map(document.getElementById("map"), myOptions); if(!renderFLG) render(); calcRoute(startSpot,endSpot); } } </script> <style> #map { float:left; width:70%; height:100%; } #side { float:right; width:30%; height:100%; } #side .inner { padding:10px; overflow:auto; } </style> </head> <body> <h1>設置サンプル</h2> <p>「東京駅」から「六本木ヒルズ」までルートを検索し、右カラムにルート検索結果を表示します。 出発地点A・到着地点Bのマーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。</p> <div id="map"><!-- 地図の埋め込み表示 --></div> <br clear="all" /> </body> </html>
- 締切済み
- JavaScript
- GoogleMapsAPIのストリートビュー
GoogleMapsAPIでマーカーをストリートビューで表示させたい GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、 このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか マーカーは人型のアイコンではなく、追加したマーカーです よろしくお願いします 以下、ソースです /////////////////////////////////////////////// <script type="text/javascript"> function initialize() { var map = new google.maps.Map( document.getElementById("gMap"),{ zoom : 16, center : new google.maps.LatLng(35.688272,139.696459), mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.688272,139.696459), map: map, draggable : true }); } </script> <style> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */ } </style> </head> <body onload="initialize()"> <div id="gMap"></div> <div id="View"></div> </body> ///////////////////////////////////////////////
- ベストアンサー
- JavaScript
- google maps で、javscriptを使わずに、複数のマーカを表示したい。
Google maps で、一つの地図に複数のマーカを、簡単に表示する方法を教えて下さい。 下記URLの地図に、３つのマーカを表示させたいと思っています。 http://maps.google.com/maps?hl=ja&q=%E5%85%83%E7%B4%8B%E5%88%A5&ie=UTF8&ll=44.325199,143.377376&spn=0.010837,0.028367&z=15 google maps api で、javascriptを使えばできるということは知っているのですが、 特に動的に表示させたいわけでもないので、手軽にできないかと思っています。 （プログラミングは経験していますが、javascriptは慣れていないので、極力避けたいという気持もあります） どなたか教えて頂けないでしょうか。
- ベストアンサー
- その他（インターネット・Webサービス）
- Google Map APIに関して
http://code.google.com/intl/ja/apis/maps/documentation/examples/map-simple.html にあるようなページで、このhtmlファイル中に特定の文字列を埋め込んだらその名称を地名とする検索を行い、表示するとしたいのですが、どうやったらいいですか？ その箇所にマーカを置けたらなおいいです。 （例：http://code.google.com/intl/ja/apis/maps/documentation/examples/map-markers.html）
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
スマホで位置情報を扱うコンテンツを作ろうとしています。 navigator.geolocation.watchPosition(update,poserror,{maximumAge: 0,enableHighAccuracy:1}); を使って作っています。 作っては、テスト、修正を繰り返しています。スマホでテストをしていたのですが、突然、スマホのGPSのアイコンが表示されなくなり、位置情報をとれなくなりました。数分前まで、位置情報がとれなくなるまでは、きちんと位置情報はとれており、地図も表示されていました。 ヘテムルのサーバー にアップしてテストしています。 修正の時に余計な部分を触ってしまったのかと思い、以前に作ってアップしていたファイルを試してみると、位置情報をうまくとれるものと、とれないものがあります。 https://developers.google.com/maps/documentation/javascript/usage?hl=ja Google Maps JavaScript API v3の使用制限に 1 日あたり最大 25,000 回まで許可されています。 とありますが、25,000回も使用していないと思うのですが、 watchPositionで位置情報をとり続けているのは1回ではないのでしょうか？ google mapのAPIにアクセス数の制限とか、サーバに制限とかあるのでしょうか？ 修正したものがテストできなくて困っています。教えていただければありがたいです。よろしくお願いします。
- 締切済み
- JavaScript
- G Maps APIで同時にストリートビューは?
Google Maps JavaScript API V3 を使ってページを作っています。 http://www.withmama.info/s_map/hatena.php 開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。 Google では、 http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/streetview-simple.html というサンプルがあります(説明ページは、 http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView にある「ストリートビューの場所と視点（POV）」の部分)。 上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。 どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?
- ベストアンサー
- JavaScript
- Google Maps APIについて
グーグルのWebAPIの使用制限がよく分かりません。 例えば http://maps.googleapis.com/maps/api/elevation/xml?locations=緯度経度&sensor=false にアクセスすると緯度経度の場所の標高が入ったxmlファイルが得られることが分かりました。 実際にブラウザのアドレスバーに打ち込んで確認済みです。 まだ手をつけていないのでできるか分かりませんが、自作ソフト（一応BASIC言語系で作ります）で、これを使って 緯度経度をキーボード入力 ↓ xmlを取得 ↓ 解析、標高を取得！ ということをやりたいのですが、利用規約が大量＆英語でよく分かりません。 (1) そもそもこういう物を作ってはいけないとかありますか？ (2) 作れたとして不特定多数（といっても友人程度でしょうか）に配付ってできますか？ (3) 地点が数百箇所になると思います。確か一日2500回の使用制限があったと思うのですが、この場合も2500箇所以降は取得失敗になるのでしょうか？ また、(2)のように使った場合、使用制限の回数は ●「ソフトを使った人全員のアクセス数合計が2500回で全員が不能」 ●「2500回アクセスした人のみ不能」 のどちらになるのでしょうか？ (3)↑の(1)(2)ができなかったとして類似のサービスもしくはdllなどってありますかね？ なおソフトは商用目的とか企業でどうとかするものでなく、私の趣味で使うものです。 お金を払って会員にならなくてはならないとかだったら諦めます。 だいぶ面倒かと思いますが、どなたかよろしくお願いいたします。 https://developers.google.com/maps/terms?hl=ja#section_10_12 https://developers.google.com/maps/documentation/elevation/?hl=ja
- ベストアンサー
- その他（プログラミング・開発）
- Googleマップ
日記にGoogleマップのＵＲＬを貼り付けて飛ぶと、 どうしても吹き出しが消えてしまいます。 http://maps.google.com/maps/ms?ie=UTF8&hl=ja&msa=0&msid=108195582852458022341.000443d83e2af87084713&ll=35.169371,136.954472&spn=0.015541,0.025599&z=16&iwloc=000455ac8da81b486ecb0 上の方の様にリンクして飛んでも吹き出しが開いた状態にしたい場合、どうしたらいいのでしょうか？ 伝わりにくい質問でスミマセン。 一応調べましたがイマイチわかりませんでした。 よろしくお願いします！
- 締切済み
- その他（インターネット・Webサービス）
- Google Maps API で 住所データを渡してその場所の地図を表示させたい
Google マップでは検索ボックスに住所を入れ「検索」ボタンをクリックするとその場所が表示されます。 http://www.google.co.jp/maphp?hl=ja&tab=wl&q= このようなことを、Google Maps APIを用いて自分のサイトで行いたいと思っています。 いろいろなサイトを調べているのですが、マーカーや吹き出しをつけることはできても、入力された住所で地図の表示位置を変えることがわかりません。 はてなマップはGoogle Maps APIを使用しているとのこと、こちらのサイトでも検索ボックスに住所を入力したら地図の表示が変わるので、APIを用いてもできるのかと予想はしているのですが、実際の方法がわかりません。 http://map.hatena.ne.jp/ クラス名やヒントとなるキーワードだけでも結構ですので教えて頂ければと思います。 宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
お礼
お礼が遅くなり申し訳ありませんでした。 しかも親切な google さんのリンクまで。 感動です♪ ただこのリンク先、使いこなすにはかなりの努力が必要のようですね… がんばります♪ 間違いなくベストアンサーです !! ありがとうございました !!